Element Visibility Trigger via GTM: Evaluate UX Features
Implement the new Element Visibility trigger in 4 easy steps.
We’ve all been here during site designs:
“I think that should go there instead of this.” – not you
“NO WAY! That’s a terrible idea. I know our users don’t care about that.” – you
Now there’s a way to prove you’re right! Enter GTM, of course.
Google continues to make it even easier to get data on just about anything. Obviously with the intention to solve painful arguments 🙂
This guide demonstrates how to implement the new Element Visibility trigger that is native to Google Tag Manager to help unlock nice user experience insights.
Here we go!
How to setup your own element visibility triggers and event data in 4 steps:
Step 1: Decide What You Want to Measure
There are plenty of elements across your eCommerce and/or marketing websites that you can glean meaningful insights from.
The example I’ll show from this website is our customer logos that appear near the footer on some pages.
- Do these end up in a user’s viewport?
- If so, do users who are exposed to these logos perform better on our primary KPIs vs users who don’t see them?
How about eCommerce examples:
- What banner(s) on your homepage are leading to more product or category pageviews?
- Do satisfaction guarantee visuals or language drive more purchases or an increased AOV?
- If you have product tabs to help better organize your product detail data, is there data contained within these tabs that helps convert more users?
Here’s an example from Wayfair’s product pages:
I expanded the “Specifications” tab:
But the warranty and assembly details are hidden and I have to scroll down this tab to view:
In some cases you might be able to answer these questions through click-based custom events for Google Analytics or even scroll depth tracking. You could also a/b test everything to prove what performs better..but that’s not likely to happen :).
Step 2: Find Your Custom Element Selectors
This is easier than you might imagine! Find an element on your page that you want to track and then:
a) Right click (or Control + Click on a Mac) and select “Inspect Element” > and hopefully you end up with something like this (shown in Chrome):
If you find that the section you’re trying to track isn’t fully highlighted in your browser (shown in the red box) then use your cursor to click different div elements in your Elements console (shown in blue).
It’s most likely moving higher up in the code will lead you to selecting the entire elements you’re trying to track.
b) Copy the selector path by right clicking the blue bar you have selected and click “Copy selector”:
c) Paste this into a text file or notepad. For me it looked like this:
#page > div.container > div.vc_row.wpb_row.vc_row-fluid.section.clearBoth.clients-container.col-md-8.vc_custom_1504376155769.vc_row-has-fill > div > div > div > div
This is what you’ll need to plug into Step 3 to create your custom trigger!
Pro Tip: use regex to increase your CSS selector matches
For example I removed the first few elements from mine above and put a ” *” (which matches anything that comes after the end of my CSS element) so it looks like this:
This will help increase your potential matches for the trigger to fire.
Step 3: Create New Built-In Element Visibility Trigger
a) Inside of GTM > Workspace > Triggers > New Trigger > User Engagement > Element Visibility type:
b) Customize your Trigger settings to fit your unique needs. Here are quick definitions on each of these options:
- Selection Method: ID or CSS Selector
- Element ID: this is where you drop in your unique CSS selector that you copied above from Step 3
- When to fire this trigger
- Once per page: this means the trigger fires once per page only instead of each time the element ID appears in the viewport
- Once per element: If multiple elements on a given page are matched by a CSS Selector, this trigger will fire the first time each one of them is visible on that page. (be careful with this..see screenshot below of how this worked out for me on this example 🙂 )
- Every time an element appears on screen: This trigger will fire every time a matched element becomes visible. (use same caution with this as well)
- Minimum percent visible: set a % visibility that you’d like to be visible in the user’s viewport in order to match the trigger (think about a half banner displaying as user scrolls down..)
- Set minimum on-screen duration in milliseconds (I like to use at least 0.25 second to account for the user processing what is on the page vs aimlessly scrolling around)
- Observe DOM changes (think about dynamic events like ajax add to cart actions etc)
- Trigger fires on
- All visibility events
- Some visibility events
- You can set additional required events in order for this trigger to fire
Here’s an example of my tag when it was set to fire once per element (yikes!):
Here are my final settings:
Step 4: Create Google Analytics Event Tag
Inside of GTM > Workspace > Tags > New Universal Analytics Tag > Track Type: Event:
You can define your own category, action, and label to fit your unique setup.
One thing to point out is the Non-Interaction Hit: True. This is also subjective but to me the user isn’t doing anything different on the page to trigger this event..I just want more of the data without it affecting other metrics.
Step 5: Test & Publish
Click your preview button within GTM > navigate to your site where this GTM container is installed on > go to the page where you’re targeting this element > scroll down so it’s visible in your viewport and voila – you should now see this tag fire in your GTM debugger console.
There it is – a basic framework to help you begin to measure UX elements and their affect on your primary KPIs (or to solve internal arguments on what will perform better!).
What do you think about this new feature from Google Tag Manager? How are you utilizing it?