At UpBuild we use jQuery for our custom Google Tag Manager (GTM) event tracking, identifying and tagging unique elements that users interact with on a website by writing selector-based jQuery code. We’re always looking for new efficiencies and Google Chrome Extensions are always welcome in our analytics arsenal.
For clean analytics tracking, ‘unique’ is going to be the key word here. Oftentimes engagement points across a site can reasonably use the same CSS formatting. This may lead to issues with selecting a non-unique selector, muddying up data by tracking multiple button clicks when only one is actually clicked.
With a bit of know-how, you can play around in the Developers’ Console with a quick right-click > Inspect on any part of your site to identify these unique selectors.
That view, however, can be a bit intimidating to someone who’s a little wary of code, so I’m going to show you a simple, efficient way to track interactions on your website that anyone can do with the help of the jQuery Unique Selector.
Let’s use the UpBuild main navigation as our example:
Step #1: Create a new GTM Tag
Hop on over to Google Tag Manager and create a new Tag for handling our KPI Events.
For our example and in order to be a scalable tag, we want these elements to be dynamically generated based on which main navigation element is clicked on, so we’ve created custom dynamic variables as follows:
Tag Type: Universal Analytics
Track Type: Event
Category: {{dl – Event Category}}
Action: {{dl – Event Action}}
Label: {{dl – Event Label}}
Step #2: Download the jQuery Unique Selector Chrome Extension
In order to create our Trigger, we get to try out the jQuery Unique Selector Extension. Once it’s added to Chrome, simply enable the Extension, hover over the area of your site you want to track interactions with, and click. The jQuery Unique Selector will do the work for you.
For our example, we’ll grab UpBuild’s main navigation CSS selector “ul#menu-main-menu” and save that for our GTM Tag.
Step #3: Create a new GTM Tag for KPI Events
Hop back into your new GTM tag and let’s create our Custom HTML Tag. We’ll paste our unique CSS selector right into our jQuery in two places in order to track clicks on the main navigation and in order dynamically pull in the click text for our Event Label:
See the Pen Laura Blog Post – jQuery Unique Selector by UpBuild (@upbuild) on CodePen.
Step #4: Preview & Test
All together here’s what our finished GTM Tag will look like:
It’s time for us to hop into GTM Preview Mode to ensure everything’s going to be tracked properly once we publish our container. Hold command (Mac)/control (Windows) down as you click your tracked element to open in a new tab, and here’s our successful event tracking:
