Element Visibility Trigger in GTM : Google Tag Manager Tutorial

Element Visibility Trigger In GTM : Google Tag Manager Tutorial

The Element Visibility Trigger In GTM : Google Tag Manager Tutorial video covers the following topics :

00:00 - How to create the element visibility trigger in Google Tag Manager
00:23 - What is selection method in Element visibility trigger in Google Tag Manager
00:30 - How to CSS attributes of any element on the page
00:41 - Understanding the trigger firing options with element visibility trigger in Google Tag Manager
03:50 - What is minimum duration condition with element visibility trigger in Google Tag Manager
04:15 - What is the observe DOM changes condition with element visibility trigger in Google Tag Manager
09:30 - Using a tag with Element visibility trigger in Google Tag Manager

Learn how to track whether an element was visible to a user or not using the Element visibility trigger in Google Tag Manager GTM.

By visibility we mean here that the element was present in the viewport of the user's browser window or not. It does not mean that the user actually noticed the element.

One of the common applications of Element visibility trigger is to calculate the click through rate of any button. We can calculate the impressions using the element visibility and calculate the click interactions through any of the applicable methods.

Check the following video to know more on how to track clicks on any element in Google Tag Manager GTM -    • How to track clicks with Google Tag M...  

Creating an element visibility trigger is very simple in most cases.

In your Google Tag Manage, click on triggers - new trigger - element visibility

Now, you will the option to choose the selection method. There are 2 methods basically - ID and CSS selector. You can choose the one that is relevant for your use case.

To get the ID or CSS selector of your element, simply right click on the element you want to track and click on inspect element. Now, in the highlighted section of the browser console you can get the various attributes of the element your want to track with the element visibility trigger.

It is very easy to spot the ID for the element visibility trigger, but to get the CSS selector, simply right click on the highlighted html component then click on copy and click on copy selector.

Next, you need to go back to your Google Tag Manager Interface, open your element visibility trigger and paste the value of the element that you picked by inspecting against the Selection method of your choice - ID or CSS selector

Please Note : It is advisable to use ID whenever possible against CSS selector as that is a more robust component.

Next, you have three options :

1. Once per page
2. Once per element
3. Every time an element appears in screen

As the name suggests, Once per page will fire only once for a page load.

Once per element is suitable when your selection method is using CSS Selectors and multiple elements qualify for your condition. In this case, all the elements when exposed in viewport will trigger the associated tag once.

Every time an element appears is a simply straight forward condition - the trigger will get activated every time the element appears on screen.

Next, is the minimum percent visible setting - which is also very easy to understand. This simply gives you an option to set the visibility threshold. Would you consider the element visible if only 40% of the element gets visible in the browser's viewport then set this to 40%. In my experience 50% is a good number to put here.

Next, its the setting for minimum onscreen duration. You simply need to select the duration for which the element remain visible - this is optional

It is advisable to click on the checkbox to observe DOM change. Just be careful that this can affect the page performance, so watch the video in Detail

#ElementVisibilityGTM #GoogleTagManager #GTM #DataVinci #Sanmeet

For more high quality Google Tag Manager videos:

SUBSCRIBE TO CHANNEL 🙏 :    / @datavincianalytics  

Facebook Group :   / datavincidoa  

DataVinci Website : https://DataVinci.services

About DataVinci :

We are Digital Analytics Agency with a team of highly skilled people in Google Marketing Cloud and Adobe Experience cloud. We have solid expertise in the entire digital analytics stack - Tag Management, reporting, analysis, data visualization and conversion rate optimization.

🙏🙏

#ElementVisibilityTrigger #GoogleTagManager #GTM #GoogleTagManager #GTM #TriggersInGoogleTagManager #TriggersInGTM #GoogleTagManagerTutorial #GTMTutorial #LearnGTM #LearnGoogleTagManager #GoogleTagManagerCourse #GTMCourse #BestGoogleTagManagerVideo #Sanmeet #SanmeetSinghWalia #DataVinci