Google Tag Manager Practical Guide:Scroll Depth | BCS

Google Tag Manager Practical Guide:Scroll Depth

Google Tag Manager BCS 8 months ago (12-10) 195 Views 0 Comments

In this section, we talk about the tracking of page access depth. Now there is a Scroll Depth trigger in Google Tag Manager. It is very convenient to use this tracking. Before this, we need a piece of js code to do tracking.

It’s really much more convenient now.

Scroll Depth is very necessary to track long pages. For example, our page Step-by-step deployment of Adobe Analytics with Adobe Launch is very long. We want to know the depth of access of different people, so we need to use Scroll Depth to track.

Let ’s take a look at the setting process:

Setup Process

1、Open built-in variables

Click on Workspace> Variables> Configure in Google Tag Manager and tick all  Scrolling

Google Tag Manager Practical Guide:Scroll Depth

There are three built-in variables:

Scroll Depth Threshold: Accesses the gtm.scrollThreshold key in the dataLayer, which is set by Scroll Depth triggers. This will be a numeric value that indicates the scroll depth that caused the trigger to fire. For percentage thresholds, this will be a numeric value (0-100). For pixels, this will be a numeric value that represents the number of pixels specified as the threshold.

Scroll Depth Units: Accesses the gtm.scrollUnits key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘pixels’ or ‘percent’, that indicates the unit specified for the threshold that caused the trigger to fire.

Scroll Direction: Accesses the gtm.scrollDirection key in the dataLayer, which is set by Scroll Depth triggers. This will be either ‘vertical’ or ‘horizontal’, that indicates the direction of the threshold that caused the trigger to fire.

All of these will be used in Tags.

2、Set Trigger

Create a trigger and select Scroll Depth type:

Google Tag Manager Practical Guide:Scroll Depth

 

Named Scroll Depth Test

Google Tag Manager Practical Guide:Scroll Depth

 

There are two types of Both scroll depths are available, options:

  • Vertical Scroll Depths fire based on how far down a user has scrolled the page.
  • Horizontal Scroll Depths fire based on how far to the right a user has scrolled the page.

Checking will pop up new settings, such as:

Google Tag Manager Practical Guide:Scroll Depth

Both scroll depths are available, Set scroll depths as either Percentages of the page height and width, or as Pixels. Enter one or more positive integers separated by commas, representing percentage or pixel values.

For example, select Percentages and enter 10, 50, 90 to set trigger points at 10%, 50%, and 90% of the page height. When this trigger is applied to a tag and a user scrolls 90% of the way towards the bottom of the page, the tag will fire three times: Once at 10%, once at 50%, and once at 90%.

The trigger will only fire once per threshold per page. If the user scrolls back up, the trigger will not fire again unless the page reloads or the user navigates to a new page that uses the same trigger.

The “Enable this trigger on” menu specifies when this trigger should start to listen for relevant interactions,Window Load (gtm.load) is the default option.

  • Container Load (gtm.js): Enable as soon as possible after the page begins to load.
  • DOM Ready (gtm.dom): Enable after the DOM is ready to be parsed.
  • Window Load (gtm.load) (default): Enable after all initial content on the page has loaded.

This trigger fires on is used to qualify specific pages.

Here we only track the Step-by-step deployment of Adobe Analytics with Adobe Launch page because this page is very long. The complete setup is:

Google Tag Manager Practical Guide:Scroll Depth

 

3、Set Tags

Create an event tracking tag with the following settings:

Google Tag Manager Practical Guide:Scroll Depth

 

Save!

4、Preview

Click Preview in the upper right corner, and then enter the test state to simulate the operation.

Google Tag Manager Practical Guide:Scroll Depth

 

See, Scroll Depth is triggered, we are looking at the real-time report in Google Analytics:

 

Google Tag Manager Practical Guide:Scroll Depth

Data was also received.

 


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Like (0)
Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website