当前位置:首页 > 内容营销 > 正文

使用 Google Tag Manager 跟踪滚动深度

使用 Google Tag Manager 跟踪滚动深度

您可以使用 Google 标签管理器做很多事情。 查看此分步指南,了解如何设置它以跟踪滚动深度。...

我过去写过几篇关于 Google 标签管理器 (GTM) 的博客。

第一个是初学者指南,第二个讨论了使用标签管理系统的好处——特别是谷歌的。 考虑到这一点,我认为最好开始使用 GTM 进行更高级的实现。

您可以使用 GTM 做很多事情,从安装第三方标签到事件跟踪和表单跟踪。 今天我将解释如何向 Google Analytics 发送一组特定的事件——人们向下滚动页面的距离。 首先,让我们谈谈为什么我们需要滚动深度。

为什么滚动深度很重要?

参与度是很多人谈论的话题,但很少被跟踪——至少在网站上没有。 网站管理员经常对我称之为“脆弱”的指标表示不满,例如页面停留时间和跳出率。 这些指标都不能说明全部情况。

假设我们使用页面上的时间作为我们的参与度指标——如果有人在一页上花费 10 分钟会发生什么? 这是一件好事,因为他们正在参与内容吗? 或者这是一件坏事,因为他们找不到他们正在寻找的内容?

跳出率也有类似的问题。 如果有人登陆联系页面并直接跳出,您可能会争辩说他们已经找到了他们正在寻找的信息并离开了。 这个例子强调了在分析中跟踪目标和转化的重要性(你也许也不应该就此止步,也应该考虑实施电话跟踪——但让我们把它留到另一篇文章中去)。 相反,如果他们在没有找到该信息的情况下离开,您的网站可能会出现严重问题! 这是 Hotjar 和 Lucky Orange 之类的工具可以派上用场来记录用户行为的时候(同样,让我们​​将它们留到另一篇文章中)。

无论如何,从这些例子中我认为很明显你不能仅仅依赖跳出率或页面停留时间作为参与度指标。 这就是滚动深度的用武之地。

一段时间以来,滚动深度一直是一个热门话题,Justin Cutroni 详细介绍了如何在 2014 年使用 Universal Analytics 实施它。 但是,他的帖子没有讨论如何使用 GTM 做到这一点。 这篇文章旨在指导营销人员和非技术网站管理员如何向您的网站添加滚动跟踪。

跟踪滚动深度

跟踪滚动深度的能力(至少我的版本 - 还有其他方法)涉及由 Rob Flaherty 创建的插件。 该插件使用 jQuery 在 GA 中记录数据,在不同的触发点(基线 (0%)、25%、50%、75% 和 100%)向 Google Analytics 发送事件,每个触发点都表示用户所处的不同点与页面的顶部和底部有关。 Andy Gibson 也应该得到提及,因为他详细介绍了 GTM 第 1 版的此过程,而我的帖子更新了他对 GTM V2 的说明。

为了完成本教程,您必须满足一些要求:

  • 您的网站使用 Google Analytics(经典和/或通用分析)
  • 您的网站通过 Google Tag Manager 实施 GA
  • 对GA+GTM的理解

如果您不满足这些要求,我强烈建议您在继续之前查看我前面提到的 GTM 指南以及 Analytics Academy 中的 Google 跟踪代码管理器模块。

创建自定义 HTML 标记

您需要做的第一件事是前往 Google 标签管理器网站,并找到您网站的容器。 找到合适的容器后,单击容器名称前往 GTM 界面:

在我们创建我们的标签之前,我建议创建一个触发器(一个标签触发规则),以确保您的滚动深度脚本在 DOM 准备好时触发。

什么是DOM? 嗯,这是一个相当技术性的问题! 它代表文档对象模型,是 HTML 文档中所有节点(如 p 标签、div、列表项)的表示。 DOM 为 JavaScript 提供了一种与所有这些节点交互的方法。 我们将创建的 DOM Ready 触发器意味着标签将在浏览器完成构建完整页面 DOM 后触发。

要创建触发器,请转到 GTM 中的触发器部分:


