在添加任何新代码之前,请务必先了解您的网站或移动应用上已经存在的代码(如果有)。您应评估现有代码配置,以免在添加过程中添加任何额外或冗余的代码。如果您不确定自己网页上代码添加的当前状态,不妨参阅本文,了解几种分析现有代码配置的方法。
即使您已完成初步分析,也还应该将这些检查融入代码管理标准流程中。定期评估您网站或应用上运行的代码对于数据保护与安全很重要。
若要分析代码,您可以利用 Google Tag Assistant 或 Google 跟踪代码管理器中的功能,也可以使用人工代码检查方法。
Tag Assistant
Google Tag Assistant 是一款适用于全局网站代码 (gtag.js) 添加的代码分析工具。启用后,Tag Assistant 会在网站内容下方的浏览器中显示调试窗格,方便您查看触发的全局网站代码命令及触发顺序。Tag Assistant 会显示系统正在向数据层传递哪些数据,以及哪些事件触发了这些数据交换。此外,它还会显示命中(HTTP 请求)及关联的参数。详细了解 Tag Assistant。
跟踪代码管理器
您可以通过检查跟踪代码管理器帐号和容器来分析现有代码配置。跟踪代码管理器还提供了预览模式,该模式的功能与 Tag Assistant 类似。
搜索
不妨使用跟踪代码管理器容器中的搜索栏来查找代码、触发器和变量中的代码、设置或代码行。这是精确找出可能包含需要重新评估的设置或代码的好方法。
版本
跟踪代码管理器中的版本功能会显示现有容器配置的摘要。
- 在跟踪代码管理器中,点击版本。
- 点击列表中的最新版本以查看容器的当前状态。随即显示的视图中会列出代码、触发器、变量和自定义模板。
预览模式
跟踪代码管理器的预览模式可显示网页上触发的代码、触发这些代码的事件以及要推送到数据层的数据。预览模式的功能与 Tag Assistant 大致相同。详细了解预览模式。
人工代码检查
为了更全面地分析现有代码配置,有时需要进行人工代码检查。在源代码中搜索以下其中一些常用代码关键字,可帮助识别任何可能的代码配置:
gtag(
- 这是gtag()
函数的开头部分,这些代码片段通常包含额外的插桩代码。googletagmanager.com
- 此网域用于加载跟踪代码管理器和全局网站代码功能,可帮助您找到这些类型的代码。
如果您已经植入了 gtag.js 或已经实现了 Google 跟踪代码管理器,则可以更新现有代码或插桩,而不是实现新的配置。
dataLayer
- 可用于了解数据层代码是否已创建,以及dataLayer.push()
是否针对特定事件通过插桩进行调用。analytics.js
或ga.js
- 用于旧版 Google Analytics(分析)实现的库的文件名。conversion.js
或conversion_async.js
- 用于 Google Ads 转化衡量的库的文件名。optimize.js
- 用于 Google 优化工具代码。- 可能包含 Google 代码的第三方跟踪代码管理系统。在源代码中查找可能的第三方跟踪代码管理系统(例如
utag.js
或_satellite
)。
全局网站代码 (gtag.js)
如果您的网页上已有全局网站代码,您可以查看该代码以详细了解其用途。核心代码将如下例所示:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-1');
</script>
如果有多个产品和帐号,则您可能会看到多行 gtag('config',...)
。例如:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-1');
gtag('config', 'UA-YYYYYY-2');
gtag('config', 'AW-XXXXXX');
gtag('config', 'G-XXXXXX');
</script>
每个 config 行都包含产品前缀(用于指示正在配置的产品),后跟正在配置的帐号的 ID。您可以在下文中详细了解产品前缀。
全局网站代码中产品前缀的含义
UA | 表示您的全局网站代码由 Google Analytics(分析)控制。该 ID 是您的 Google Analytics(分析)衡量 ID。若要查找与该 ID 关联的媒体资源,请使用 Google Analytics(分析)中的帐号搜索功能。如果该媒体资源没有显示,则可能是因为您没有它的访问权限。 |
G | 表示您的全局网站代码由 Google Analytics(分析)4 数据流控制。该 ID 是您的 Google Analytics(分析)衡量 ID。 |
AW | 表示您的全局网站代码由 Google Ads 控制。AW 前缀后面的数字字符串是 Google Ads 中的转化 ID。 |
DC | 表示您的全局网站代码由 Floodlight 代码控制。DC 后面的数字字符串是您的广告客户 ID。 |
其他 | 表示您的全局网站代码由其他 Google 产品控制或可能未正确植入。请使用 Tag Assistant 进行验证。 |
Google 跟踪代码管理器
使用跟踪代码管理器配置的网页上添加的容器代码类似于以下示例。您可以通过检查容器代码来识别跟踪代码管理器容器 ID。容器 ID 以“GTM-
”开头,以下示例突出显示了容器 ID 放置位置。
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<:!-- End Google Tag Manager -->
获得容器 ID 后,请打开 Google 跟踪代码管理器帐号屏幕,然后点击 以搜索此 ID。接下来,您可以检查网站的代码、触发器和变量配置。