将 Google 代码集成到您的内容管理系统 (CMS) 或网站开发工具中

Google 代码 (gtag.js) 是可添加到网站中的一种代码段,可用于衡量包括 Google Analytics(分析)4、Google Ads 和 Google Marketing Platform 在内的各种 Google 产品中的用户活动。详细了解 Google 代码

本指南介绍了如何将 Google 代码集成到您的内容管理系统 (CMS) 或网站开发工具中,以便为您的最终用户提供 Google 效果衡量产品的使用权限。

受众

本指南适用于内容管理系统 (CMS) 或网站开发工具的所有者,他们想要为用户提供与 Google 效果衡量产品的集成。本指南不适用于 CMS 或网站开发工具的用户。

准备工作

确保您拥有 Google 代码开发者 ID。如果您没有 Google 代码开发者 ID,请填写 Google 代码开发者 ID 申请表单。您的开发者 ID 不同于最终用户添加到其网站衡量代码中的其他 ID(例如衡量 ID 或转化 ID)。

概览

要将您的平台与 Google 产品集成,请按以下步骤操作:

  1. 创建与 Google 代码的集成
  2. 更新用户输入结构
  3. 实现 Consent API
  4. 设置事件数据
  5. 验证更新后的集成
  6. 更新用户部署说明

创建与 Google 代码的集成

通过创建与 Google 代码的集成,您的客户可以通过 gtag.js 在其网站的每个网页上部署 Google 衡量产品。在创建与 gtag.js 的集成之前,请务必移除所有现有的旧代码集成(例如 analytics.js)。

若要创建与 Google 代码的集成,请将现有的代码段替换为以下代码段。请确保用户可以将 TAG_ID 替换为自己的代码 ID。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

请注意以下几点:

  • 广告客户可以使用 allow_ad_personalization_signals 参数选择停用再营销等广告个性化功能(请参阅停用个性化广告数据收集)。
  • 理想情况下,Google 代码段在每个网页上应该仅出现一次。该代码段可以包含多个代码 ID。如果存在 gtag.js 的现有实例,则应将新代码 ID 添加到现有代码中。不妨了解详情

更新用户输入结构

无论部署的是哪种 Google 效果衡量产品,客户都应能够通过一个界面提供多种形式的 Google 代码 ID。

例如,下面显示了一种简单的 Google 代码输入方式。应将集成功能界定为 Google 代码的部署。您可以将其描述为一种部署 Google Ads 和 Google Analytics(分析)的方法。

Google 代码 ID 输入框的图片

而在下图中,一个平台可能为 Google Analytics(分析)和 Google Ads 分别设置了不同的用户流,但每个用户流都会转到一个可供用户提供其 Google 代码 ID 的界面。

Google Analytics(分析)和 Google Ads 转到一个输入流程的图片

代码 ID 输入机制应接受使用正则表达式模式 [AZ]{1,3}\w{5,}[\w]* 的多种 ID 形式

Google 代码内置了 Consent API 来管理用户意见征求模式。它能够区分用户对于广告用途 Cookie 和分析用途 Cookie 的同意情况。

预期结果是客户至少集成了 gtag('consent', 'update' {...}) 调用,并且无需客户执行任何操作。这应确保 Google 代码(Google Ads、Floodlight、Google Analytics [分析]、转化链接器)能够读取最新的用户同意情况,并通过参数 &gcs 将其包含在向 Google 发出的网络请求中。

