I was recently playing around with the Chrome Experiments for Virtual Reality, and I realized some of the interesting insights you can gain using the gyroscope coordinates from your mobile device.

For example, if I’m on the roller coaster experiment, where do users look when they’re in certain parts of the experience? If I’m speeding down a hill, do users tend to look up or down?

In this first of many on this topic, we’ll look at how to pass the gyroscope coordinates into Google Analytics using Google Tag Manager. In future posts, we’ll take a deeper dive on how to gain specific insights using this data.

1. Create a custom HTML tag and pass the coordinates to the data layer

In GTM, create a new custom HTML tag. We’ll use this tag to grab the gyroscope coordinates for users that visit our website on a mobile device. I’ve added short comments so you can understand what’s going on here. Essentially, we grab the alpha, beta and gamma coordinates on page load and pass them to the data layer.

function deviceOrientation(event) {
// Get the alpha, beta and gamma coordinates
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// Push the coordinates to the data layer
dataLayer.push({
'alpha': Math.round(alpha),
'beta': Math.round(beta),
'gamma': Math.round(gamma),
event : 'gyroscope'
});
// Stop listening for the gyroscope coordinates
window.removeEventListener('deviceorientation', deviceOrientation)
}
// Listen for the gyroscope coordinates
window.addEventListener('deviceorientation', deviceOrientation);

Set the tag to fire on all pages. We want to do this because we need to account for users entering the site on any page.

The final tag should look like this:

2. Create GTM variables for each coordinate

Now that we have our coordinates in the data layer, we’ll want to store each of them in data layer variables. Create three data layer variables for each coordinate and name them alpha, beta and gamma to correspond with the data layer push we made in the previous step.

3. Create custom dimensions in Google Analytics

Now that we have our coordinates as data layer variables in GTM, we’ll want to prepare them for Google Analytics as custom dimensions. Create three custom dimensions in GA for each coordinate as shown below.

   

4. Pass the coordinates off to GA

Using the data layer variables we created in step 2, we’re going to send them off to GA as custom dimensions that we created in the previous step. Edit your global Universal Analytics page view tag and add the custom dimensions. Make sure the index corresponds with the custom dimensions you created in Google Analytics. In my case, they’re 3, 4, and 5.

5. Test

Testing is a little tricky on this one since you can’t really simulate the gyroscope coordinates in your desktop browser like you would in your mobile device. For the sake of making things a little quicker, I created a new event tag that gets triggered from a custom event that I pushed to the data layer. That way, I can see the data flow in my realtime reports for quick troubleshooting.

 

And that’s it! There’s a lot we can do with this data depending on the scenario and which insights you’re looking to gain. This type of post is the first of many to come on this topic.