AppLovin Pixel 客户事件接入指引

李锐源 · 2026 年8 月 14 日 07:44

一、概述

本文档用于指导 SHOPLINE 商店通过客户事件接入 AppLovin Axon Pixel。
接入后，当用户从 AppLovin 广告进入 SHOPLINE 商店并浏览页面、查看商品、加入购物车、开始结账或完成购买时，可向 AppLovin 上报相应事件，用于衡量广告效果和优化广告投放。

AppLovin 官方文档：

二、名词解释

名词	通俗解释
AppLovin Ads	AppLovin 的广告投放及效果统计系统
SHOPLINE 客户事件	SHOPLINE 在用户浏览、加购、结账或购买时产生的行为通知
埋点	监听客户事件、整理数据并发送给第三方平台的代码及过程
Axon Pixel	AppLovin 用于接收网站事件的浏览器端跟踪代码
Event Key	商家在 AppLovin 中的事件数据来源标识，用于初始化 Axon Pixel
转化	商品浏览、加入购物车、开始结账或完成购买等目标行为

三、工作原理

用户点击 AppLovin 广告
        ↓
进入 SHOPLINE 商店
        ↓
浏览页面、查看商品、加购、结账或购买
        ↓
SHOPLINE 产生客户事件
        ↓
自定义像素代码监听并转换事件
        ↓
Axon Pixel 向 AppLovin 上报事件
        ↓
AppLovin 统计广告效果

四、兼容主题版本

SHOPLINE Online Store 1.0 / 2.0 / 2.1 / 3.0 主题。

五、事件对应关系

用户行为	SHOPLINE 客户事件	Axon 事件
浏览页面	`page_viewed`	`page_view`
浏览商品	`product_viewed`	`view_item`
加入购物车	`product_added_to_cart`	`add_to_cart`
开始结账	`checkout_started`	`begin_checkout`
完成购买	`checkout_completed`	`purchase`

六、操作流程

1. 获取 Event Key

前往 AppLovin 后台的 Account > General > Keys 获取 Axon Event Key。

后续初始化代码中的 «your-event-key» 必须替换为商家自己的 Event Key。

2. 创建自定义像素代码

在 SHOPLINE 后台的客户事件中，点击「添加自定义像素代码」，创建像素代码。

3. 安装 Axon Pixel 初始化代码

将 AppLovin 官方提供的初始化代码复制到自定义像素代码中，并将 «your-event-key» 替换为商家自己的 Event Key。除替换 Event Key 外，不要修改初始化代码。

事件订阅代码不要一次性全部复制，应根据实际需要，从后文选择对应事件添加在初始化代码下方。

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");

4. 添加商品转换方法

以下公共方法用于将 SHOPLINE 商品数据转换为 Axon item 对象，只需在初始化代码下方添加一次。

// 将 SHOPLINE 商品字段转换为 AppLovin Axon item 字段。
// SHOPLINE spuId 表示商品，skuId 表示具体款式，因此分别对应 item_id 和 item_variant_id。
const toAxonItem = (item) => {
  const axonItem = {
    item_id: item.spuId,
    item_variant_id: item.skuId,
    item_name: item.title,
    price: item.price
  };

  // 仅当客户事件返回 quantity 时才添加，避免为没有数量含义的事件设置默认值。
  if (item.quantity !== undefined) {
    axonItem.quantity = item.quantity;
  }

  return axonItem;
};

Axon item 只有 item_id 是必填字段。image_url 和 item_category_id 是推荐字段，但 SHOPLINE 下列客户事件没有提供符合 Axon 要求的图片地址和数字类目 ID，因此示例不传这两个字段。若商店能从其他可靠数据源取得这些值，可参照 Axon item 对象及类目 ID 添加。

5. 按需添加事件代码

每个 SHOPLINE 事件的 event.data 结构不同，因此每段订阅代码独立读取自己的字段。只需复制实际需要上报的事件代码。

5.1 页面浏览 `page_viewed`

SHOPLINE 页面浏览事件的 event.data 结构说明：

{
  title: string; // 当前页面标题
  url: string; // 当前页面完整 URL
  path: string; // 当前页面路径
}

添加以下代码：

analytics.subscribe("page_viewed", () => {
  axon("track", "page_view");
});

5.2 商品浏览 `product_viewed`

SHOPLINE 商品浏览事件的 event.data 结构说明：

{
  spuId: string; // SPU ID
  skuId: string; // SKU ID
  skuItemNo: string; // SKU 商品编号
  currency: string; // 币种
  title: string; // 商品标题
  variant: string; // 商品规格
  price: number; // 商品价格
  category: string; // 商品分类
  collectionId: string; // 商品集 ID
  collectionName: string; // 商品集名称
}

添加以下代码：

