Scroll Depth and Element Visibility Targeting with Google Tag Manager

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

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, though, it may be better to use a depth less than or more than that amount.

Steps to Implement

Turn on the GTM default variable called Scroll Depth Threshold

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 as you think you might use.

FYI: If the scroll depth is visible at the page load, this event will fire. So think about the length of the page you’ll be targeting on when setting this up.

Create a new tag

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

<script>
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 set 75% as one threshold, the custom property would have a value of ‘75’.

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

Qualaroo Targeting

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

qualarooShowAtPercent=75

Targeting on Element Visibility

Use Case

Imagine your UX design research team is testing different variants of pages or elements. 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.

Steps to Implement

Create the Trigger

Follow the example below to set up your trigger.

Create the Tag

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

<script>
  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.

Qualaroo Targeting

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

qualarooShowWhenVariantVisible=’new_section_variant__A’

Conclusion

As you can hopefully see, GTM makes it pretty easy to add some powerful targeting options when combined with custom properties.

We’d love to hear how you utilize this for your feedback gathering campaigns, especially if you end up customizing anything here, or even combining the above two examples.

Let us know if you need any help at all! Simply email to support@qualaroo.com