额外的实现步骤是部署或帮助广告客户部署(例如通过界面)gtag('consent', default' {...}) 状态并取消屏蔽 Google 代码(即,无需根据用户同意情况触发),以使意见征求模式能够以知晓用户意见的方式触发代码。

要了解实现详情,请参阅管理用户意见征求设置(网站)

设置事件数据

您应将丰富的事件数据从客户的网站发送到他们的 Google 账号,而且无需客户执行任何操作。例如,您可以添加购买漏斗中的事件(add_to_cartbegin_checkoutadd_payment_infoadd_shipping_infopurchase)、潜在客户发掘事件和注册事件。

以下是有关添加事件的最佳做法:

  • 尽可能记录所有事件
  • 设置至少 8 个核心事件
  • 优先设置电子商务事件

尽可能记录所有事件

如果可能,您应默认设置事件。包括:

  • 转化事件,例如 purchasesign_up
  • 转化事件之前发生的事件,例如 add_to_cart
  • 媒体互动等行为互动,有助于客户了解他们与最终用户的互动情况

您应仅将转化事件代码段添加到转化页(例如购买确认页、表单提交确认页)中。请注意,您仍然应在网站的每个网页上添加 Google 代码。

发送事件时使用的是 event 命令,其中包括您在上述全局网站代码中添加的 Google 代码开发者 ID:

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

例如,您可以使用 event 命令发送 method 值为“Google”的 login 事件:

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

请注意以下几点:

  • 您的开发者 ID <developer ID> 是您的平台专有的唯一 ID。您应将此 ID 附加到每个事件中。
  • 以下参数是可选的,可以忽略:
    • 'value' 是转化的价值(例如购买价格)
    • 'currency' 是用三个字母表示的货币代码,适用于接受多种货币的广告客户
    • 'transaction_id' 是交易的唯一 ID(例如订单 ID);它用于去重。
  • 虽然有些参数是可选的,但建议您尽可能多地为每个事件添加信息。
    • 参数可以提供有关用户如何与您网站或应用互动的更多信息。例如,当用户查看您销售的产品时,您可以添加参数(例如名称、类别和价格)来描述其浏览过的产品。
    • 某些参数会自动填充 Google Analytics(分析)中预构建的维度和指标,以便用户更好地了解他们的客户。

如果您想衡量基于点击的转化事件(例如,点击某个按钮或使用 AJAX 的网站获得动态响应),还可以使用以下代码段:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

设置至少 8 个核心事件

我们建议您设置对网站所有者最有价值的一系列核心事件。建议您至少设置以下事件:

  • view_item_list:当用户查看商品列表(例如产品列表)时。不妨了解详情

    gtag('event', 'view_item_list', {
      item_list_id: "related_products",
      item_list_name: "Related products",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Item",
        currency: "USD",
        discount: 2.22,
        price: 99.9,
        quantity: 1
      }]
    });
    
  • add_to_cart:当用户将一个或多个产品添加到购物车时。不妨了解详情

    gtag('event', 'add_to_cart', {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • begin_checkout:当用户开始一个或多个产品的结账流程时。不妨了解详情

    gtag('event', 'begin_checkout') {
      value: 99.0,
      currency: "USD",
      items: [{
        item_id: "SKU_123",
        item_name: "Test Product",
        price: 99.0,
        currency: ‘USD’,
        quantity: 1,
        item_category: "All Products"
      }]
    });
    
  • purchase:当用户购买一项或多项产品或服务时。不妨了解详情

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
    
  • sign_up:当用户注册并且可以看到最受欢迎的注册方法(例如,Google 账号、电子邮件地址)时不妨了解详情

    gtag('event', 'sign_up', {method: 'web'});
    
  • generate_lead:当用户提交表单时。不妨了解详情

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});
    
  • subscribe:当用户订阅服务或简报时。

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
    
  • book_appointment:当用户预约时。

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
    

其他建议

Google 还支持许多其他事件和参数,尤其是电子商务方面的事件和参数。一般来说,我们建议您设置以下事件:

  • 任何与价值直接相关的成功事件
  • 有助于促成核心转化的成功事件(add_to_cart、sign_up 等)
  • 深度互动和用户互动,有助于广告客户了解他们与最终用户的互动情况

下面列出了深入介绍事件收集功能的其他资源:

我们很乐意与您探讨此架构的潜在扩展,因此如果您有任何建议,请告诉我们。

验证更新后的集成

在将更改推送到生产环境之前,请验证与以下各项的兼容性:

  • 包含 Google Analytics(分析)4 目标账号的 Google 代码
  • 用于再营销和转化衡量的 Google 代码

此外,请使用以下任一工具验证代码能否在所有网页(包括转化页)上正确触发:

  • Google Tag Assistant:通过 Tag Assistant,您可以查看触发了哪些 Google 代码以及代码的触发顺序。Tag Assistant 调试模式会显示正向数据层传递哪些数据,以及哪些事件触发了这些数据交换。
  • Chrome 开发者工具:使用网络标签页过滤包含“google”的请求,以验证数据的发送方式。
  • (服务器端)Google Analytics(分析)实时报告:创建免费的 Google Analytics(分析)账号,然后使用实时报告查看 Google 的服务器是否收到代码命中。

要报告 bug 或提供有关缺失信息的反馈,请填写内容管理系统支持表单。

请尽可能与 Google 分享测试访问权限以便持续进行验证。

更新用户部署说明

更新您的文档,以明确说明如何实现 Google 效果衡量产品。请填写 CMS 集成设置文档审核表单,共享这些说明的草稿,以便我们提供反馈。