# AppLovin Pixel 客户事件接入指引

**URL:** <https://community.shoplineapp.cn/t/topic/181>\
**Category:** Web Pixel\
**Tags:** applovin, pixel\
**Created:** [2026 年8 月 14 日 07:44 UTC](https://community.shoplineapp.cn/t/topic/181 "2026-08-14T07:44:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![李锐源](https://community.shoplineapp.cn/user_avatar/community.shoplineapp.cn/%E6%9D%8E%E9%94%90%E6%BA%90/32/503_2.png) [@李锐源](https://community.shoplineapp.cn/u/%E6%9D%8E%E9%94%90%E6%BA%90)\
发布日期： [2026 年8 月 14 日 07:44 UTC](https://community.shoplineapp.cn/t/topic/181/1 "2026-08-14T07:44:32Z")

</div>

## 一、概述

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

AppLovin 官方文档：

- [Axon Support Center](https://developers.axon.ai/zh/)
- [电商事件与数据对象](https://developers.axon.ai/zh/ecommerce/events-and-objects/)
- [验证 Axon Pixel](https://developers.axon.ai/zh/growth/promoting-your-websites/track-and-optimize/validate-your-pixel)

## 二、名词解释

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

## 三、工作原理

```latex
用户点击 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](https://ads.applovin.com/account/api-keys) 获取 Axon Event Key。

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

#### 2. 创建自定义像素代码

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

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/211efb1cf4143076b72eaa0c040e27a80b7840f8.jpeg)

#### 3. 安装 Axon Pixel 初始化代码

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

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

```javascript
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 对象，只需在初始化代码下方添加一次。

```javascript
// 将 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](https://developers.axon.ai/zh/ecommerce/events-and-objects/#category-ids) 添加。

#### 5. 按需添加事件代码

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

##### 5.1 页面浏览 `page_viewed`

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

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

```

添加以下代码：

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

```

##### 5.2 商品浏览 `product_viewed`

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

```typescript
{
  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; // 商品集名称
}

```

添加以下代码：

```javascript
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` **结构说明** ：

```typescript
{
  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; // 商品分类
  }[]; // 本次加入购物车的商品列表
}

```

添加以下代码：

```javascript
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` **结构说明** ：

```typescript
{
  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; // 商品分类
  }[]; // 结账商品列表
}

```

添加以下代码：

```javascript
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` **结构说明** ：

```typescript
{
  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; // 商品分类
  }[]; // 订单商品列表
}

```

添加以下代码：

```javascript
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。

```javascript
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. 保存并连接

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

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/3d42d1e15d5ba67a18e468f5c8d62ba210857cb2.jpeg)