在添加新代码之前,请评估您的网站或移动应用中已有的代码(如果有),以免添加任何冗余的代码。本文介绍了一些评估现有代码的方法。
即使您已完成了初步评估,也仍应在标准代码管理流程中纳入定期检查。定期评估您网站或应用上运行的代码对于数据保护与安全很重要。
如需评估现有代码,请使用以下资源:
Tag Assistant
Google Tag Assistant 是一款适用于 Google 代码 (gtag.js) 的代码分析工具。启用后,Tag Assistant 会在浏览器中显示调试窗格,方便您查看触发的 gtag.js 命令及触发顺序。Tag Assistant 会显示正向数据层传递哪些数据,以及哪些事件触发了这些数据交换。此外,它还会显示命中(HTTP 请求)及关联的参数。详细了解 Tag Assistant。
跟踪代码管理器
您可以通过检查跟踪代码管理器账号和容器来分析现有代码配置。跟踪代码管理器还提供了预览模式,该模式的功能与 Tag Assistant 类似。
搜索
您可以使用跟踪代码管理器容器中的搜索栏来查找代码、触发器和变量中的具体代码、设置或代码行。搜索栏是精确找出可能包含需要重新评估的设置或代码的好方法。
版本
跟踪代码管理器中的版本功能会显示现有容器配置的摘要。
- 在跟踪代码管理器中,点击版本。
- 点击列表中的最新版本以查看容器的当前状态。
跟踪代码管理器会在此视图中列出代码、触发器、变量和自定义模板。
预览模式
跟踪代码管理器中的预览模式可显示网页上触发的代码、触发这些代码的事件以及要推送到数据层的数据。预览模式的功能与 Tag Assistant 大致相同。详细了解预览模式。
人工代码检查
若要更全面地分析现有代码配置,不妨考虑进行人工代码检查。在源代码中搜索以下其中一些常用代码关键字,可帮助识别任何可能的代码配置:
gtag(
- 这是gtag()
命令的开头部分,这些代码片段通常包含额外的插桩代码。googletagmanager.com
- 此网域用于同时加载跟踪代码管理器和 gtag.js 功能,可帮助您找到这些类型的代码。
如果您已经植入了 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
)。
Google 代码 (gtag.js)
如果您已向网页添加 Google 代码段,则可以查看该代码以详细了解其用途。核心代码将如下例所示:
<!-- Google tag (gtag.js) -->
<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',...)
。例如:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></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', 'TAG_ID');
</script>
每个 config
行都包含产品前缀(用于指示正在配置的产品),后跟正在配置的账号的 ID。您可以在下文中详细了解产品前缀。
Google 代码中产品前缀的含义
代码 ID 用于标识 Google 代码。一个 Google 代码可以具有多个代码 ID。 例如,如果您使用 Google Ads,您的代码现在就有两个 ID:一个旧 ID (AW) 和一个 Google 代码 ID (GT)。![展示 Google Ads 中的某个 Google 代码有两个代码 ID 的屏幕。](https://developers.google.cn/static/tag-platform/images/manage-google-tag.png?authuser=2&hl=zh-cn)
前缀 | ID 类型 | 说明 |
---|---|---|
GT-XXXXXX | Google 代码 | 每个新创建的 Google 代码都会获得一个 GT 前缀和唯一 ID。 |
G-XXXXXX | Google 代码(旧前缀) | Google Analytics(分析)4 代码是具有 G 前缀和唯一 ID 的 Google 代码。 |
AW-XXXXXX | Google 代码(旧前缀) | Google Ads 代码是具有 AW 前缀和唯一 ID 的 Google 代码。 |
DC-XXXXXX | Google 代码(旧前缀) | Google Floodlight 代码是具有 DC 前缀和唯一 ID 的 Google 代码。 |
使用 Google 代码配置的网页可能具有前缀为“G”或“AW”的 ID。前缀“G”表示您的 Google 代码最初是在 Google Analytics(分析)中创建的。前缀“AW”表示您的 Google 代码最初是在 Google Ads 中创建的。这两个 ID 是代码 ID 的不同版本且可以互换,因此,如果您看到带有其中一个前缀的 ID,则无需添加带有另一个前缀的 ID。详细了解如何设置代码 ID
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。接下来,您可以检查网站的代码、触发器和变量配置。