GTM中的自定义滚动深度触发器

GTM原理解析 GA小站 643次浏览 已收录 0个评论

Google Tag Manager中的滚动深度触发器可以实现很多的作用,比如在交互跟踪中,可以用滚动跟踪页面从打开到下拉的比例作为一个重要的衡量指标,其实,在过去的几年已经实现了页面滚动深度的跟踪。

通过Google Tag Manager原生的滚动深度触发器,可以想象我们现在拥有了一个能解决所有问题的最终决绝方案,但是,里面有些东西跟其他分析是不同的,原生的滚动深度触发器要求自定义提供访客访问内容时的一些深度信息。

GTM中的自定义滚动深度触发器

在这篇文章中,我们将探索一些对你非常有用一些滚动深度触发器使用技巧。

目录
1、页面访问比例
2、只在特定页面触发滚动深度触发器
3、只在特定阀值在触发
4、跟踪特殊页面的访问比例
5、总结

1、页面访问比例
您可以进行的最简单的自定义是根据问题中的页面跟踪不同的百分比,例如,在我的博客的文章页面上,我可能有关注以25%垂直滚动的增量进行跟踪。但是在列表页面和摘要页面上,我可能只想知道谁滚动到底部。

垂直滚动和水平滚动设置区域要求填写一个一些列的数值,通过逗号隔开,因此,您可以轻松使用自定义JavaScript变量来返回一个特定条件的数字列表,以及一些其他条件的不同数字列表。

例如,下面是一个自定义JavaScript变量,它可以完成我在本章第一段中描述的内容。
GTM中的自定义滚动深度触发器
如果页面网址包含/ analytics /,则此变量返回字符串25,50,75,100,否则返回75,100。因此,在博客页面上,它将以25%的增量来衡量滚动深度,但在其他页面上只能滚动到75%和100%的深度。

现在你只需要在触发器中添加上这个变量:
GTM中的自定义滚动深度触发器

你也可以不使用自定义js变量直接在滚动深度触发器中设置,只是我比较常用的一种方式,你可以通过正则表达去实现:
GTM中的自定义滚动深度触发器
这就是一个简单的自定义例子,它可以让你衡量页面相关的合理指标。

2、只在特定页面触发滚动深度触发器
这也应该是一个不容忽视的问题。只有在你对滚动深度跟踪真正感兴趣的页面上使用滚动深度触发器才能触发代码。例如,我实际上只想知道用户在我的博客页面和其他地方滚动的距离。因此,我可以对触发器进行简单的修改来划分其触发功能,去限制特定的页面才会触发。
GTM中的自定义滚动深度触发器
这个非常简单的限制可以帮助你收集到真正需要的数据。

3、只在特定阀值在触发
滚动深度触发器唯一的问题就是它不关系页面的是长还是短,如果你有一个短页面,这可能会导致页面加载的时候所有的阀值都会触发,会将一些列的gtm.scrollDepth事件推送大数据层去,尽管用户没有下拉,但是事件仍被触发:
GTM中的自定义滚动深度触发器

幸运的是,我们可以使用一个漂亮的技巧来对抗这个问题。我们可以防止“浏览深度”触发器在浏览器视口高度和页面高度之间的比率过高的页面上运行。浏览器视口是由您的页面填充的Web浏览器区域。页面本身就是整个文档,其中的一部分可能在视口的下方隐藏

可见视口的高度与页面高度之间的比率越高,滚动的越少。例如,如果可见视口的高度为400像素,并且页面高度也为400像素,则不需要滚动。整个页面将在视口中可见,并且您在Scroll Depth触发器中定义的任何垂直阈值都将自动触发。

因此,如果你只想在用户实际滚动到25%,50%,75%和100%时触发触发器,则需要确保可见视口高度与页面高度之间的比率小于0.25。这意味着在浏览器视口中只有不到25%的页面可见

function() {
  // Change this to reflect the percentages or pixels you want to fire the trigger for
  var verticalScrollDepths = '25,50,75,100';
  
  // Change this to the MAXIMUM ratio of viewport height / page height you want the trigger to activate for
  var maximumRatio = 0.25;
  
  // Change this to what thresholds should be tracked if the ratio is more than the maximum
  // Leave it at '101' if you want to prevent the trigger from functioning in this case
  var fallbackDepths = '101';
  
  var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
  
  var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
  
  var ratio = heightOfViewport / heightOfPage;
  
  return ratio < maximumRatio ? verticalScrollDepths : fallbackDepths;
}

