Axon Pixel × Google Tag Manager 集成指南

在本指南中，我们假设您拥有一个带有数据层 (Data Layer) 的 Google 跟踪代码管理器 (GTM) 账户，并可通过该账户接收电商事件信息，如产品查看、加入购物车和结账等。

此外，我们还假设您熟悉 GTM 的核心概念，包括跟踪代码 (Tags)、触发器 (Triggers)、变量 (Variables) 和数据层。对于如何设置数据层，以向 GTM 提供数据，本指南不做阐释。

注意

如果您有 Shopify 网站，请集成 Axon Shopify 应用。

安装 Axon Pixel

注意

在开始之前，请检查网站所有页面的 GTM 配置，确保运作正常。 如果您的网站在无头模式 (Headless Mode) 下运行 Shopify，请仔细检查，确保结账页面上也能触发 GTM。 否则，请安装 Shopify 应用，以便捕捉结账页面的事件。

1. 登录您的 Google Tag Manager (跟踪代码管理器)账户。 点击您的网站容器，然后在 Tags 下点击 New。 对于 Tag Configuration，选择 Custom HTML。 输入名称，例如 “Axon — Init”。

2. 将以下代码复制并粘贴到您的标签中。 将 “«your-event-key»” 替换为您的 AppLovin 账户 中的 key。

   <script>
     var AXON_EVENT_KEY="«your-event-key»";
     !function(e,r){var t=["https://s.axon.ai/pixel.js","https://res4.applovin.com/p/l/loader.iife.js"];if(!e.axon){var a=e.axon=function(){a.performOperation?a.performOperation.apply(a,arguments):a.operationQueue.push(arguments)};a.operationQueue=[],a.ts=Date.now(),a.eventKey=AXON_EVENT_KEY;for(var n=r.getElementsByTagName("script")[0],o=0;o<t.length;o++){var i=r.createElement("script");i.async=!0,i.src=t[o],n.parentNode.insertBefore(i,n)}}}(window,document);
   
     axon("init");
   </script>

3. 在 Triggering 下点击，然后选择 Initialization - All Pages。 这能确保 Axon Pixel 在所有页面上加载。 点击 Save。

警告

请务必在网站的每个页面上加载并初始化 Axon Pixel。 确保每个接收事件的页面都会触发 GTM Initialization - All Pages Trigger。

注意

请至少提供 page_view、view_item、add_to_cart、begin_checkout 和 purchase 事件。如果您的网站使用这些事件，还请添加 sign_up 或 login。

使用 Axon Pixel 跟踪事件

请使用以下语法向 Axon 发送电商事件。每个事件都应在其对应的事件出现在数据层中时触发。

<script>
  axon("track", «event-name», «event-data»);
</script>

参数

名称	类型	描述
event_name	string	该事件的名称。请参阅 Axon Pixel 事件和对象，了解可用的事件。
event_data	object	该事件的数据。请查看 Axon Pixel 事件和对象，了解可发送的数据。(请注意：发送 page_view 事件时不需要发送 event_data。)

所有事件都需要 event_name 参数。除 page_view 外，每个事件都需要特定 event_data，请在下方具体事件对应版块查阅描述。

将数据发送至 Axon Pixel

在 GTM 中填充事件的方法有两种：

方法 1：单一 GTM 变量

针对每个需要 event_data 的事件，AppLovin 建议您创建一个 GTM 变量作为数据负载。示例如下：

<script>
  axon("track", "add_to_cart", {{Axon - Add To Cart}} );
</script>

(其中 {{Axon - Add To Cart}} 是您创建的 GTM 变量)。

方法 2：组合使用 GTM 变量

您也可以创建由多个变量组成的对象。示例如下：

<script>
  axon("track", "add_to_cart",
    {
      "currency": "USD",
      "value": {{Axon - Add To Cart - Value}},
      "items": {{Axon - Add To Cart - Items}}
    }
  )
</script>

注意

Axon Pixel 可兼容 Google Analytics 4 (GA4) API。如果您的数据层已进行配置，并以 GA4 格式存储数据，那么您就可以将这些数据层变量直接发送至跟踪代码本身。例如，如果 {{GA - Ecommerce}} 指数据层的电商字段，且以 GA4 形式设置，那么您就可以通过以下方式将其直接发送至 Pixel：

<script>
  axon("track", "add_to_cart", {{GA - Ecommerce}} );
</script>

这样，您就无需创建任何中间变量。

如果您的数据层设置与 GA4 不同，则可能需要为 Axon Pixel 创建新变量。

增强用户识别 (推荐)

Axon Pixel 会设置第一方 Cookie _axwrt 来识别用户身份。该 Cookie 会自动附加在发送至您网站的每个请求中。为了增强用户识别，AppLovin 强烈建议您在网站后端进行下列操作：

只要您在 HTTP 请求中看到 Cookie _axwrt时，请设置 HTTP 响应，使其包含一个标头。该标头应设置新的第一方 HTTP Cookie axwrt (不带下划线)，有效期为一年。

• 此 Cookie 的值应与请求中传递的相应 Cookie 值相同。
• Cookie 的域名应当是您的站点，并以半角句点为前缀。例如，如果您的网站是 mysite.com，那么域名属性应为 .mysite.com。请注意：不要在域名中包含 “www”。
• Cookie 的路径应为 /。
• 请勿将 Cookie 设置为 HttpOnly。

例如，如果您的网站收到 HTTP 请求，请求中的 Cookie _axwrt 值为 xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx，那么就应当在响应中添加下列标头：

Set-Cookie: axwrt=xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx;
Expires=«One Year from Today»; Domain=«.mysite.com»; Path=/; SameSite=Lax;