感谢您预览 Google 的新代码文档!此网站为公开 Beta 版。(反馈

分析现有代码配置

在添加任何新代码之前,请务必先了解您的网站或移动应用上已经存在的代码(如果有)。您应评估现有代码配置,以免在添加过程中添加任何额外或冗余的代码。如果您不确定自己网页上代码添加的当前状态,不妨参阅本文,了解几种分析现有代码配置的方法。

即使您已完成初步分析,也还应该将这些检查融入代码管理标准流程中。定期评估您网站或应用上运行的代码对于数据保护与安全很重要。

若要分析代码,您可以利用 Google Tag AssistantGoogle 跟踪代码管理器中的功能,也可以使用人工代码检查方法。

Tag Assistant

Google Tag Assistant 是一款适用于全局网站代码 (gtag.js) 添加的代码分析工具。启用后,Tag Assistant 会在网站内容下方的浏览器中显示调试窗格,方便您查看触发的全局网站代码命令及触发顺序。Tag Assistant 会显示系统正在向数据层传递哪些数据,以及哪些事件触发了这些数据交换。此外,它还会显示命中(HTTP 请求)及关联的参数。详细了解 Tag Assistant

跟踪代码管理器

您可以通过检查跟踪代码管理器帐号和容器来分析现有代码配置。跟踪代码管理器还提供了预览模式,该模式的功能与 Tag Assistant 类似。

不妨使用跟踪代码管理器容器中的搜索栏来查找代码、触发器和变量中的代码、设置或代码行。这是精确找出可能包含需要重新评估的设置或代码的好方法。

版本

跟踪代码管理器中的版本功能会显示现有容器配置的摘要。

  1. 在跟踪代码管理器中,点击版本
  2. 点击列表中的最新版本以查看容器的当前状态。随即显示的视图中会列出代码、触发器、变量和自定义模板。

预览模式

跟踪代码管理器的预览模式可显示网页上触发的代码、触发这些代码的事件以及要推送到数据层的数据。预览模式的功能与 Tag Assistant 大致相同。详细了解预览模式

人工代码检查

为了更全面地分析现有代码配置,有时需要进行人工代码检查。在源代码中搜索以下其中一些常用代码关键字,可帮助识别任何可能的代码配置:

  • gtag( - 这是 gtag() 函数的开头部分,这些代码片段通常包含额外的插桩代码。
  • googletagmanager.com - 此网域用于加载跟踪代码管理器和全局网站代码功能,可帮助您找到这些类型的代码。

如果您已经植入了 gtag.js 或已经实现了 Google 跟踪代码管理器,则可以更新现有代码或插桩,而不是实现新的配置。

  • dataLayer - 可用于了解数据层代码是否已创建,以及 dataLayer.push() 是否针对特定事件通过插桩进行调用。
  • analytics.jsga.js - 用于旧版 Google Analytics(分析)实现的库的文件名。
  • conversion.jsconversion_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。接下来,您可以检查网站的代码、触发器和变量配置