为了实现这个,你需要在自定义就是变量中添加如下代码

首先需要做的是编辑verticalScrollDepths变量,以反映如果页面通过比率检查时要跟踪的阈值列表。

然后,编辑maximumRatio以反映可见视口高度与实际页面高度的最大比率(介于0和1之间)。值为0.25意味着页面加载时页面的至多25%可以在视口中可见。

最后,编辑fallbackDepths变量,为超出最大比率的情况提供“默认”值。如果您希望防止Scroll Depth触发器在超过最大比率时完全不起作用,请使用值101,因为无法跟踪101%的深度。

然后,只需将其添加到“垂直滚动深度”字段中,并且应该全部设置。

现在触发器只会在页面足够长或使跟踪时有意义的情况下触发。

4、跟踪特殊页面的访问比例
这有点棘手,但仍然可以用一些JavaScript来实现。

默认情况下,滚动深度触发器计算从页面顶部到页面底部的垂直滚动深度。但是您可能只想知道特定内容元素的滚动深度,例如文章正文。例如,在我的网站上,我并不在乎用户是否滚动浏览文章结尾,通过Disqus评论,直到底部。但是如果他们滚动到主要文章主体的底部,我会在意。

做这项工作的方法是首先计算包含您想跟踪滚动深度的内容的HTML元素的高度。然后,你需要检查这个元素的页面顶部有多远。最后,您需要告诉Scroll Depth触发器跟踪与内容元素的所需深度相对应的像素阈值,并将页面顶部的距离添加到这些数字。

我认为这很容易说明:
GTM中的自定义滚动深度触发器

如你所见,元素的总高度为1200像素。如果我想跟踪33%的滚动深度增量,则表示相应的标记位于400,800和1200像素。由于内容元素的顶部距页面顶部正好为250像素,因此我需要在将此数字输入到“滚动深度”触发器之前将此数字添加到阈值,因为它会测量从页面顶部算起的所有内容。因此最终像素深度将是650,1050和1450像素。

现在,由于我们不想将这些内容硬编码到触发器中,因为这会导致可怕的混乱(每个页面都需要自己的触发器),所以我们可以使用自定义JavaScript变量来动态计算像素深处。

function() {
  // Change the contents of this array to reflect the percentages of scroll depth you want to track
  var verticalPercentages = [25,50,75,100];
  
  // Change this to fetch the element you want to track scrolling in
  var targetElement = document.querySelector('div.post-content .main-content-wrap');
  
  var elementHeight = targetElement.offsetHeight;
  
  var totalOffsetTop = 0;
  
  while (targetElement) {
    totalOffsetTop += (targetElement.offsetTop - targetElement.scrollTop + targetElement.clientTop);
    targetElement = targetElement.offsetParent;
  }
  
  return verticalPercentages.map(function(percentage) {
    return parseInt(elementHeight * (percentage * 0.01) + totalOffsetTop);
  }).join();
}

然后,您需要将此变量引用添加到触发器的Vertical Scroll Depths选项中的Pixel字段中:
GTM中的自定义滚动深度触发器
此设置根据您在verticalPercentages阵列中写入的百分比动态计算正确的像素阈值。这样,0%的深度是内容元素的顶部(在targetElement中指定),100%的深度是内容元素的底部。

通过这种解决方法,您可以在页面上获得更多有意义的度量,这些页面有许多不同的内容区域,用于填充文档本身的空间。

5、总结
这四个技巧从简单到复杂。

你可以通过多种方式自定义Google跟踪代码管理器的默认触发器。通过滚动深度触发器,这些定制几乎是必需的,因为触发器本身在一些关键配置选项中缺乏。

例如,我希望在触发器中看到以下功能:
选项可防止在页面加载时跨越阈值时触发器自动触发。
可以手动重置触发器,这对于单页应用程序尤其有用。
选择定义内容元素而不是整个页面来确定滚动深度。
有了这篇文章中的提示,你可以重置触发器一些设置去实现很多特殊的功能。

 

来源:https://www.simoahava.com


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:GTM中的自定义滚动深度触发器
链接:https://www.ichdata.com/customize-scroll-depth-trigger.html

喜欢 (0)
[hyz1100@126.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址