{"id":114635,"date":"2025-02-28T05:02:22","date_gmt":"2025-02-28T05:02:22","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/the-scroll-depth-trigger-in-google-tag-manager\/"},"modified":"2025-02-28T05:02:22","modified_gmt":"2025-02-28T05:02:22","slug":"the-scroll-depth-trigger-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=114635","title":{"rendered":"The Scroll Depth Trigger In Google Tag Manager"},"content":{"rendered":"


\n<\/p>\n

\n

Scroll depth tracking in web analytics is one of those things you simply must<\/strong> do, especially if you have a content-heavy site. Tracking scroll depth not only gives you an indication of how much users are digesting your content, but it also lets you turn meaningless metrics such as Bounce Rate into something far more useful.<\/p>\n

If you\u2019ve already been tracking scroll depth in Google Tag Manager<\/a>, you\u2019ve probably been using either Rob Flaherty\u2019s brilliant Scroll Depth<\/a> jQuery plugin, or Bounteous\u2019 equally ingenious Scroll Tracking recipe<\/a>. I\u2019m sure you\u2019ll be very pleased to know that Google Tag Manager just released a native Scroll Depth trigger<\/strong>, with which setting up scroll depth tracking will be a doozy!<\/p>\n

\n

<\/p>\n

\"Scroll<\/p>\n

<\/a><\/p>\n<\/div>\n

The new trigger comes with all the base features you\u2019d expect in a scroll depth tracking plugin. There\u2019s no option to track scrolling to specific HTML elements, but luckily the recently released Element Visibility trigger<\/a> takes care of this.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

The trigger configuration<\/h2>\n

You can find the trigger in the Google Tag Manager user interface, by navigating to Triggers<\/strong>, clicking the NEW<\/strong> button, and selecting the Scroll Depth<\/strong> trigger template from the list.<\/p>\n

\n

<\/p>\n

\"Scroll<\/p>\n

<\/a><\/p>\n<\/div>\n

When you create the trigger, you\u2019ll see the following configurable options:<\/p>\n

    \n
  1. Vertical Scroll Depths<\/strong> – set the trigger up for tracking vertical scroll<\/li>\n<\/ol>\n
    1. **Percentages** - track percentages of vertical scroll\n\n2. **Pixels** - track vertical pixel depths\n<\/code><\/pre>\n
      \n
    1. Horizontal Scroll Depths<\/strong> – set the trigger up for tracking horizontal scroll<\/li>\n<\/ol>\n
      1. **Percentages** - track percentages of horizontal scroll\n\n2. **Pixels** - track horizontal pixel depths\n<\/code><\/pre>\n
        \n
      1. All pages \/ Some pages<\/strong> – enable the trigger either on all pages or only on some pages<\/li>\n<\/ol>\n
        The settings should be quite self-explanatory. For example, to track vertical scroll (i.e. scrolling from top to bottom) so that an event is triggered with 25% of page scrolled, 50% of page scrolled, 75% of page scrolled, and reaching the end, you\u2019d set the trigger up as in the very first image of this article.<\/p>\n
        You might want to delimit the trigger to collect data only on content pages, which is where the Some pages<\/strong> option will come useful:<\/p>\n
        \n
            <\/p>\n
            \"Scroll<\/p>\n
            <\/a><\/p>\n<\/div>\n
        That\u2019s it for the configuration.<\/p>\n
        How to use the trigger<\/h2>\n
        It\u2019s a good idea to use the Preview mode for this. Set the trigger up with e.g. 25% thresholds (as in the image at the beginning of this article), visit a page on your site, and scroll some. You\u2019ll see the following Data Layer object pushed when you reach a scroll threshold:<\/p>\n
        \n
            <\/p>\n
            \"Scroll<\/p>\n
            <\/a><\/p>\n<\/div>\n
        Here are the relevant Data Layer variables that are created:<\/p>\n