Background
In order to determine how much use the “Audience Menu” on the homepage of the Mason core website receives, we wanted to specifically track clicks on links within the audience menu ‘flyout’ boxes.
Unfortunately, most of the links contained within the audience menu are also available elsewhere on the homepage. This means that, without implementing an additional tracking mechanism, it is impossible to differentiate which particular link the user clicked: whether it was a link on the audience menu or an identical link elsewhere on the homepage.
One Possible (But Problematic) Solution
One simple-to-implement method for tracking identical links separately is to modify one or both links to include a URL parameter indicating which link was clicked. For example, given two links to an identical URL on the homepage, you could do something like this:
Link 1: www2.gmu.edu/admissions-aid/apply-now
Link 2: www2.gmu.edu/admissions-aid/apply-now?linkSource=audienceMenu
This method would serve to disambiguate which link was used, but it has some downsides:
- it would have to be manually added for each link in the audience menu;
- it would create an extra, easy-to-forget step every time a new link was added; and
- it would split the page views of the page in question into two line-items, since the URLs are different.
So a simple solution, but one that creates additional maintenance and reporting issues.
That being said, I have used this method in limited contexts when appropriate.
A Better Solution
The Concept
There is a better way to do this, that avoids the problems of the above approach: you could add a mechanism in Google Tag Manager to listen for clicks on the specific links in question, and send a Google Analytics event when such a link is clicked.
This is similar to what we do to track external links: when a user clicks a link, GTM checks to see whether the link is for an internal or external URL. If the link is for an external URL, GTM sends an ‘outbound link’ click event to GA.
In this case, we’re not concerned with whether the link points to an internal or external URL, but where the link is located on the page: is it within the audience menu?
The Method
In GTM, there are many ways that you can specify page elements to act upon. One particularly powerful way is by using a CSS selector to identify the elements in question. Let’s inspect a representative element in Chrome’s inspector to determine a CSS selector that will work.
After doing some digging, we can see that links within the audience menu can be identified with the following CSS selector: div.audience-menu ul.wrapper li div.flyout a (all link elements within a flyout of the audience menu).
The Implementation
To set-this up in GTM, we’ll only need two things:
- a trigger which will fire when an audience menu link is clicked, and
- a tag which will send an event hit when the trigger fires.
The Link Click Trigger
Let’s take a a look at the trigger:
Note that we set-up a trigger to listen for clicks on links. This trigger does a few things, but the key part is in the firing conditions section. This is where we indicate that this trigger should only fire for links which are matched by the CSS selector we specified above.
The GA Event Tag
Now, the tag:
Nothing unusual here. This tag is set to send a GA event when the above trigger fires. Notice that we use the “Click URL” and “Click Text” built-in variables to set the event data sent to GA.
In Conclusion
Using CSS selectors in your triggers gives you a very straightforward yet flexible way of performing actions in GTM on one or more specifically defined elements.