So you’ve got this awesome new offer going on and you’ve made a super cool banner to show it off on your website. But how would you know if your banner is effective or not? Say you want to track how many times the banner was actually viewed on a page independent of the page load. For that, you might want to look into tracking Banner Impressions.
We did another blog some time back that detailed a different approach to tracking banner impressions, though it got the job done, it involved a bit more code and configurations. With the recent developments in Google Tag Manager and the availability of new triggers and variables, the process has become much easier. Let’s jump in and see how this works.
With the Google Tag Manager Element Visibility Trigger, the set up just got a whole lot simpler.
Gone are the days when you needed to add code and intricate pageview configurations in order to track Banner interactions.
Now, with just a few clicks you can have Banner Impression up and running in no time.\
Let’s jump in.
Carrying over our sponsored content example.
I want to see whenever this code block is displayed on a page.
Let’s head on over to Google Tag Manager and select Triggers
Found it?
In the triggers, section click New and select the Element Visibility trigger.
Okay. Once you’ve done that, just name your trigger something like “Sponsored Content Banner”.
Following? Great! Now let’s dive into a little more detail. Here are the configurations available to you with GTM’s element visibility Trigger
Selection Method: The attribute of the DOM element you want to track. You can either track this on element id if that is available or use any other CSS selector with the CSS Selector option.
We’ll go with the ID option for our example.
Go ahead and enter the ID of your Banner element here:
When to fire this Trigger
-
Once per page
-
Once per element
-
Every time an element appears on the screen
We’ll use the Once per page option, as the event needs to be triggered once the banner is visible on a page for the first time only.
Advanced Configurations
Minimum Percent Visible: With this option, you can specify what percentage of the banner must be visible for the trigger to fire.
Let’s set the default to 50%
Set minimum on-screen duration: If you’d like your trigger to fire after the banner has been on screen for the minimum duration, select this option.
For our example, we’ll leave this as it is.
Observe DOM changes: With this option, you can track the matching element, mentioned with the selection method option as is appears in the DOM which results in a change in DOM
Select All Visibility Events
Use GTM Auto event variable to capture content name and content location
The Auto Event Variable is a quick way to track a variety of content types available with an element. Since we are interested in “data-sp-content” and “data-sp-location”, which are banner element attributes, we create two auto-event variables to reference these.
Select Element Attribute and type in the attribute name you want to capture with this variable.
Variable 1 Content Name
Variable 2 Content Location
Set up Your Banner Impression Tag
Event Category: Sponsored Impression Event Action: {{Content Name}} Event Label: {{Content Location}}
Non-Interaction Hit: True (we don’t want this affecting bounce rate).
And we’re done! Now you can use this setup to track true banner impressions when the banner is actually viewed on a page, instead of just a page load.
P.s If you want to take this a step further, you can also track clicks on the banner or on the links on your banner with default Google Tag Manager triggers for Clicks.
