Element Visibility Trigger via GTM: Evaluate UX Features

Implement the new Element Visibility trigger in 4 easy steps.

Element Visibility Trigger via GTM: Evaluate UX Features

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.

  1. Do these end up in a user’s viewport?
  2. 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:

Wayfair product specs

But the warranty and assembly details are hidden and I have to scroll down this tab to view:

Wayfair hidden specs

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

right click inspect element

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:

div.vc_row.wpb_row.vc_row-fluid.section.clearBoth.clients-container.col-md-8.vc_custom_1504376155769.vc_row-has-fill *

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:

element visibility trigger

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)
  • Advanced
    • 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!):

element trigger elements vs per page

Here are my final settings:

element visibility trigger settings

Step 4: Create Google Analytics Event Tag

Inside of GTM > Workspace > Tags > New Universal Analytics Tag > Track Type: Event:

GA event tag for element visibility

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.

element visibility tag firing

Summary

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?

Related Articles:

  1. GTM Scroll Depth Tracking
  2. GTM Video Tracking
  3. GTM Javascript Error Tracking

More eComm GTM Tips

Sign up to be notified when we release more helpful analytics & eCommerce tips.

We respect your inbox.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

Leave a Reply

Your email address will not be published. Required fields are marked *