到达此处后,单击“新建”。 将您的标签命名为“DOM Ready”,选择事件“Page View”,您的触发器类型为“DOM Ready”,并设置为在“All Pages Views”上触发(除非您不希望某些页面包含在滚动中深度跟踪,然后选择“某些页面浏览量”并选择您的过滤器。

您的触发器应类似于以下内容:

在进入下一步之前,您需要单击“创建触发器”。

接下来,您需要创建一个新标签。 单击左侧菜单窗格中的“标签”:

然后点击“新建”按钮。 在所有标准标签下选择“自定义 HTML 标签”:

然后,您应该转到以下 URL 并复制 scrolldepth.js 文件:

滚动深度.js

复制后,将代码粘贴到空的 HTML 字段中:

然后,每次触发滚动跟踪事件时,此脚本都会创建一个 dataLayer 推送。

不过 GTM 中的事件不会推送到 Google Analytics。 我们需要在 GTM 中使用一个单独的标签来将事件发送到 GA——我们将很快介绍这一点。

添加上述代码后,点击“继续”,然后点击“更多”:

在下一个屏幕上,选择您之前创建的“DOM 就绪”规则:

单击“创建标签”,如果您还没有,请为您的自定义 HTML 标签命名一些描述性的名称。 '滚动跟踪标签会很好。

创建事件变量

接下来,我们需要创建定义事件组件的变量,以便我们可以将它们发送到 GA。 请记住,Google Tag Manager 事件与 Google Analytics 事件不同。

Google Analytics 事件由四个部分组成:类别、操作、标签和价值。 其中最后两个是可选的。

我们将在 Google 跟踪代码管理器中创建这些变量作为变量。 为什么? 因为为了将事件从 GTM 传递到 GA,我们必须通过从 dataLayer 中拉取信息来定义这些组件(这有点复杂)。 创建这些变量后,我们将创建一个设置为事件的 Google Analytics(分析)标记 - 然后将滚动深度事件发送到 Google Analytics(分析)。

要创建变量,请使用左侧菜单转到相应部分:

事件类别变量

单击“新建”并将您的第一个变量命名为“eventCategory”。 选择类型为“数据层变量”,然后输入数据层变量名称为“事件类别”。 将版本保留为“版本 2”。 点击“保存”,它应该是这样的:

对操作、标签和值变量重复这些步骤,但将变量名称和数据层变量名称替换为以下内容:

  • 事件动作;
  • 事件标签;
  • 事件值。

我在下面包含了一些屏幕截图,显示了每个变量应该是什么样子。

事件动作变量

事件标签变量

事件值变量

创建 Google Analytics 标签

现在我们有了变量,我们可以将滚动跟踪 JavaScript 推送到数据层的信息发送。

返回标签部分,点击“新建”,然后选择“Google Analytics”。 同样,为标签命名一些描述性的名称,选择您的 GA 版本(通用或经典),然后输入您的 GA 属性 ID(或在 GTM 中插入您自己的变量以动态提取此 ID)。 然后将轨道类型更改为“事件”。

选择后,您的屏幕应如下所示:

我们现在可以输入刚刚创建的变量。 单击每个“类别”、“操作”、“标签”和“值”文本字段右侧的构建块按钮,然后选择适当的变量:

然后,您可以决定是否希望滚动事件影响网页的跳出率。 如果您希望您的跳出率不受影响,请将非交互事件设置为“真”。 但是,如果您认为向下滚动您的页面不构成跳出,您可以将非交互命中选择为“假”,这样任何大于 25% 的滚动活动都不会影响您网站的跳出率。 但请注意 - 通过将此选项设置为 false,您网站的跳出率可能会低于 5%!

您需要做的最后一件事是为此标签设置触发规则。 单击继续后,从选项中选择“更多”,然后从弹出窗口中单击“新建”。 将触发器命名为“Event equals ScrollDistance”,选择“Custom Event”并在事件名称字段中输入“ScrollDistance”:

单击“创建触发器”,然后保存您的标签。 然后,您应该使用 GTM 的预览模式来检查您的滚动跟踪代码是否正在触发。 如果正确触发,当您到达页面底部时,您的预览窗口应包含以下信息:

查看结果

几个小时后,您将能够在 Google Analytics 的事件报告中分析滚动跟踪实施的结果。 要查看您的报告,请访问 Google Analytics 并找到您刚刚添加滚动跟踪的属性。 您需要导航到 GA 中的行为报告 - 特别是事件部分:

到达那里后,您将看到与大多数其他报告中一样的事件图表:

要获取事件的细分,请单击上方屏幕截图左下方“热门事件”部分下方的“事件标签”。 然后你会得到一个细分如下:

请记住,上述数据是站点范围内的数据,因此您真的希望更深入地研究数据并在每页级别进行此分析,尝试发现异常以查看人们没有滚动所有页面一路下来。

就是这样! 不要忘记在下面的评论中提出任何问题,或者在 Twitter 上将它们发送给我。

注意:本文所表达的观点是作者的观点,并不一定代表卡菲昂及其员工或合作伙伴的观点。

,

最新文章