分析现有代码配置

在添加新代码之前,请评估您的网站或移动应用中已有的代码(如果有),以免添加任何冗余的代码。本文介绍了一些评估现有代码的方法。

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

如需评估现有代码,请使用以下资源:

Tag Assistant

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

跟踪代码管理器

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

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

版本

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

  1. 在跟踪代码管理器中,点击版本
  2. 点击列表中的最新版本以查看容器的当前状态。

跟踪代码管理器会在此视图中列出代码、触发器、变量和自定义模板。

预览模式

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

人工代码检查

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

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

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

  • dataLayer - 可用于了解数据层代码是否已创建,以及 dataLayer.push() 是否针对特定事件通过插桩进行调用。
  • analytics.jsga.js - 用于旧版 Google Analytics(分析)实现的库的文件名。
  • conversion.jsconversion_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 的屏幕。 代码 ID 可以互换。下表简要介绍了哪些代码与 Google 代码兼容。
前缀 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 代码。
Universal Analytics (UA) 代码与 Google 代码 (GT) 不兼容。

使用 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。接下来,您可以检查网站的代码、触发器和变量配置