Using Element Visibility Trigger In Google Tag Manager

The element visibility trigger is a new addition to Google Tag Manager (GTM).

The word ‘element’ in ‘element visibility trigger’ refers to an HTML element.

This element could be <head> tag, <body> tag, <h1>, <p> tag etc.

The word ‘visibility’ in ‘element visibility trigger’ refers to the visibility of an HTML element(s) in a web browser’s viewport.

The word ‘trigger’ in ‘element visibility trigger’ refers to the GTM trigger which is fired when an HTML element(s) become visible in a viewport.

In order to use the element visibility trigger, you would first need to understand the viewport.

Introduction to Viewport

Viewport is the area of a web page which is visible to a user in a web browser:

This visible area does not include:

  • browser menu bar
  • browser tab(s)
  • browser address bar
  • browser toolbar(s)
  • windows taskbar at the bottom
  • horizontal or vertical scrollbar
  • any pop-up /window/dialog box which may hover, over the top of a web page.

The size of a view port is calculated as:

Viewport Width X Viewport Height

and is measured in pixels.

Viewport size can vary for same web browser on same device

My viewport size on Chrome web browser (on a desktop computer) with one toolbar at the top is: 1536 × 735

If I remove the toolbar, my viewport height will increase and the new viewport size on my Chrome browser would be: 1536 × 760

If I go fullscreen, my viewport height will increase further and the new viewport size on my Chrome browser would be: 1536 × 864

This is the maximum viewport size I can get on Google Chrome for the screen size I have got.

My viewport size on Chrome web browser with one toolbar at the top is: 1536 × 735

If I open the Google developer console, the console window appear at the bottom which hides part of my web page and thus reduces my viewport size….from 1536 * 735 to 1519 × 282

A user who has got 3 toolbars installed at the top of his chrome browser window will get less viewport than the user who has got no toolbar installed at the top of his Chrome browser window.

Thus viewport size can vary for same web browser on same device depending upon how it is setup and how it is being used.

Get the E-Book (62 Pages)

Viewport size can vary across web browsers on same device

If I change my web browser to say Firefox while continue to use my desktop computer, my viewport size with one toolbar at the top would be: 1536 × 687 which is different from my viewport size of 1536 × 735 on Chrome web browser with one toolbar at the top

Thus on Firefox I get less viewport.

Viewport size varies across screen resolutions

Different screen resolutions tend to have different viewport size.

For example, my viewport size on Chrome web browser (on a desktop computer with screen resolution of 1920 * 1080) with one toolbar at the top is: 1536 × 735

But when I change the screen resolution to say 1600 * 900, my viewport size on Chrome web browser with one toolbar at the top reduces to: 1280 × 591

Viewport size can vary for same device with different screen sizes

A device can come with different screen sizes.

For example, laptops come with different screen sizes.

Similarly, mobile phones and tablets come with different screen sizes.

Different screen sizes tend to have different viewport size.

So Viewport size can vary for same device with different screen sizes

Viewport size varies across devices

This is a no brainer.

A viewport will be smaller on a tablet than on a desktop device.

Similarly, a viewport will be smaller on a mobile than on a tablet device.

You can use this tool to determine your current viewport size: http://viewportsizes.com/mine/

Viewport meta tag

Through viewport meta tag, you can control how a web page should be displayed on different screen sizes.

The viewport tag controls the web page’s width and scaling on different screen sizes.

For example:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

What is Visibility?

A web page is made up of HTML elements. However these elements are not visible to a user (unless he checks the source code).

So when a web page appears in a viewport, its corresponding HTML elements also appear/enter the viewport.

An HTML element can appear in a viewport and can also disappear from a viewport.

When the HTML element appears in a viewport it is called visible and event of the element becoming visible is called ‘visibility’.

An HTML element can appear in a viewport when:

  • A page loads into a web browser window.
  • A user scroll up/down a web page.
  • A browser tab becomes active
  • A user’s action result in DOM change

