Google Tag Manager: How to Implement Custom HTML Tags on Click Listeners


For all it's wonder and glory, there's one thing missing from the Google Tag Manager product.

Detailed Q&A forums!

We utilize Google Tag Manager (GTM) for the majority of our clients; it reduces the number of IT requests put in to engineering, helps us securely manage marketing tags across the entirety of our clients' websites, and ensures that we don't slow down our client's website with too many marketing tags.

But for the life of us, we cannot figure out why there isn't more troubleshooting assistance from Google (Google Product forums and elsewhere) available to loyal users of this product like ourselves.

That being said, we've decided to create Google Tag Manager University -- any time we run into a problem and find a solution to a GTM issue we'll blog about it on our site.

Today's issue revolves around ...

How to Implement a 3rd Party HTML Tag on to a Click Listener

For starters, let's define a click listener:

  • Part of the event listener library of functions within Google Tag Manager, an event listener allows marketers to tag website actions without bothering engineering
  • A click listener specifically allows marketers to track clicks (buttons, links, etc) on a single page

Now, the issue with implementing a custom HTML tag on a click listener is that it's actually a three step process that isn't entirely clear until you've gone through it a few times.

Those steps are:

  1. Create a click listener with properly formatted firing rules
  2. Create a custom HTML tag tag and drop in your 3rd party HTML or image source code
  3. Create a tag version and publish it live to the web

How to create a click listener in GTM

Let's visually walk through the steps to creating a click listener in Google Tag Manager.

Step 1: After logging in to your Google Tag Manager account, click the icon that reads 'create' and select 'tag'.

google tag manager create tag

Step 2: Name your click listener

Give your click listener a name that will help remind everybody what you are measuring. It's better to be too specific than not specific enough!

Step 3: Select the tag type

There will be an empty menu for a drop down labeled 'Tag Type'. Click on that drop down menu and scroll down to Event Listener >> Click Listener.

event listener google tag manager

Step 4: Create a firing rule</h3>

A firing rule tells this tag when to activate itself -- how should it know to record an activity on your website without a firing rule?

Hover to the top right part of your new tag screen and click on 'add rule'.

This will pop up a check box that allows you to select from existing rules or to create a new firing rule. For this example, we'll create a new rule to fire the tag when somebody reaches 'http://xyz.com', our clients website.

create new firing rule google tag manager

One thing to note: you might want to uncheck the box that reads 'check validation' but leave 'wait for tags' checked.

Then, you simply need to hit 'save' to save that tag you just created.

Voila! You have created a click listener tag!

save google tag manager tag

How to create and implement a custom HTML tag to fire 3rd party code snippets

Step 1: Create a new click tag

At your account's home screen, navigate to the red 'new' button and click on 'tag'. This will get you started to create that custom HTML tag you'll need to properly fire your 3rd party code.

Step 2: Create a custom HTML tag

After you get to the 'new tag' screen, you'll want to name your custom HTML tag. Following that process, click on the 'tag type' drop down and select 'custom HTML tag'.

create custom HTML tag

Step 3: Drop in 3rd party code snippet

Now it's time to drop in your 3rd party code. Remember, if it's a Javascript snippet you'll want to add script open and close elements appropriately.

google tag manager third party code snippet

Step 4: Add the correct firing rule to the custom HTML tag

This is perhaps one of the most important steps; you need to add the following firing two conditions as a firing rule to get your tag to work.

Those conditions are:


{{event}} equals gtm.linkClick
{{element url}} contains ""
</code>
</pre>


This rule tells your tag to fire every time someone clicks on a link whose href contains the string of your link destination.

In our case, that would be "EXAMPLE: USE URL OF YOUR OWN WEBPAGE", although you all know that it should be a properly formatted URL such as 'http://xyz.com'

Google Tag Manager Firing Rule gtm.linkClick

Last steps to implement this rule

Last but not least, you'll need to do create a new version of all these tags.

At the home screen, click on 'create a new version':

google tag manager create container version

Now, you'll need to publish your container so that tag and it's attached rules actually go live on the web.

publish google tag manager container

There you have it!

Using a de-bugging tool like Google Tag Assistant (Chrome browser extension) or Ghostery (Chrome/Firefox browser extension), you should be able to navigate through your site, click on the link you just created a rule for and watch the click listener and 3rd party code snippet fire.

For those who are more inclined to watching this via video, I've actually gone through and recorded myself doing these tasks in the video below.

Share any questions, comments or concerns in our comments sections below!

Back to blog