
How to Track Banner Impressions Using Google Tag Manager and Universal Analytics
Say you want to track banner impressions or views of a piece of sponsored / featured content on your awesome blog. It doesn’t matter what the piece of content is as long as its distinctly identifiable by an id or class. We want to measure impression as an event in universal analytics as soon as the page loads.
Doing this with Google Tag Manager is pretty straightforward here is what we need. Assuming this is the sponsored content we have:
<div id="sponsored-content" data-sp-content="paypal" data-sp-location="sidebar"> <h1>Never Miss a Transaction!</h1> <p> 100% accuracy of paypal transactions in google analytics <a href="https://marketlytics.com/always-measuring/">Beta Signups Open</a> </p> </div>
I want to see whenever this code block is displayed on a page. The easiest way to do so is look for the block whenever a page is loaded. We can do this by including this code with the google analytics pageview tracking code already being triggered.
ps. The paypal tracking thing is completely real and awesome if your sites uses paypal check it out here.
Detecting Banner: To do this create a new js custom JavaScript variable. Name it “detect sponsored content” Include the following code:
function(){ return function(){ // Check if the page contains the div var node = document.getElementById("sponsored-content"); // use whatever id your block has isInBody = document.body.contains(node); // If true if (isInBody){ dataLayer.push({'event':'spContent-detected'}); } } }
Now add this to your Universal Analytics Pageview tag. Field to Set hitCallback set value to {{detect sponsored content}}.
Now whenever the pageview tag loads and detects the sponsored content it will fire an event. What we want to do is use the GTM event to trigger an event in GA.
We will extract the details about the content name / location etc and pass it to google analytics. Here is where our weird sounding data-sp-content and data-sp-location come in handy. We need two more custom js variables to do this.
Macro 1: Name the macro “detect sponsored name”
function(){ var contentId = document.getElementById("sponsored-content"); // id of our sponsored block var contentName = contentId.getAttribute("data-sp-content"); //custom attribute name return contentName; }
Macro 2: Name the macro “detect sponsored location”
function(){ var contentId = document.getElementById("sponsored-content"); // id of our sponsored block var contentLocation = contentId.getAttribute("data-sp-location"); //custom attribute name return contentLocation; }
Setup another Tag in GTM Universal Analytics – Event – Sponsored Content Now we want to dynamically populate data about which piece of content it was into the event.
Event Category: Sponsored Impression Event Action: {{detect sponsored name}} Event Label: {{detect sponsored location}}
Opt Interaction: True (we dont want this affecting bounce rate).
Set the trigger for tag to {{event}} equals spContent-detected
Now using this we can fire events whenever we want to track impressions of a piece of content. Remember the piece of content can be anything your hello bar, side bar white paper, some plug within your content (like my paypal example) or various offers in a long sales page.
Some stray observations
We can use the same method to trigger an enhanced ecommerce promotion impression as well.
Another alternate way maybe to fire a custom metric + custom dimension combo at the page level.
Lastly, a good way to make banner impressions tracking a bit more accurate could be to fire them when they actually come in view. There is a cool jquery library that can help with that.
Let me know how you end up using this.
ps. This post is inspired by a question on G+ Google Analytics community
Comments
-
-
Hussain
Hi Maggie
The code in the article is correct. There is an issue with GTM\’s debug and preview mode where the dataLayer push doesnt work when called in hitCallback while in debug mode. Try this is Quick Preview mode and let me know if you face the same issue.I also hit my head a couple of times with debug mode not working in this post https://marketlytics.com/tag-manager-send-data-to-multiple-analytics-accounts/
thanks for reading
-
-
Matteo
Hi Hussain, and thanks for your great post, i found it very interesting. I would like to ask you a question: what if i need to track different banner that i need to change weekly? Should i change the code in UA to get detailed information for each banner?Thanks in advance
-
Hussain
Hi Matteo
Glad you found it useful within gtm you dont need to change anything but for the banner html you will need to update value of attribute data-sp-content
so
data-sp-content=\”Whatever is relevant to banner\”-
Matteo
Perfect, thanks.
-
-
-
buttubas
Hey Hussain, what do you mean by \”Name the macro detect sponsored location\”? It got me a bit confused seeing how js doesn\’t have macros (unless you use extensions), and the name had space in between. Hopefully getting these answers is all I need to get this to work 🙂
-
Hussain
Hey there, this implementation is specific to google tag manager which is tag management solution that allows for centrally managing marketing tags. Macros and spaces in names are all features of that tool.
-
buttubas
Thanks for the fast reply 🙂
-
buttubas
Looks like Macros are called \”variables\” now in gtm. Figured you d like to know.
-
-
Maggie
Hi Hussain,
Thanks for the interesting blog post! Unfortunately this setup doesn\’t work for me. I\’m using GTM V2 and the only way to get the banner impression recorded is with this JS macro when equals true:
function(){
var element = document.getElementById(\’my-banner-id\’);
if (typeof(element) != \’undefined\’ && element != null)
{
return true;
}
}
I\’m using Data Layer variables to capture the custom data attributes and they work perfectly on click, but not on impression – any idea why?