An HTML element can disappear from a viewport when:

  • A page unloads in a browser window.
  • A user scroll up/down a web page.
  • There is a DOM change.
  • A browser tab becomes inactive
  • A user minimize/close the browser window.

Note: It is important to note that the element visibility trigger doesn’t work when an element disappear or becomes invisible from a viewport. As the name suggest, it is an element visibility trigger and not element invisibility trigger.

Finding elements on a web page

A web page is made up of HTML elements.

So when a web page appears in a viewport, its corresponding HTML elements also appear/enter the viewport.

However this happen in the background and you can not easily track with certainty which element became visible and when, through naked eyes and that too for every user of your website.

So you would first need to identify the elements whose visibility you want to track.

To do that, GTM provides following two selection methods while configuring an ‘element visibility’ trigger:

  1. ID
  2. CSS Selector

Use the ID selector, if you have got only one type of HTML element to find/track and that element has got the ‘ID’ attribute.

This selector uses document.getElementById to find the elements in a web page with the given ID.

For example:

Here the element visibility trigger will fire only when the first element with the ID ‘hello’ appears in the viewport.

Use the CSS selector, if you have got multiple HTML elements to track and/or the element you want to find does not have the ‘ID’ attribute.

For example,

Here the element visibility trigger will fire only when all of the following elements appear in a viewport:

  1. the element with class =intro
  2. <h1> element
  3. <p> element

You can also use CSS selector as a substitute for ID selector.

For example:

Here the element visibility trigger will fire only when the element with the ID ‘hello’ appears in the viewport.

So you can use a CSS selector as a substitute for ID selector

Introduction to Matched Elements

The HTML element(s) that matches a ID/CSS selector is called a matched element (or selected element).

For example consider the following HTML element:

<h1 id=”hello”>

This element matches the ID selector ‘hello’:

So h1 is a matched element.

And when this matched element becomes visible in a viewport the element visibility trigger should fire.

Not every element on a web page will/should match a ID/CSS selector.

So not every element is/should be a matched element.

And the element visibility trigger should fire when one or more matched elements becomes visible in a viewport.

‘When to fire this trigger’

You get the option ‘When to fire this trigger’ when you are setting up an ‘element visibility trigger’ in GTM:

#1 Once per page – Select this option if you want the element visibility trigger to fire only once on the current page when a matched element or one of the matched elements become visible in a viewport.

#2 Once per element – Select this option if you want the element visibility trigger to fire only once per matched element which becomes visible in a viewport.

Note: If multiple elements have the same ID attribute, only the first matched element will fire the trigger (unless it is subsequently removed by an observed DOM change).

#3 Every time an element appears on screen – Select this option if you want the element visibility trigger to fire every time a matched element becomes visible in a viewport.

Minimum Percent Visible

‘Minimum percent visible’ is the minimum area of a matched element(s) that must visible in a viewport before the element visibility trigger fires.

You set this option while setting up the the element visibility trigger:

The default value of ‘Minimum percent visible’ is 50% i.e. at least 50% of a matched element(s) must appear in a viewport before the element visibility trigger fires.

Let us suppose our matched elements on a web page are the covers of three books (banner ad for my books):

Now, if only 50% of these book covers appear in a viewport then it would look like the one below:

Here the percentage of the matched element which is visible would be 50%

If 80% of these book covers appear in a viewport then it would look like the one below:

Here the percentage of the matched element which is visible would be 80%

If 100% of these book covers appear in a viewport then it would look like the one below:

Here the percentage visible would be 100%

So if you are running a banner ad, you would want your website users to see 100% of your ad before the ad can be considered as viewed.

Consequently you set the ‘Minimum percent visible’ to 100:

If ‘Minimum percent visible’ is set to 100% then the element visibility trigger will fire only when the matched element(s) fully appears in a viewport i.e. it is fully viewed.

Minimum On-Screen duration

Minimum on-screen duration is the minimum amount of time (measured in milliseconds) for which a selected element(s) must remain visible in a viewport.

You set this option while setting up the the element visibility trigger:

