Google Tag Manager now tracks any click

Want to track almost any website visitor behavior with almost no dependency on IT or development resources?

This month’s Google Analytics Certified Partner Summit launched another exciting new feature: Google Tag Manager Auto Event Tracking. This feature allows websites to fire a Google Analytics tag (or really any tag) based on just a user’s click anywhere on the page! Literally anywhere already identified in the HTML, be it an exit link, file download, mailto link, or form.

Some of the initial documentation is a little light — especially on how to track clicks on other elements such as images and buttons — so as Google Tag Manager Certified Partners and GA Premium Authorized Resellers we wanted to clarify how to use GTM to track almost anything on a page with little to no customized code. As Justin Cutroni puts it, “Bye Bye JavaScript.”

When you want Google Analytics or other tracking of a link or form, you typically have to tap technical resources to insert JavaScript within an onclick event and hard code it within every element you want to track. Doable, but a real pain, especially for the kind of enterprises that use GA Premium. We thoroughly audit analytics implementations to ensure such clicks are being tracked, and there are often errors. Here are the essentials of auto-tracking events:

Step 1: Analytics Tracking Code

It goes without saying you need to already have Google Analytics (or Webtrends or Mixpanel or other) base tracking code on the page. You can do this with or without GTM, but we typically recommend it.

But with only base tracking code, a site cannot track what GTM now easily can: each click on the “Search” button below, an image that submits a zip code but gives no unique confirmation page.

google tag manager auto event form

How? In the pre-existing code for this button, you can see that “id” is set to “imgSearchBtn”:

google tag manager auto event code

That built-in code enables the next steps in tracking all of these conversions — really clicks on any element using that id — via GTM:

Step 2: Event Listeners

These are new types of Tags that, as the name implies, “listen” for any click or form submissions. There are four types of Listeners: Click (which we’ll demo below), Form, Link and Timer. The Click Listener is kind of a catch-all and will capture clicks on images, buttons, links…pretty much any element on a page. We could use a Form Listener but for this example we’ll use a Click Listener.

In the past we’ve used third-party plug-ins to achieve this; now GTM can. There’s not much to it, simply add a new Tag. Select the type “Click Listener” and set up a Rule for enabling this Listener. In this example, we’ve chosen to use it on all pages.

google tag manager auto event listener

Step 3: Macros

These essentially allow you to pass in or evaluate various values from form elements. In this case we are just setting up a way for the Event Listener (actually the data layer) to “see” the actual values that are sent from each page element. So first you’ll create a new macro. Select “Auto-Event Variable” under “Macro Type”. Then choose “Element ID” under “Variable Type” and make sure that “Default Value” box is checked.

google tag manager auto event macro

Step 4: Rules

Next you need to create a new Rule and give it a name. From there you need to reference the Macro we created above and the all-important “imgSearchBtn” ID. Then add a new condition (using the “+” symbol) that references “{{event}} equals gtm.click” so the listener can evaluate if a click occurs on the page.

google tag manager auto event rule

Step 5: GTM Tag

All of the above steps apply regardless of what analytics software you use. Now we’ll need to create a tag specific to each tool. We’ve used a Google Analytics Event tag which requires a Category and Action and allows an optional Label and Value. Of course you need your site’s Property ID, starting with “UA,” not our UA-111-1 example.

From there you can insert whatever static or dynamic Parameters clearly and intuitively describe the Event to be reported in GA. We’ve included the Macro created above in the Label slot, so that the ID is passed to GA. Estimating the value of conversions is also a best practice. Remember that you don’t need to send the page URL as one of these parameters, GA tracks it automatically.

google tag manager auto event tag

Finally, Publish the GTM Container. When you test the user action, with a tool like GA Debug or real-time reports you can see the click show up as an Event with the chosen parameters.

google tag manager auto event debug

Happy tracking!

Contact us to implement tag management so you can keep your website tracking updated without getting in line for your tech team.

Or Audit your web analytics implementation to identify website actions and conversions that can now be tracked.

Or sit back and watch GTM in action in our “Google Analytics on Steroids” webinar:

Did this interest you? Reach out to learn
how we can help you.

Contact Us

When you reach out to Empirical Path, you get in touch directly with our fully qualified and experienced consultants.   Whether you need an analytics audit, training, support, or a custom quote on Google Analytics 360 licensing, let’s talk today.