通过 - 尼尔·科尔

如何使用Chrome开发工具调试谷歌分析和GTM

Dev Tools Network选项卡显示事件

一步一步指导Chrome开发工具的谷歌分析:

谷歌Chrome浏览器开发工具允许您测试和调试您的分析实施,以确保数据的完整性的水平与您的期望。作为一个网站分析顾问我经常看到很少或根本没有尝试测试和调试谷歌分析和谷歌标记管理器的后果。

这将不可避免地影响数据质量,并导致对web分析数据缺乏信心。这意味着这样的组织缺乏关键的网站性能和行为数据,因此可能会做出糟糕的决定。一个良好的发展和GTM测试过程这将有助于避免错误的见解,并提高你的组织内部对网络分析可靠性的信心。

在这个博客中,我将指导你如何使用Chrome开发工具。

1.打开Chrome开发工具:

Chrome开发工具是一系列的网页开发工具,你可以从谷歌Chrome浏览器免费访问。它们允许您编辑页面,但更重要的是,它们允许您检查页面上的元素并快速诊断问题,甚至不需要访问谷歌分析或谷歌标记管理器。

访问开发工具只是你有兴趣(切勿点击任何iFrame中)在网页上,并从下拉菜单中选择“检查”单击鼠标右键。或者,你可以去菜单Chrome浏览器中,然后选择更多工具>开发者工具。快捷方式包括:

F12或CTRL + SHIFT + J

Mac OS: CMD+OPT + J

打开Chrome开发工具

2.标签在Chrome开发工具:

现在,您将看到Dev Tools有一个设备模式(3),以及控制台顶部的各种选项卡。设备模式允许您模拟移动设备,并测试响应性和特定于设备的视图。您还可以模拟诸如地理位置之类的传感器,并模拟设备方向来测试加速度计数据。

Chrome开发工具选项卡

它提供了宝贵的数据和分析的主要开发工具选项卡有:

元素标签:这是伟大的网页上检查不同的元素。你可以用它来识别CSS选择器,类属性,元素ID和文字使用在点击和元素知名度触发器和标签GTM。

控制台选项卡:控制台日志消息,并可以运行JavaScript。这是优秀的检查可能会阻止谷歌Analytics(分析)或GTM的错误信息,如那些引起内容安全策略和不正确的实现。很多浏览器扩展,如谷歌Analytics(分析)调试器,显示在控制台选项卡中的有用信息。此外,它还可以用来显示在发送给每个GA跟踪调用的详细信息。

源标签:这使您能够调试JavaScript、使用断点暂停代码、从任何页面运行代码片段并查找未使用的JavaScript。

网络选项卡:它允许您查看和调试网络活动,因此是检查谷歌分析调用和参数的重要工具。你可以检查发送到谷歌Analytics的每个页面浏览量、事件、自定义维度和其他指标。

3.开发工具的设置:

在您继续使用Chrome浏览器开发工具,我们首先需要打开的设置窗口。确保您有开发工具开放,并按下F1,这应该打开的设置窗口。现在去“网络”,然后选择“禁用缓存(而DevTools是打开的)”,然后根据“控制台”部分选择“保留日志在导航”。

Chrome开发工具设置

禁用缓存可以防止浏览器在您对web页面进行更改时加载以前的版本以便您可以看到您的更改。保留登录导航意味着在从一个页面导航到另一个页面时不会丢失数据。

4.网络选项卡:

在网络选项卡中输入“收?”在页面的左侧的过滤器,做一个硬刷新(F5)。这是用来通过GA发送该数据的测量协议。这迫使网络标签,显示由GA所做的所有电话。

网络收集?

在“名称”您可以点击网络选项卡的用户付费电话,看到了关于“头”的所有数据传送到谷歌Analytics(分析)。在上面的例子中,我选择了第一个电话,我们可以看到浏览量标签,标签(完整的URL),路径(/为主页)和页面标题。

通过向下滚动Headers选项卡,我们还可以看到GA属性ID、GTM ID和自定义维度。如果使用了错误的GTM脚本,或者如果我们将数据发送到不正确的GA属性,就会显示这一点。我们还可以使用谷歌分析属性来验证每个定制维度的性质。如果有必要,我们可以通过将它们在控制台中的值与根据它们的定义所期望看到的值进行比较,来检查它们是否正常工作。

网络选项卡-自定义尺寸

5.调试事件:

继续在Network选项卡中查看是否可以触发要验证的事件。这可能是单击一个页面元素或导航到另一个页面。这将生成一个新的对方付费电话,因此在“Name”下选择它。下面我们可以看到事件类别(ec)、事件操作(ea)和事件标签(el)。这允许我们确认标记是否正确触发,事件细节是否如预期的那样。

Dev Tools Network选项卡显示事件

6. GTM的多个安装在谷歌标记助理检测:

如果您使用Chrome扩展谷歌标记助理,你可能已经发现,它有时会通知您一个网站有谷歌代码管理工具多次安装。在我自己的站点上也发生了这种情况,我开始怀疑自己是否复制了我的GTM实现。

然而,开发工具是验证完美的解决方案,如果是这样的话还是不行。继续之前请确保您已禁用谷歌代码管理工具的预览和调试模式。

网络GTM容器调用

再次使用网络选项卡,输入“gtm”。在过滤器中。然后,按住“All”按钮刷新页面,强制GTM加载容器。在“名称”下,你应该看到多少集装箱装载在你的网站。在我的网站上,我可以看到只有一个GTM容器加载,因此这确认了我没有加载多个GTM脚本。这是谷歌标记助手的一个常见bug,因此在您得出结论之前,请使用Dev Tools Network选项卡验证它是否是一个真正的问题。

7. GTM标签助理显示多个集装箱装载:

当使用GTM标签助理时,您可能会注意到每个页面视图上装载两个容器。这是正常的,因为它是允许预览模式工作,没有什么可担心的。如果您感兴趣,只要按照上面的说明操作,您就会发现第二个容器装载的名称中有“gtm_debug”。

最后:

测试和调试对于谷歌Analytics和谷歌Tag Manager的实现是至关重要的。Chrome的开发工具是一个良好的测试和调试机制的基本元素。花点时间去了解如何使用开发工具,因为如果你不使用它们,它们可以为你在后期的开发过程中省去很多麻烦。它们在帮助您确保web分析部署的高水平数据完整性方面是无价的。

  • 关于作者:尼尔(@northresearch)提供网络分析和CRO咨询服务,并在许多部门工作,包括金融服务,在线游戏和零售。他曾帮助Hastings Direct、曼彻斯特机场集团在线(Manchester Airport Group Online)和安赛特解决方案有限公司(assurance Solutions Ltd)等品牌改善其数字营销测量和业绩。

留下一个回复

您的电子邮件地址将不会被公布。
*
*

如果您继续使用本网站,即表示您同意使用cookies。更多的信息

本网站的Cookie设置都设置为“允许Cookie”给你最好的浏览体验。如果继续使用本网站而无需改变你的Cookie设置,或者您点击“接受”的,那么你同意这一点。