How to Track 360 Spins with Google Tag Manager

On this page

In this article you'll learn how to track Sirv Spin events with Google Tag Manager (GTM). This way you can easily start tracking your users' 360 spin and Sirv Media Viewer (referred to as Sirv JS 3 in this guide) interactions in your preferred analytics service or create retargeting campaigns using your ad network of choice.

Pushing events to the dataLayer

First, you'll need to push custom events to GTM's datalayer. If you're not familiar with GTM's datalayer, please read this guide.

The code below for Sirv JS 2 pushes two custom events to Google Tag Manager's datalayer: sirvSpinLoaded and sirvSpinInteraction. You can name the events however you please.

For Sirv JS 3 aka Sirv Media Viewer, we're pushing 4 events that cover all the interactions your users can have with your 360 spins.

<script>
window.dataLayer = window.dataLayer || [];
var SirvOptions = {    
	spin: {    
	/* Triggers when the spin is loaded. */        
		onready: function (spin) {
		/* this pushes the sirvSpinLoaded event to GTM's datalayer. You can name the event however you please */
			window.dataLayer.push(
			'event': 'sirvSpinLoaded'
		});
	},
	/* Triggers when user interacts with spin. */
	onspin: function (spin) {
	/* this pushes the sirvSpinInteraction event to GTM's datalayer */
		window.dataLayer.push({
		'event': 'sirvSpinInteraction'
		});
	}
}};
</script>
<script>
window.dataLayer = window.dataLayer || [];
// Spin ready event pushed to datalayer
Sirv.on('spin:ready', (spin) => {
  window.dataLayer.push({
        'event': 'sirvSpinReady'
      });
});
// Spin rotated event pushed to datalayer
Sirv.on('spin:rotate', (spin) => {
  window.dataLayer.push({
        'event': 'sirvSpinRotated'
      });
});
//Spin zoom in
Sirv.on('spin:zoomIn', (spin) => {
  window.dataLayer.push({
        'event': 'sirvSpinZoomIn'
      });
});
//Viewer - fullscreen
Sirv.on('viewer:fullscreenIn', (viewer) => {
  window.dataLayer.push({
        'event': 'sirvFullScreen'
      });
});
</script>

Be sure to add the event code on your website after your Google Tag Manager and Sirv Spin code. You are not limited to onready and onspin callbacks, here's the full list for Sirv JS 2. and Sirv JS 3.

Setting up Triggers in GTM

Next you should set-up triggers based on these events. In order to do so, create a new trigger with a meaningful name e.g. 'Sirv - 360 spin loaded'.

Then select 'Custom event'. Type in the event's name e.g 'sirvSpinLoaded'. Click Save. Repeat with 'sirvSpinInteraction' or any other events you might want to add.

GTM trigger creation process

Setting up Tags in GTM

Now you'll be able to use these triggers to fire tags for any analytics or advertising platform.

Let's consider a Facebook custom event

1. In GTM, go to Tags -> New -> Custom HTML and add this code:

<script>
  fbq('trackCustom', 'SirvSpinLoaded');
</script>

2. Under 'Triggers', choose your 'Sirv - 360 spin loaded' trigger.

Add a new Facebook custom event tag with Sirv's Trigger

3. To ensure the tag fires after the Facebook pixel has loaded, go to Advanced Settings. Under the tag firing options, choose 'Once per event'. Under tag sequencing, choose 'Fire a tag before' and choose your Facebook pixel tag.

By following the steps above you can integrate any analytics or ad service to track your user interactions with Sirv Spins.

Was this article helpful?

Get help from a Sirv expert