The 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 viewport is measured in pixels and is calculated as:
Viewport Width x Viewport Height
Viewport size can vary for the same web browser on the 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 the same web browser on the same device depending upon how it is set up and how it is being used.
Viewport size can vary across web browsers on the 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 a 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 the 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 a different viewport size. So Viewport size can vary for the same device with different screen sizes
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 mobile than on a tablet device.
An HTML element can disappear from a viewport when:
A page unloads in a browser window.
A user scrolls up/down a web page.
There is a DOM change.
A browser tab becomes inactive
A user minimizes/closes the browser window.
Note: It is important to note that the element visibility trigger doesn’t work when an element disappears or becomes invisible from a viewport. As the name suggests, it is an element visibility trigger and not an 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 happens in the background and you can not easily track with certainty which element became visible and when through the naked eye, 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 the following two selection methods while configuring an ‘element visibility’ trigger:
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 on 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:
the element with class =intro
<h1> element
<p> element
You can also use a CSS selector as a substitute for an 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 an 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. 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 an ID/CSS selector. So not every element is/should be a matched element.
The element visibility trigger should fire when one or more matched elements become 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 the 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 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 some of 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 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 content), they see various elements of a web page for milliseconds.
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).
You set this option while setting up 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 sees 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 in Google Tag Manager
Following is the banner ad for some 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 pages, 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 an event to GA‘:
Step-8: Create the tag with the following configuration:
Step-9: Create a new trigger of type ‘Element Visibility’ with the 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 an 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.
Frequently Asked Questions About Element Visibility Trigger in Google Tag Manager
What is the viewport?
The 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.
How do you measure the viewport?
The size of a viewport is measured in pixels and is calculated as:
Viewport Width x Viewport Height
What is the element visibility trigger in GTM?
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.
What is a matched element?
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’:
When this matched element becomes visible in a viewport the element visibility trigger should fire.
What is 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 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.
Get weekly practical tips on GA4 and/or BigQuery to accurately track and read your analytics data.
My best selling books on Digital Analytics and Conversion Optimization
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 BeyondSECOND EDITION OUT NOW!
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.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of all the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
