- March 13, 2018
- January 28, 2016
Recently, my client added a pop-up to their site to push promotions online. Naturally, I wanted to jump into Google Tag Manager and add event tracking to see (1) which links are being clicked, (2) how often those links are clicked, (3) which should be replaced, and (4) if there is any interaction with the pop-up at all. However, I quickly faced an issue that many of you may have encountered as well: There were no unique element variables to track.
The pop-up shows up once per user in a 30-day period and looks something like this:
As a huge data nerd who is newer to the field, I have an intense love-hate relationship with Google Tag Manager (GTM). GTM can track nearly any user interaction on a site. It acts as a static container for individual tags that can monitor which elements are being clicked, how long a user watches a video, where a user engages with the site, etc.
Although GTM might seem like a magical, all-encompassing tool that spools out endless data on online behavior, it is not immaculate. GTM is like the complicated, nit-picky girlfriend that constantly causes you angst, but you know you can’t be your best (analyst) without her.
Despite all this, the GTM interface has an intuitive layout that makes it possible even for beginners to test combinations of variables, triggers, and tags to track complicated interactions. This post explains a roundabout method to record clicks for difficult-to-track elements, including an example of how to track clicks on a pop-up without a unique ID. Even those new to GTM will be able to follow along.
Typically, the first step to set up event tracking is identifying an element’s variables. These variables can be the element’s ID, class, text (like the example shown below), or even a custom element, as long as it’s recognizable by GTM.
I encountered an issue with this first step when inspecting the pop-up in the Document Object Model (DOM). I couldn’t find a unique variable in the code that GTM could identify. I combined a variety of classes, click URLs, text, click IDs—you name it! After modifying and testing 30 versions, the following method was the solution.
Since we cannot identify a unique click variable, we are going to use UTM parameters to trigger pageview events, then 301 redirect users to the same page without parameters to ensure a seamless user experience.
NOTE: If the site you are planning to implement this on is also running a Paid Ad campaign, you SHOULD NOT USE Google’s URL Builder. The tracking parameters of the redirect pages will knock off any tracking parameters that you already have in place, which can risk losing valuable PPC user data. Instead, you should create your own custom, unique URLs. Be sure to structure them with unique elements so you can easily identify them and to ensure there’s no overlapping in analytics.
Using UTM parameters to trigger pageview events in GTM
If you already know how to add UTM parameters to create custom URLs, skip to Step 3.
- Create custom parameters using Google’s URL builder. This tool appends parameters to a URL to track user activity through the site. You don’t have to use this tool to create parameters, but it simplifies the process. URL builder prompts you to fill out a source, medium, and campaign name. Structure these consistently, with unique elements for each URL you track.
2. After you set up parameters for each link, create 301 redirects from the URL with parameters to the same parameter-free version of the URL. There is no technical or tracking reason to add the 301 redirects, but it keeps the behind-the-scenes tracking work out of sight for visitors.
3. Create your pop-up (or whichever item you plan to track with URL parameters). In the pop-up, use hyperlinks that include the URL parameters you created.
4. Create a new Page View trigger in GTM that fires on Some Page Views. Set the trigger to fire when the Page URL contains the URL with parameters.
5. Next, create the tag to fire this trigger. Name the tag to match the trigger and set it up track through Google Analytics (GA).Enter in the Tracking ID for your GA account (found in GA under Admin > Property > Property Settings) and set up the track type as Event. Setting it up as an Event instead of a Page View will pull all of the data tracked by this tag into GA’s Events section..
Once you have the tag set up as an event, configure it to fire only on Some Pages. Select the unique trigger you created for this specific tag.
6. Enter Preview Mode in GTM by clicking the drop-down arrow next to Publish in the top right-hand corner of the screen.
7. Repeat steps 4–7 for each link within the pop-up you plan to track. After you have gotten the tag to fire for every link, publish the updated GTM container to the site.
Technically speaking, it is possible to set up variables to trigger instead of links by using DOM Elements or CSS Selectors and Custom Events. However, I found this to be the easiest, quickest method for a beginner- to intermediate-level GTM user to track link clicks without unique identifiers. And although it may not be the cleanest solution, it provides the data I need to make educated decisions about the benefits of pushing promotions online.
Google Tag Manager is a free tool with many online resources. However, be cautious when setting up event tracking—it’s easy to believe you are tracking one thing when GTM is actually tracking something else (while still firing the tag). Our SEO analysts are trained to set up and implement tracking through these tools. Contact us today to learn more about the SEO services we offer.