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


\n<\/p>\n

\n

Last updated 9 March 2018 with some new tips.<\/em><\/p>\n

The Scroll Depth trigger<\/a> in Google Tag Manager<\/a> has a lot going for it. Tracking how far users scroll down a given page has long since<\/a> been recognized as an important cog in the engagement tracking<\/em> machine, and there have been really<\/a> great<\/a> solutions for implementing scroll depth tracking for web analytics over the years.<\/p>\n

With Google Tag Manager\u2019s native Scroll Depth trigger, it\u2019s tempting to think we now have a be-all end-all solution that covers all the bases. However, as with everything else in analytics, the native scroll depth trigger does require customization to provide you with relevant information about your content and the visitors interacting with it.<\/p>\n

\n

<\/p>\n

\"Customizing<\/p>\n

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

In this article, I\u2019ll explore some tricks that you might find useful when customizing the scroll depth trigger.<\/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

1. Variable percentages depending on page<\/h2>\n

The easiest customization you can make is to track different percentages depending on the page in question. For example, on article pages in my blog I might be interested in tracking in increments of 25% of vertical depth scrolled. But on list pages and summary pages I might only be interested in knowing who scrolls down to the bottom.<\/p>\n

The Vertical Scroll Depths<\/strong> and Horizontal Scroll Depths<\/strong> fields require a number or a list of numbers (comma-separated) to work. Thus you can easily use a Custom JavaScript variable<\/strong> to return one list of numbers for a certain condition, and a different list of numbers for some other condition.<\/p>\n

For example, here\u2019s a Custom JavaScript variable that does what I described in the first paragraph of this chapter.<\/p>\n