Here, the minimum on-screen duration is set to 2000 milliseconds (or 2 seconds).

What that means is that the element visibility trigger will only fire when a selected element(s) remained visible in a viewport for at least 2 seconds.

When people scroll a web page (without actually reading contents), they see various elements of a web page for milliseconds.

So if you are tracking impressions of a banner ad on a web page, you want your users to spend at least a second or two viewing your ad.

So you can set the minimum on-screen duration to 2000 milliseconds (or 2 seconds).

Observe DOM changes

You set this option while setting up the the element visibility trigger:

Here you are telling GTM to fire the element visibility trigger only when there is some change in DOM.

A DOM changes whenever new element(s) are dynamically added to DOM or existing element(s) are dynamically removed from DOM.

For example, if a user see a thank you message on the page where he filled and submitted a form then that is considered as DOM change. That thank you message wasn’t there/visible when the user first saw the page but became visible only after the user submitted the form.

Similarly, if a user’s action results in a popup then that can be considered as DOM change.

Use Case for Element Visibility Trigger

Following is the banner ad of my books which you can find on all article pages of my blog:

Let us suppose, I want to track how many users view this full banner ad for at least 2 seconds.

To accomplish this task, follow the steps below:

Step-1: Navigate to one of the blog post page, say: https://www.optimizesmart.com/video-tracking-via-youtube-video-trigger-google-tag-manager/

Step-2: Scroll down the page unless you see the following banner ad:

Now I need to capture the element(s) which is the banner ad. I can do that by finding the CSS selector of this element.

Step-3: Install the chrome extension called ‘SelectorGadget‘ for finding the CSS selector of a page element.

Step-4: Click on the ‘SelectorGadget’ icon (at the top right hand side of the browser window) in order to turn on the extension:

Step-5: Now select the ‘banner ad’ and note down the corresponding CSS Selector, displayed in the ‘selectorGadget’ tool:

In my case the CSS selector is: .images

Step-6: Turn off the ‘SelectorGadget’ extension by clicking on its icon again (at the top right hand side of the browser window).

Step-7: Navigate to your GTM account and create a new tag of type ‘Universal Analytics’. Name it something like ‘Send Book Cover Visibility as event to GA‘:

Step-8: Create the tag with following configuration:

Step-9: Create a new trigger of type ‘Element Visibility’ with following configuration:

Step-10: Save the tag and then preview the container.

Step-11: Navigate to the page: https://www.optimizesmart.com/video-tracking-via-youtube-video-trigger-google-tag-manager/ and then scroll down the page, until you can see the book banner ad.

Step-12: Check for the ‘gtm.elementVisibility’ event under ‘Summary’ column in the GTM debug console window:

Step-13: Click on the  ‘gtm.elementVisibility’ event. You should now the see tag ‘Send Book Cover Visibility as event to GA‘ being displayed under the ‘Tags fired on this event’ section

We can now conclude that the tag which contains the element visibility trigger is firing.

Step-14: Navigate back to your GTM account and then click on the ‘Leave Preview Mode’ link.

Step-15: Publish your container.

Step-16: Navigate to your Google Analytics reporting view and then click on the ‘Top Events‘ link (under ‘Behavior‘ > ‘Events’) to see the data for the tracked events:

That’s how you can use element visibility trigger to track true impressions of a banner ad.

Learn about the Google Analytics Usage Trends Tool

The Google Analytics usage trend is a new tool which is used to visualise trends in your Google Analytics data and to perform trend analysis.


Take your knowledge of Web Analytics to the next level. Checkout my web analytics training course.

Take your Analytics knowledge to the next level. Checkout my Best Selling Books on Amazon

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Himanshu Sharma

Certified web analyst and founder of OptimizeSmart.com

My name is Himanshu Sharma and I help businesses find and fix their Google Analytics and conversion issues. If you have any questions or comments please contact me.

  • Over eleven years' experience in SEO, PPC and web analytics
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of OptimizeSmart.com and EventEducation.com

I am also the author of three books:

error: Alert: Content is protected !!