analytics.subscribe("product_viewed", (event) => {
  const data = event.data || {};

  axon("track", "view_item", {
    currency: data.currency,
    value: data.price,
    items: [toAxonItem(data)]
  });
});

5.3 加入购物车 `product_added_to_cart`

SHOPLINE 加入购物车事件的 event.data 结构说明：

{
  cartId: string; // 购物车 ID
  value: number; // 本次加入购物车的商品总金额
  currency: string; // 币种
  list: {
    spuId: string; // SPU ID
    skuId: string; // SKU ID
    skuItemNo: string; // SKU 商品编号
    title: string; // 商品标题
    variant: string; // 商品规格
    price: number; // 商品价格
    quantity: number; // 商品数量
    category: string; // 商品分类
  }[]; // 本次加入购物车的商品列表
}

添加以下代码：

analytics.subscribe("product_added_to_cart", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "add_to_cart", {
    currency: data.currency,
    value: data.value,
    items
  });
});

5.4 开始结账 `checkout_started`

SHOPLINE 开始结账事件的 event.data 结构说明：

{
  value: number; // 结账商品总金额
  currency: string; // 币种
  list: {
    spuId: string; // SPU ID
    skuId: string; // SKU ID
    skuItemNo: string; // SKU 商品编号
    title: string; // 商品标题
    variant: string; // 商品规格
    price: number; // 商品价格
    quantity: number; // 商品数量
    category: string; // 商品分类
  }[]; // 结账商品列表
}

添加以下代码：

analytics.subscribe("checkout_started", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "begin_checkout", {
    currency: data.currency,
    value: data.value,
    items
  });
});

5.5 购买完成 `checkout_completed`

SHOPLINE 购买完成事件的 event.data 结构说明：

{
  orderSeq: string; // 订单号
  appOrderSeq: string; // 应用订单号
  value: number; // 订单商品总金额
  shippingAmount: number; // 运费
  taxAmount: number; // 税费
  coupon?: string; // 优惠码
  currency: string; // 币种
  list: {
    spuId: string; // SPU ID
    skuId: string; // SKU ID
    skuItemNo: string; // SKU 商品编号
    title: string; // 商品标题
    variant: string; // 商品规格
    price: number; // 商品价格
    quantity: number; // 商品数量
    category: string; // 商品分类
  }[]; // 订单商品列表
}

添加以下代码：

analytics.subscribe("checkout_completed", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "purchase", {
    currency: data.currency,
    items,
    shipping: data.shippingAmount,
    tax: data.taxAmount,
    transaction_id: data.orderSeq,
    value: data.value
  });
});

6. 完整事件代码示例

将 «your-event-key» 替换为商家自己的 Event Key。

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");

const toAxonItem = (item) => {
  const axonItem = {
    item_id: item.spuId,
    item_variant_id: item.skuId,
    item_name: item.title,
    price: item.price
  };

  // 仅当客户事件返回 quantity 时才添加，避免为没有数量含义的事件设置默认值。
  if (item.quantity !== undefined) {
    axonItem.quantity = item.quantity;
  }

  return axonItem;
};

analytics.subscribe("page_viewed", () => {
  axon("track", "page_view");
});

analytics.subscribe("product_viewed", (event) => {
  const data = event.data || {};

  axon("track", "view_item", {
    currency: data.currency,
    value: data.price,
    items: [toAxonItem(data)]
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "add_to_cart", {
    currency: data.currency,
    value: data.value,
    items
  });
});

analytics.subscribe("checkout_started", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "begin_checkout", {
    currency: data.currency,
    value: data.value,
    items
  });
});

analytics.subscribe("checkout_completed", (event) => {
  const data = event.data || {};
  const items = (data.list || []).map((item) => toAxonItem(item));

  axon("track", "purchase", {
    currency: data.currency,
    items,
    shipping: data.shippingAmount,
    tax: data.taxAmount,
    transaction_id: data.orderSeq,
    value: data.value
  });
});

7. 保存并连接

添加代码后点击「保存」，再点击「连接」。

AppLovin Pixel 客户事件接入指引

一、概述

二、名词解释

三、工作原理

四、兼容主题版本

五、事件对应关系

六、操作流程

1. 获取 Event Key

2. 创建自定义像素代码

3. 安装 Axon Pixel 初始化代码

4. 添加商品转换方法

5. 按需添加事件代码

5.1 页面浏览 page_viewed

5.2 商品浏览 product_viewed

5.3 加入购物车 product_added_to_cart

5.4 开始结账 checkout_started

5.5 购买完成 checkout_completed

6. 完整事件代码示例

7. 保存并连接

5.1 页面浏览 `page_viewed`

5.2 商品浏览 `product_viewed`

5.3 加入购物车 `product_added_to_cart`

5.4 开始结账 `checkout_started`

5.5 购买完成 `checkout_completed`