››

How to Set up Scroll Depth and Element Visibility Targeting with GTM

With the use of Qualaroo's Custom Properties feature and Google Tag Manager events, optimizing the feedback you receive in your UX design research is pretty simple. In this article, we’ll show you how to set any scroll depth percent and the visibility of a specific element.

With scroll depth and element visibility targeting, you can:

Ensure the user has interacted with sufficient elements of your website
Trigger surveys at a precise time and improve the feedback quality

Scroll depth and element visibility tracking will work best if you are a content-rich website and have horizontal & vertical scrolling on your web pages.

In this article, you will learn,

1. How to Show Survey at 75% Scroll Depth

2. How to Target Element Visibility

How to Show Survey at 75% Scroll Depth

Use Case

Qualaroo default targeting allows you to show a survey once the user has scrolled 50% of the screen height. Sometimes, it may be better to use a depth less than or more than that amount.

Step 1: Turn on the GTM default variable called Scroll Depth Threshold.

Configure

Step 2: Create the Trigger.

Create a trigger and search for Scroll Depth. Fill in the values with the percentages you’d like to target. Go ahead and fill in with as many you think you might use.

NOTE: This event will fire if the scroll depth is visible after the page loads. So think about the length of the page you’ll be targeting when setting this up.

Scroll Depth Percentage

Step 3: Create a new tag.

Set it up like the screenshot shows. Here’s the code you’ll need:

window._kiq.push(['set', { qualarooShowAtPercent: {{Scroll Depth Threshold}} }]);

</script>

This will set a Qualaroo Custom Property with the value of the currently reached threshold. For example, if you put 75% as a threshold, the custom property would have a value of ‘75’.

You can use this in your survey targeting to show the survey once the user has scrolled at least 75% of the page.

Scroll Depth Tag

Step 4: Targeting Qualaroo Surveys.

All that is left is to set the targeting on your Qualaroo surveys you want to display at 75%. The custom property should look like this:

qualarooShowAtPercent=75

How to Target Element Visibility

Use Case

Imagine your UX design research team testing different pages or element variants. You could easily target a survey to be shown when one or more of those elements are visible on the page. GTM even allows you to set a timer for how long those elements should be visible on the screen.

Step 1: Create the Trigger.

Follow the example below to set up your trigger.

Test Variant

Step 2: Create the Tag.

Next, you need a tag to set the custom property when the element is visible. Here’s the code you need:

if ({{Test Variant -- A}} === "new_section_variant__A") {

window._kiq.push(['set', { qualarooShowWhenVariantVisible: {{Test Variant -- A}} }]);

}

</script>

This will check if the event has an element ID of the name of your variant. If it does, a custom property will be set in Qualaroo with the ID name of that element.

Test Variant Custom Property

Step 3: Targeting Qualaroo.

Finally, add the following custom property targeting to your Qualaroo survey:

qualarooShowWhenVariantVisible=’new_section_variant__A’

That is all about scroll depth and element visibility targeting with GTM.

Related Articles: