Tracking Banner Impressions with Element Visibility

Tracking Banner Impressions with Element Visibility

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

image4.png

Found it?


In the triggers, section click New and select the Element Visibility trigger.

image3.png

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:

image7.png

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

image8.png

Use GTM Auto event variable to capture content name and content location

image1.png

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

image5.png

Variable 2 Content Location

image2.png

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).

image6.png

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.

Taha Zaheer

Analytics Lead at MarketLytics. Forging a career in Data Analytics. Likes to read up on History and Psychology, Avid Football fan and a Manchester United Supporter.