Dynamic Link Tracking with Google Tag Manager

It is relatively easy to track clicks on static links. However, when the links are dynamically generated by the CMS it is not that easy. We discuss ways to determine which link was clicked using the data layer functionality of GTM.

dynamic link tracking

Let’s say you want to track which posts below have been clicked. When a user clicks on “Read More” for a particular post, you want to send the title of the post to Google Analytics. The trouble is that all of these posts are dynamically generated by the CMS and there is no way to know ahead of time what the title of the article is. This is a situation where we would use the “Data Layer” feature of Google Tag Manager.

read more highlighted on a web page

Here’s how it works:

dynamic link tracking process path

When the “Read More” link is clicked, the title value is pushed into a javascript variable and pushed into the data layer. This information is then picked by Google Tag Manager, which then pushes this variable value to Google Analytics.

So, the setup steps are:

  • Setup Data Layer on your site and push data to it
  • Create a variable in Google Tag Manager
  • Setup the tag and trigger in GTM to pass this Data Layer information to GA

Setup the Data Layer and push data to it

Add the javascript below to your site:

dataLayer = [];

To track the link click, there are a couple of approaches:

We can programmatically render the links such that the Onclick event does a datalayer push along with the title that is also programmatically generated by the CMS.

'insightCategory': 'Insight Link Click',
'insightTitle': 'Building websites with a Headless CMS and Modern Javascript Frameworks',
'insightLink': 'https://healthcare.exemplifi.io/insights/building-websites-with-a-headless-cms-and-modern-javascript-frameworks/'
});">Book details

A more dynamic approach that doesn’t need CMS development would be to be use a javascript function that gets a handle on the relevant div class, grabs the anchor link and title when the OnClick event is triggered. A sample JQuery implementation would look like this:

$('.post__title a').click(function(){
var Ilink = $(this).attr('href'); //Getting link from click
var title = $(this).text(); //Getting title from click

//pushing value to data layer
'insightCategory': 'Insights',
'insightTitle': title,
'insightLink': Ilink

Create a variable in Google Tag Manager

  • Click Variables
  • Under User-Defined Variables, click New
  • Click Variable Configuration and select Data Layer Variable as the variable type
  • In the Data Layer variable name field, Enter Data Layer which you added in setup
variable tag in GTM

Setup tag and trigger to send Data Layer information to Google Analytics

Setting up tag and trigger is the same as usual. The only difference is that we pass the Data Layer variable in the Event value and send them to Google Analytics events.

The tag setup is below:

insight tag in GTM

The trigger setup is below:

trigger setup in GTM

Test your Setup

Now that the setup is done, it is time to test it. Start off by putting your GTM in a preview mode:

testing GTM tags

As soon as you do this, a pane opens up on the relevant webpage that shows the status of all the tags:

tag testing in GTM

The Insight Tag (which is the relevant tag for us) shows up as “Not fired on the Page”. At this point, click on the relevant link and now you will see that the Insight Tag has fired:

tags firing in GTM

If you click on the tag, you can also see the data layer is populated with the relevant information

data layer snippet in GTM

And finally, if you hop over to Google Analytics and check the events section, you will see that the information has been passed over here as well:

google analytics dashboard

In this post, we discussed how to track link clicks when the links are generated dynamically. If you’d like to learn more about the basics of using Google Tag Manager on your site, you can go here.

No items found.

Related Insights

Testing Google Tag Manager on your site

We illustrate how to connect your site with Google Tag Manager and more importantly, ways to test that the tags are firing correctly.

Vinod Pabba


Subscribe to our newsletter