Google Tag Manager Click-Listener Element URL How-To!

Here is the problem:
  • We have 160 different pages in our website with buttons like the ones below.
Apply Online and Request Information

Apply Online and Request Information

  • I want an event to fire each and every time that those are clicked.
  • I also want to know on which of the pages each are clicked. In other words, I want to know the pages which produced the most clicks to Request Information or to Apply Now.
  The Wrong Way: The wrong way would be to edit each of the 160 pages and fire an on-click event on each button. Let's see, that is 160 pages times two buttons each. That makes 320 additions of on-clicks. The Right Way!
  • That's a little further down the page. First look at my end results.
The results in Data:
Event Actions & Labels

Event Actions & Labels

So in one simple report, I can see all of the page locations which produce the most Apply Clicks and which ones produce the most Request Info Clicks. Wonderful!  

So how do we do it?

Here is the simple process.

Step 1: Create a tag to listen for all link clicks.

Listen for Clicks with Google Tag Manager

Listen for Clicks with Google Tag Manager

 

Step 2: Create your rules to fire the tags on those specific links.

  1. Setup this tag to fire on any link clicks PLUS when the element URL matches your conditions. For me the condition was that the url would contain 'request-info'.
    Create a rule for requesting info

    Create a rule for requesting info

  2. Make sure to 'copy this tag'. That makes it a bit easier on yourself.
    Copy This Tag!

    Copy This Tag!

  3. Make your next rule that targets the apply button with this copied rule.
    Rule for Apply Now Link Clicks!

    Rule for Apply Now Link Clicks!

Step 3: Now comes the magic. Setup your Analytic s Event tag.

  1. Setup this tag to fire on any link clicks PLUS when the element URL matches your conditions. For me the condition was that the url would contain 'request-info'.
    Request Info Auto Link Event Tag

    Request Info Auto Link Event Tag

  2. Copy the tag!
    Copy This Tag!

    Copy This Tag!

  3. Now Edit the tag that you just copied to look like this.
    Auto-Event Tag for Apply Now Links

    Auto-Event Tag for Apply Now Links

Step 4: Create your rules to fire the tags on those specific links.

  1. Create a version of this container and publish it.
  2. Don't forget to preview and debug it using the Google Tag Assistant for Chrome. It will save you from pulling your hair out and wasting lots of time.

Step 5: Sit back, enjoy your results and think of how you can optimize those pages.

   


2 comments

Mark » 24 Oct 2013 » Reply

Nice and simple tutorial, Neil. Thanks!

We have a link in our nav bar we want to track to see if people are using it as well as on what pages may spark users to click that link. We also link to that page in various articles across the site.

How can we differentiate users clicking on the navbar link vs clicking a link found in some content that go to the same page?

    Neil Moree » 24 Oct 2013 » Reply

    Ahh right. The solution is to make your rule fire based on the Element ID ‘id’ of that link rather than on the Element URL. Make sense?
    From analytics help…
    “The value is determined by reading the ‘gtm.elementId’ key from the data layer. If populated by an Auto-Event, the result will be the ‘id’ attribute of the DOM element that triggered the event.”

    Try it out!

Have your say!

Have your say!

name *

email *

message

Protected by WP Anti Spam