Google Tag Manager: Image Click Tracking

 

I recently ran into a scenario where I wanted to use Google Tag Manager and Google Analytics to monitor image link clicks. If an image link was clicked, I wanted to pass it into Google Analytics as an event.

There were a few things I wanted to know

  1. The page the click happened on
  2. The image URL that received the click
  3. The post-click redirect URL

That sounds great, right? But what will you actually do with it? We need to make sure that we are always solving for a business use case, not just bloating our Analytics tool with a bunch of junk.

Example Business Use Cases For This Tracking

Use Case #1: Leaky conversion funnel 

Our completion rate (micro conversion) from our checkout.php to our receipt.php is poor. We notice that we have a leak on our checkout.php page where we allow users to click credibility badges. Now that we are tracking this event we can create a segment for users who click an image link on checkout.php vs those who don’t and get insight into if this is actually the cause of our reduced performance. If it’s significant, the data may support an experiment to change the way we show credibility indicators.

Use Case #2: Image split testing

Perhaps you have an A/B test you want to run where each variation receives a different image. This would allow you to monitor their click performance.

Tracking Implementation Setup

Step 1) Setup our image link click trigger

Here we are setting up the trigger that says “on clicks where the HTML element has a CSS selector of img”.

google-tag-manager-image-click-tracking

Step 2) Setup the image source URL capture variable

Next we need to setup a user defined variable to tell Google Tag Manager what to capture when the img link click is triggered. Here we are saying we want to track the DOM Element with a selection method of CSS Selector. The element we want to select is the img, and the attribute of that img selector we want to capture is the src.

I know this can be a little confusing, but this is terminology you should familiarize yourself with as it’s extremely powerful.

screen-shot-2016-09-18-at-3-26-34-am

 

Step 3) Setup our tag

Alright, we’ve got our trigger setup as well as the variable of data we want to pass to Google Analytics.  Now we need to setup our Google Tag Manager tag. In this case I have the following setup:

Event Category: Image Link Clicks

Event Action: The url the person will be taken to after the click

Event Label: The url of the image that was clicked

Step 4) Testing

Ah, the most important step! Now we need to validate that our implementation works…

 

austin

Passionate about growth, analytics, and E-commerce. Life is about pushing the envelope.