Tracking Element Views to Amplitude with Google Tag Manager
So you want to start tracking user views of elements on your site? Then you’ve made it to the right place! In case you’re not yet sure, though…
Why track element views?
For tracking user scrolling of a page, tracking element visibility can hold huge advantages over simply tracking users’ scroll depth. Tracking element visibility will allow you to continue to make changes to your page and be confident that your tag will work as intended — no updating necessary. Element visibility triggers can also track how long a user stops to view an element, so you know the difference between users scrolling past and actually viewing an element. Since you made it this far, I’m going to assume that you have already connected your site with Amplitude and Google Tag Manager. Everything else is what I’m here for — lets get started!
Step 1: Making a new tag
First, you are going to create a tag. From Google Tag Manager, go to your ‘Workspace’ for the site you are looking to tag. From there, go to ‘Tags’ and click ‘New’ in the top right. In the ‘Tag Configuration Box’, scroll down to ‘Custom HTML’, and paste the following javascript into the box headed ‘HTML’. You should replace ‘element’ with whatever you want to name your element.
<script type=”text/javascript”>amplitude.getInstance().logEvent(‘element:shown’);</script>
Alternatively, for storing specific data about your users along with the Amplitude event, paste in this example code. You will then want to edit in your own code for ‘eventProperties’, remove the example line,” ‘page’: window.location.pathname”, and change its name to fit your property. Similar variables can be added for as many different properties you want to track.
<script type=”text/javascript”>eventProperties = {‘page’: window.location.pathname};amplitude.getInstance().logEvent(‘element:shown’, eventProperties);</script>
And you’ve successfully created your tag!
Step 2: Making the trigger
Scrolling down to the big ‘Triggering Box’, click into that, and click the plus sign in the top right. Inside of ‘Trigger Configuration’, find ‘Element Visibility’ under ‘User Engagement’. Notice that the first box on this page asks you to provide either an element ID or CSS selector. If this is totally foreign to you, we’ve reached another learning opportunity! Generally, you are going to want to select ID over CSS selector unless the element you care about has no ID, although you can technically use CSS selector in either case.
Step 3: Identifying an element ID
Identifying an element is easy. All you need to do is right click on the element you want to track and click ‘inspect’. Don’t be alarmed — this will open up a whole lot of code, but you only need to look out for a very specific bit of it. If you clicked on the right spot, you should see something that looks like this: <div id=”…” In the picture below, for instance, “Feature-2” is the ID of the element I clicked on. Copy the bit inside of the parenthesis and paste it into the text box back on Tag Manager and walla.
What if the element doesn’t have an ID?
If you can’t identify the element’s ID or it doesn’t have one, then identifying an element by CSS Selector is always an option. I recommend downloading this plug-in. Once downloaded, activate the plug-in icon, click on your target element, and notice that the CSS selector of the element is displayed at the bottom of your window. If you need further help navigating the plug-in, you can check out their brief tutorial here. Just like you would with an element ID, simply paste the CSS selector into the text box in Tag Manager. The below image illustrates my clicking on an element that has an element ID with the plug-in. Notice that the CSS selector of the element is the same as its element ID, because it has an element ID. Thus, “Feature-2” is what you would want to type into the box on Tag Manager.
Configuring the rest of the trigger is straight-forward and will depend on what you’re using it for. I opted for my trigger to fire once per element and on all visibility events. You will want to edit these options if, for instance, you have multiple elements sharing the same ID on your site.
Step 3. Testing
Congratulations — you’ve built your tag and you’re ready to test it. Before I let you go, I’ll try to provide some debugging tips in case its not working properly right away. Before publishing to your site, seriously consider using the Preview tool to test your work. While this becomes more important for a high-traffic site, lower traffic sites can still benefit. First, if you have incorrectly connected your site to Google Tag Manager, then the debugger will fail to connect to the site. Trust me, I know from experience, and hopefully you won’t have to! Once you have that working, however, viewing the targeted event in the pop-up window should cause your trigger to fire in the Preview window. If the event doesn’t fire, there’s likely a problem with your trigger.
If it passes the tests, then it’s time to publish! Note that it can take some time for your publication to go through. So, if it doesn’t work immediately, be patient!
Once you’ve published, the easiest way to make sure that Amplitude is receiving the events is with this Amplitude Events browser extension. Once installed, you can watch Amplitude events fire when you view the elements you are tracking.
You did it! What now?
Hopefully you have all you need to start tracking element views — a major achievement! Of course, this article merely scratches the surface of what is possible when using powerful tools such as Amplitude and Google Tag Manager to run analytics. If you’re interested in taking full advantage of the tools at your disposal, you’ll likely be asking some of the following questions soon:
- What other information about my users should I be tracking?
- Is there a way to do this that is more suited to my needs?
- What else should I be tracking?
- How can I best take advantage of the results I produce?
- Does my current Amplitude set-up need cleaning up?
- How can I run experiments and track the results?
My agency Permutable is helping companies set up analytics tracking and experiments that provide valuable insights used to meet their product and growth goals and answer questions like the above. Don’t hesitate to reach out if you need help, because, as I’m sure you’re already aware, you really are flying blind without analytics.
Lastly, I’m curious to hear what you got out of this article. Specifically, if you are tracking element visibility for any purposes other than page scrolling, I’d love to hear about it in the comments below!
