How to Install and Track Events with Autotrack

Autotrack JS is a plugin for Google Analytics that allows you to track events, social interactions and media queries automatically. In this video, you will learn how to install it with the help of Google Tag Manager.

— http://analytics.blogspot.com/2016/02/introducing-autotrack-for-analyticsjs.html
— https://github.com/googleanalytics/autotrack
— https://ga-dev-tools.appspot.com/autotrack/

Free Email course: https://old.measureschool.com/emailcourse
Free Resource Library: https://old.measureschool.com/resources
More Measure Courses: https://old.measureschool.com/products

?Looking to kick-start your data journey? Hire us: https://old.measureschool.com/services/

RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books

GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear

– In this video, I’m going to show you how you can install the autotrack.js plugin for Google Analytics in order to track events, social interactions, and media queries automatically with Google Analytics. And we’ll do this with the help of Google Tag Manager. So let’s dive in. Hi there, and welcome to yet another video of MeasureSchool.com where we teach you the data-driven way of digital marketing. My name is Julian, and in this video we’re going to talk about autotrack.js which is a plugin for Google Analytics. Before we dive in, let me say that I changed my mind a little bit about Autotrack. It’s not one of the features that I use a lot because it’s actually a little bit cumbersome to install. And I think that it’s much better to learn Google Tag Manager instead of trying to install Autotrack because you have much more granular control over the implementation when you install the same tracking with Google Tag Manager. That said, Autotrack is still a viable option if you have a new implementation and you just want to track the basics with Google Analytics. So how would we install this? First of all, we need to load the autotrack.js feature on our site. This is a script that you can download from this page and upload it to your website so that it’s available when the page loads. So I’ve done this in our demo shop. I got the autotrack.js feature prepared so it’s under our root directory here, demoshop.com/autotrack.js. And it’s available to our Google Analytics code. The next thing we need to do is actually install Google Analytics. Now we’ll do this with Google Tag Manager. This is actually not recommended if you have already Google Tag Manager running but I don’t actually work with manual installations of Google Analytics anymore. So I want to show you how you can do this in Google Tag Manager. They give us a different snippet that we can install. So we’ll just go ahead and copy this. Go over to Google Tag Manager and we’ll go with a new tag. And we’ll call this Google Analytics and it’s a page view tag which will find all pages. And just put the notice in here that this is with Autotrack. Alright, next we choose the product. But unfortunately, our normal tag template for Google Analytics will not work with Google Tag Manager because we have no way of implementing autotrack.js with the tag template. So we’ll need to go with a custom HTML tag where we can paste our code. And obviously, we need to customize this a little bit. First of all, we need our UAID which we can find in Google Analytics itself. Under the Admin section in Properties we have our tracking ID which we can copy and transfer over to Google Tag Manager right here. The second thing we need to customize is the actual path to Autotrack. In our case, it’s on our root domain so I can just go with /autotrack.js. So now, this is implemented. We just need to choose our trigger which is on all pages and create this tag. Let’s go into our preview in debug mode and see what it does for us. So I’ve opened up a page here called demoshop.com/autotrack where I’ve implemented the features that we can track with Autotrack and see how they work. So first of all, Autotrack claims that it can track outbound links automatically. And I have an outbound link here to Google.com which I will press with the Command key pressed so it opens up in a new tab. Alright, and we can go over to Google Analytics in the real-time reporting and look under Events. And we just fired at one event. It’s in the event category Outbound Link, and event action click and the label is Google.com. So this worked automatically. We didn’t have to install any kind of event tracking on this element, and it works as expected. So Autotrack does a good job of checking up on link clicks. This is actually also true for outbound forms. So just to do another test here, let’s say we click on this link here. We go to WordPress. And we have another event. It should, in a second, pop up here. Here we go. And it went to wordpress.org So that works as expected. Let’s look at more events that we can track which is declarative event tracking. So I’ve made an event link here. And if you look into the HTML and inspect the HTML, we can see that I’ve implemented this link with the data event category attribute, data event action attribute, and data event label. So any link that is tagged up with these attributes correctly should be checked automatically in Google Analytics. So let’s try this out. I click on this link with the Command key pressed again. So it opens up in a new tab. And we should see something in our event report. Let’s get rid of this filter. And we see a new event which I tagged with Autotrack. Click, and the event label, event. So declarative event tracking also works perfectly with autotrack.js. Now the next feature that it claims to track automatically are social clicks. And if I like this page here, I have a normal Facebook button implemented. We should see a social event in Google Analytics. Social events are not easily seen in the real-time reporting. We don’t see any event being fired. Social events are actually part of the social report that we can find under Acquisition. And we can see within the plugin report here which social actions have been taken, so, for example in our case, the Like. Unfortunately, it takes a while to populate these reports, so we need to check back later if this worked correctly. But fortunately, we can also look into our Tag Assistant and see what was fired into our Google Analytics. And we see a social event was fired here: what was transferred, the action Like, the network Facebook, the target, and the title. So this also works correctly and as expected. So Autotrack does a good job of tracking social events. Now the other features here are a little bit more cumbersome to demonstrate. But one feature I want to show you just because it’s interesting is the media query tracker which should be able to track different breakpoints, resolutions, and the device orientation. Unfortunately, this doesn’t do it by default. We actually need to configure something in Google Analytics and in our tracking code. So let’s see what needs to be done. First of all, we need to create a custom dimension. In our case, I just want to show you this feature and implement device orientation for our demo here. So let’s go over to Google Tag Manager into the Admin section. And then under the Properties settings, we go to Custom Definitions and there we can implement custom dimensions. Go into here and create a new custom dimension. The custom dimension will be called orientation. And it’s scoped on a hit basis. We’ll keep this active and all we need to do is now remember the dimension slot. In our case, this is number six. So let’s remember that, and in the next step we will configure our tracking code. For that, we need to actually look into the syntax that needs to be put in place. And it says we can just copy this and put it into place for our require method. So let’s click Again into our page view tag. Open that up, and instead of our Autotrack require, we just implement the just copied code. Here we go, and now we need to configure our plugin so it sends over the right events. Now if you have implemented breakpoints as a dimension and resolution, you could leave that all in here. But I only put in orientation, so I’m going to just delete this out of our options so it only picks up the orientation for now. Now we need to specify the dimension index which in our case was number six. And we should be all done. Let’s continue this. Save it and refresh our preview in debug mode. And then go back to our page and refresh this as well. And now I will go into the Developer Tools which I can do in Chrome under View and over here are the Developer Tools which will open up this little console. Up here I can actually choose if I want to view this as a website or as a mobile device. So if this is ticked, we would need to choose our device here. We have here Nexus 5. And we can actually switch over the different modes of landscape to portrait, which correlates to the actual orientation. So a custom dimension should be sent o

About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

Inline Feedbacks
View all comments