\n
function<\/span>() {\n  return<\/span> {{Page Path}}.indexOf('\/analytics\/'<\/span>) > -1<\/span> ? '25,50,75,100'<\/span> : '75,100'<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
This variable returns the string 25,50,75,100<\/code> if the page URL contains \/analytics\/<\/code>, and 75,100<\/code> otherwise. Thus, on blog pages, it will measure scroll depth in increments of 25 percent, but on other pages only scrolling up to 75% and 100% in depth.<\/p>\n
Then you can just add this variable to the trigger like so:<\/p>\n
\n
    <\/p>\n
    \"Variables<\/p>\n
    <\/a><\/p>\n<\/div>\n
You don\u2019t have<\/em> to use a Custom JavaScript variable. I\u2019m quirky in that I prefer to use it, always. But you could just as well use a RegEx Table variable<\/a> to achieve the same thing:<\/p>\n
\n
    <\/p>\n
    \"Regex<\/p>\n
    <\/a><\/p>\n<\/div>\n
This is a simple customization, but it does allow you to measure relevant metrics for pages where it makes sense.<\/p>\n
2. Only fire the scroll depth trigger on relevant pages<\/h2>\n
This should be a no-brainer, too. It might make sense to have the scroll depth trigger fire your tags only on pages where you are genuinely interested in scroll depth tracking. For example, I\u2019m actually only interested in knowing how far users scroll on my blog pages and nowhere else. Thus I could make this simple modification to the trigger to delimit its firing capabilities:<\/p>\n
\n
    <\/p>\n
    \"Fire<\/p>\n
    <\/a><\/p>\n<\/div>\n
A very simple modification but helps you collect only meaningful data.<\/p>\n
2.1. Prevent the Scroll Depth trigger from activating<\/h3>\n
As you can see, there\u2019s no \u201cEnable when\u2026”<\/a> option on the Scroll Depth trigger, similar to what you might see with a Just Links trigger, for example. Thus you might be tempted to think that there\u2019s no way to prevent those pesky gtm.scrollDepth<\/code> events from populating the dataLayer<\/code> on pages where you are not interested in tracking scroll depths.<\/p>\n
However, there\u2019s a very easy hack to make sure the trigger doesn\u2019t push anything to dataLayer<\/code>. Just set the percentage threshold to 101<\/code>. It\u2019s impossible to scroll to 101% length of the page, so by setting the threshold to this you\u2019ll deactivate the trigger, effectively.<\/p>\n
Thus you could modify #2 above by putting the following Custom JavaScript variable into the Percentages<\/strong> field of the trigger:<\/p>\n
\n
function<\/span>() {\n  return<\/span> {{Page Path}}.indexOf('\/analytics\/'<\/span>) > -1<\/span> ? '25,50,75,100'<\/span> : '101'<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
This sets the thresholds to \u201825,50,75,100\u2019 on pages where the URL contains \/analytics\/<\/strong>, and \u2018101\u2019 elsewhere.<\/p>\n
3. Only fire tags on pages where thresholds are not auto-collected<\/h2>\n
One problem with the Scroll Depth trigger is that it doesn\u2019t care if the page is long or short. If you have a very short page, it\u2019s possible that all the thresholds are met when the page is loaded, which leads to a bunch of gtm.scrollDepth<\/code> events pushed into dataLayer<\/code>, firing your tags even though the user never scrolled!<\/p>\n
\n
    <\/p>\n
    \"automatically<\/p>\n
    <\/a><\/p>\n<\/div>\n
Luckily there\u2019s a nifty trick we can use to fight this. We can prevent the Scroll Depth trigger from functioning on pages where the ratio between browser viewport height and page height is too high<\/strong>. The browser viewport<\/strong> is the area of the web browser that is filled by your page. The page itself is the entire document, parts of which are likely to be invisible below the fold of the viewport.<\/p>\n
The higher the ratio between the height of the visible viewport and the height of the page, the less there is to scroll. For example, if the visible viewport is 400 pixels in height, and the page height is also 400 pixels, there is nothing to scroll. The entire page will be visible in the viewport, and any vertical thresholds you have defined in the Scroll Depth trigger will auto-fire.<\/p>\n
So, if you want to only fire the trigger when the user actually scrolls to 25%, 50%, 75%, and 100%, you need to make sure the ratio between the visible viewport height and the page height is less than 0.25<\/em>. This means that less than 25% of the page is visible in the browser viewport.<\/p>\n
To do this, you need to create a Custom JavaScript variable<\/strong> that looks like this:<\/p>\n
\n
function<\/span>() {\n  \/\/ Change this to reflect the percentages or pixels you want to fire the trigger for\n<\/span>  var<\/span> verticalScrollDepths = '25,50,75,100'<\/span>;\n  \n  \/\/ Change this to the MAXIMUM ratio of viewport height \/ page height you want the trigger to activate for\n<\/span>  var<\/span> maximumRatio = 0.25<\/span>;\n  \n  \/\/ Change this to what thresholds should be tracked if the ratio is more than the maximum\n<\/span>  \/\/ Leave it at '101' if you want to prevent the trigger from functioning in this case\n<\/span>  var<\/span> fallbackDepths = '101'<\/span>;\n  \n  var<\/span> heightOfPage = Math<\/span>.max(document<\/span>.body.scrollHeight, document<\/span>.body.offsetHeight, document<\/span>.documentElement.clientHeight, document<\/span>.documentElement.scrollHeight, document<\/span>.documentElement.offsetHeight);\n  \n  var<\/span> heightOfViewport = Math<\/span>.max(document<\/span>.documentElement.clientHeight, window<\/span>.innerHeight);\n  \n  var<\/span> ratio = heightOfViewport \/ heightOfPage;\n  \n  return<\/span> ratio <\/code><\/pre>\n<\/div>\n
First thing you\u2019ll need to do is edit the verticalScrollDepths<\/code> variable to reflect the list of thresholds you want to track if the page passes the ratio check.<\/p>\n
Then, edit the maximumRatio<\/code> to reflect the maximum ratio (between 0 and 1) of the height of the visible viewport vs. height of the actual page. A value of 0.25<\/code> would mean that at most 25% of the page can be visible in the viewport when the page is loaded.<\/p>\n
Finally, edit the fallbackDepths<\/code> variable to give a \u201cdefault\u201d value for the cases when the maximum ratio is surpassed. If you want to prevent the Scroll Depth trigger from working at all when the maximum ratio is surpassed, use the value 101<\/code>, because a depth of 101% can never be tracked.<\/p>\n
Then just add this to the \u201cVertical Scroll Depths\u201d field and you should be all set.<\/p>\n
Now the trigger will only fire in cases where the page is long enough to make sense for your tracking.<\/p>\n
4. Track scroll percentages of a specific content element<\/h2>\n
This is a bit trickier, but still doable with some JavaScript magic.<\/p>\n
By default, the Scroll Depth trigger calculates vertical scrolling depth from the top of the page to the bottom of the page. But you might only be interested in knowing the scroll depths of a specific content element, such as the article body. For example, on my site, I don\u2019t really care if users scroll past the article end, through the Disqus comments, all the way to the bottom. But I do care if they scroll to the bottom of the main article body.<\/p>\n
The way to make this work is to first calculate the height of the HTML element that contains the content whose scroll depths you want to track. Then, you need to check how far from the top of the page this element is. Finally, you need to tell the Scroll Depth trigger to track pixel thresholds that correspond with the desired depths of the content element, and add the distance to the top of the page to those numbers.<\/p>\n
I think it\u2019s easier to illustrate.<\/p>\n
\n
    <\/p>\n
    \"dynamically<\/p>\n
    <\/a><\/p>\n<\/div>\n
As you can see, the total height of the element is 1200 pixels<\/strong>. If I want to track scroll depth increments of 33%, it means that the respective marks are at 400, 800, and 1200 pixels. Since the top of the content element is exactly 250 pixels<\/strong> from the top of the page, I need to add this number to the thresholds before I feed it into the Scroll Depth trigger, because it measures everything counting from the top of the page. Thus the final pixel depths would be 650<\/strong>, 1050<\/strong>, and 1450<\/strong> pixels.<\/p>\n
Now, since we don\u2019t want to hard-code these into the trigger, as that would lead to a horrible mess to manage (every single page would need its own trigger), we can use a Custom JavaScript variable<\/strong> to dynamically calculate the pixel depths.<\/p>\n
\n
function<\/span>() {\n  \/\/ Change the contents of this array to reflect the percentages of scroll depth you want to track\n<\/span>  var<\/span> verticalPercentages = [25<\/span>,50<\/span>,75<\/span>,100<\/span>];\n  \n  \/\/ Change this to fetch the element you want to track scrolling in\n<\/span>  var<\/span> targetElement = document<\/span>.querySelector('div.post-content .main-content-wrap'<\/span>);\n  \n  var<\/span> elementHeight = targetElement.offsetHeight;\n  \n  var<\/span> totalOffsetTop = 0<\/span>;\n  \n  while<\/span> (targetElement) {\n    totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);\n    targetElement = targetElement.offsetParent;\n  }\n  \n  return<\/span> verticalPercentages.map(function<\/span>(percentage) {\n    return<\/span> parseInt<\/span>(elementHeight * (percentage * 0.01<\/span>) + totalOffsetTop);\n  }).join();\n}\n<\/code><\/pre>\n<\/div>\n
You\u2019d then need to add this variable reference to the Pixel<\/strong> field in the Vertical Scroll Depths selection of the trigger:<\/p>\n
\n
    <\/p>\n
    \"Dynamically<\/p>\n
    <\/a><\/p>\n<\/div>\n
This setup calculates dynamically the correct pixel thresholds based on the percentages you wrote in the verticalPercentages<\/code> array. This way, 0 percent depth is the top of the content element (specified in targetElement<\/code>), and 100 percent depth is the bottom of the content element.<\/p>\n
With this workaround, you can get more meaningful measurements on pages which have lots of different content areas filling up the real estate of the document itself.<\/p>\n
4.1. Return the scroll depth percentage of element scrolling<\/h3>\n
One thing missing from #4 is the option to report on the percentages<\/em> the user scrolled down the element. Because the trigger is setup using pixel depths rather than percentages, the {{Scroll Depth Threshold}} built-in variable will always return the pixel depth the user scrolled past, rather than the respective percentage of scrolling.<\/p>\n
Getting the percentage is actually a bit of a hack. The problem with the Scroll Depth trigger is that it\u2019s initialized fairly early in the page load, often before DOM Ready and any dynamically injected content is added to the page. This means that the thresholds of scrolling might be smaller than what the percentages actually<\/em> would reflect.<\/p>\n
This is, unfortunately, unavoidable right now. The Scroll Depth trigger has no options to delay its initialization until such a time as the content is completely loaded.<\/p>\n
What this also means is that any variables you use to determine the height of the content and, subsequently, what the respective percentages actually reflect, can change from one trigger event to the next. Thus, in order to get the actual<\/em> percentages used by the Scroll Depth trigger, we\u2019ll need to do something that I\u2019ve repeatedly<\/a> instructed to avoid at all costs: implement a side effect in the Custom JavaScript variable.<\/p>\n
Basically, we\u2019ll need to store the scroll thresholds in a global<\/strong> variable when the Custom JavaScript variable is first run. After the initial run, we\u2019ll always pull whatever was stored in the global variable instead of generating a new set each time the variable is invoked. This way, any triggers and tags that use the thresholds will always access the same values, even if they might be off a bit from what the content thresholds actually<\/em> are.<\/p>\n
The modification looks like this:<\/p>\n
\n
function<\/span>() {\n  \n  if<\/span> (typeof<\/span> window<\/span>._gtm_scroll_set === 'undefined'<\/span>) {\n    \n    \/\/ Change the contents of this array to reflect the percentages of scroll depth you want to track\n<\/span>    var<\/span> verticalPercentages = [25<\/span>,50<\/span>,75<\/span>,100<\/span>];\n  \n    \/\/ Change this to fetch the element you want to track scrolling in\n<\/span>    var<\/span> targetElement = document<\/span>.querySelector('div.post-content .main-content-wrap'<\/span>);\n  \n    var<\/span> elementHeight = targetElement.offsetHeight;\n  \n    var<\/span> totalOffsetTop = 0<\/span>;\n  \n    while<\/span> (targetElement) {\n      totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);\n      targetElement = targetElement.offsetParent;\n    }\n    \n    window<\/span>._gtm_scroll_set = {\n      thresholds: verticalPercentages.map(function<\/span>(percentage) {\n          return<\/span> parseInt<\/span>(elementHeight * (percentage * 0.01<\/span>) + totalOffsetTop);\n        }).join(),\n      percentages: verticalPercentages\n    };\n    \n  }\n  \n  return<\/span> window<\/span>._gtm_scroll_set.thresholds;\n}\n<\/code><\/pre>\n<\/div>\n
As you can see, we populate a global variable window._gtm_scroll_set<\/code> with an object that contains two properties:<\/p>\n
Now that we know what the thresholds are, what the percentages are, and we can trust that the same thresholds are returned whenever this Custom JavaScript variable is invoked, we can create another<\/strong> Custom JavaScript variable whose only job is to return which percentage the user scrolled past when the trigger fired. This is what that variable looks like:<\/p>\n
\n
function<\/span>() {\n  if<\/span> (typeof<\/span> window<\/span>._gtm_scroll_set !== 'undefined'<\/span>) {\n    \n    var<\/span> percentages = window<\/span>._gtm_scroll_set.percentages;\n  \n    var<\/span> thresholds = window<\/span>._gtm_scroll_set.thresholds.split(','<\/span>).map(function<\/span>(t) {\n      return<\/span> parseInt<\/span>(t);\n    });\n    \n    var<\/span> crossedIndex = thresholds.indexOf({{Scroll Depth Threshold}});\n\n    return<\/span> percentages[crossedIndex];\n  \n  }\n  return<\/span> {{Scroll Depth Threshold}};\n}\n<\/code><\/pre>\n<\/div>\n
This Custom JavaScript variable checks which threshold was returned by {{Scroll Depth Threshold}}, and returns the respective percentage value.<\/p>\n
The order of things is thus:<\/p>\n
    \n
  1. \n
    Use the first Custom JavaScript variable in the Scroll Depth trigger\u2019s Pixel Depths field.<\/p>\n<\/li>\n
  2. \n
    Use the second Custom JavaScript variable wherever you want to get the percentage value for the scroll depth reached when the trigger fires.<\/p>\n<\/li>\n<\/ol>\n
    Note that even though I am introducing a side effect in the Custom JavaScript variable, it is mitigated by checking if the global variable has already been set. Thus the typical downside of side effects (constantly and unpredictably updating global state) is mitigated.<\/p>\n
    It\u2019s not perfect – nothing that impacts global state ever is. There\u2019s always the risk that some other JavaScript accesses and modifies window._gtm_scroll_set<\/code>, which would break your setup.<\/p>\n
    Summary<\/h2>\n
    These four tips ranged from the really simple to the moderately complex.<\/p>\n
    There are many ways in which you can customize Google Tag Manager\u2019s default trigger. With the scroll depth trigger, these customizations are almost necessary, because the trigger itself is lacking in some critical configurations options for now.<\/p>\n
    For example, I would like to see the following features in the trigger:<\/p>\n
      \n
    • \n
      Option to establish when<\/strong> the trigger is initialized (e.g. after DOM Ready, with a Data Layer event, etc.).<\/p>\n<\/li>\n
    • \n
      Option to prevent the trigger from auto-firing if the thresholds have been crossed when the page loads.<\/p>\n<\/li>\n
    • \n
      Option to reset the trigger manually, which is useful especially on single-page apps.<\/p>\n<\/li>\n
    • \n
      Option to define a content element instead of the entire page for determining scroll depth.<\/p>\n<\/li>\n<\/ul>\n
      With the tips in this article, you can do plenty, but especially the feature where you could reset the trigger is sorely missing from the current implementation.<\/p>\n
      Do you have tips you want to share for Google Tag Manager\u2019s Scroll Depth trigger?<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"
      Last updated 9 March 2018 with some new tips. The Scroll Depth trigger in Google Tag Manager has a lot going for it. Tracking how far users scroll down a given page has long since been recognized as an important cog in the engagement tracking machine, and there have been really great solutions for implementing […]<\/p>\n","protected":false},"author":1,"featured_media":108924,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[39407,1375,1531,14495,15981,1791,22089],"dealstore":[],"offerexpiration":[],"class_list":["post-108923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-customize","tag-depth","tag-google","tag-manager","tag-scroll","tag-tag","tag-trigger"],"yoast_head":"\nCustomize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=108923\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"Last updated 9 March 2018 with some new tips. The Scroll Depth trigger in Google Tag Manager has a lot going for it. Tracking how far users scroll down a given page has long since been recognized as an important cog in the engagement tracking machine, and there have been really great solutions for implementing […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=108923\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-25T10:20:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1860\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=108923#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"Customize The Scroll Depth Trigger In Google Tag Manager\",\"datePublished\":\"2025-02-25T10:20:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923\"},\"wordCount\":2162,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg\",\"keywords\":[\"customize\",\"Depth\",\"Google\",\"Manager\",\"Scroll\",\"TAG\",\"Trigger\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=108923#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=108923\",\"url\":\"https:\/\/fivemor.com\/?p=108923\",\"name\":\"Customize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg\",\"datePublished\":\"2025-02-25T10:20:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=108923#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=108923\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=108923#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg\",\"width\":1860,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=108923#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize The Scroll Depth Trigger In Google Tag Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fivemor.com\/?p=108923","og_locale":"en_US","og_type":"article","og_title":"Customize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network","og_description":"Last updated 9 March 2018 with some new tips. The Scroll Depth trigger in Google Tag Manager has a lot going for it. Tracking how far users scroll down a given page has long since been recognized as an important cog in the engagement tracking machine, and there have been really great solutions for implementing […]","og_url":"https:\/\/fivemor.com\/?p=108923","og_site_name":"Som2ny Network","article_published_time":"2025-02-25T10:20:15+00:00","og_image":[{"width":1860,"height":630,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=108923#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=108923"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"Customize The Scroll Depth Trigger In Google Tag Manager","datePublished":"2025-02-25T10:20:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=108923"},"wordCount":2162,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=108923#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg","keywords":["customize","Depth","Google","Manager","Scroll","TAG","Trigger"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=108923#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=108923","url":"https:\/\/fivemor.com\/?p=108923","name":"Customize The Scroll Depth Trigger In Google Tag Manager - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=108923#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=108923#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg","datePublished":"2025-02-25T10:20:15+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=108923#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=108923"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=108923#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/02\/scroll-depth-trigger-customizations.jpg","width":1860,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=108923#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"Customize The Scroll Depth Trigger In Google Tag Manager"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/108923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=108923"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/108923\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/108924"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=108923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=108923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=108923"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=108923"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=108923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}