# 构建 Web Pixel

> 分步指引：用自定义代码嵌入应用把 pixel 代码装进 Shoplazza 店铺，并为订单完成页配置事件追踪。

## 如何构建 Web Pixels

:::note[本教程将学到的内容]
本节介绍如何：

1. 使用自定义代码嵌入 App 将 pixel 代码嵌入到您的 Shoplazza 店铺。
2. 通过结账设置为订单完成页面配置 event 追踪。
3. 为不同 events 自定义 pixel 代码。
:::

## 前提条件

* **App 要求**：从 Shoplazza App 商店安装[自定义代码嵌入 App](https://appstore.shoplazza.com/listing/153/custom_script_tag/?locale=en-US\&utm_source=store_admin\&from=store_admin\&store_id=1965351\&user_id=3e8269a2-4a23-480d-a37a-c3301580ebd5\&keyword=customize%20code\&page=1\&order_by=best_match)（用于多 event 追踪）。
* **[Pixel ID](/docs/theme/theme-features/tracking-and-analytics/platform-pixel-event-template)**：第三方平台提供的唯一标识符。
* **[第三方追踪模板](/docs/theme/theme-features/tracking-and-analytics/platform-pixel-event-template)**：相应平台的代码片段（例如 Google Analytics、Facebook、Criteo）。

## 如何构建和配置 Web Pixels

请根据你需要追踪的内容选择集成方式。两种方式及其步骤如下：

```mermaid
flowchart LR
    A{你需要追踪什么?} -- 跨多个页面的多种 event --> B[方式一: 自定义代码嵌入 App]
    A -- 仅订单完成 --> C[方式二: 结账页面设置]
    B --> B1[安装自定义代码嵌入 App]
    B1 --> B2[访问自定义代码面板]
    B2 --> B3[全局代码: 触发设为所有页面, 粘贴基础代码, 替换 Pixel ID]
    B3 --> B4[特定页面代码: 设为特定页面, 选择页面, 粘贴修改后代码, 替换变量]
    C --> C1[设置 - 结账设置 - 附加脚本]
    C1 --> C2[粘贴自定义 JavaScript]
    C2 --> C3[在订单完成页面运行]
```

### 方式一：使用自定义代码嵌入 App

* #### 前往 Shoplazza App 商店并安装[自定义代码嵌入 App](https://appstore.shoplazza.com/listing/153/custom_script_tag/?locale=en-US\&utm_source=store_admin\&from=store_admin\&store_id=1965351\&user_id=3e8269a2-4a23-480d-a37a-c3301580ebd5\&keyword=customize%20code\&page=1\&order_by=best_match)。
* #### 访问自定义代码面板。

* #### 创建全局和特定页面追踪代码

  #### 1. 创建适用于所有页面的自定义代码（例如，全局加载 pixel）。

  > 在自定义代码面板中：\
  > 	•	将触发页面设置为"所有页面"。\
  > 	•	粘贴第三方平台提供的基础 Pixel 代码。\
  > &#x9;•	将 `<Pixel ID>` 等占位符替换为平台提供的唯一 ID。

  #### 示例

  

  ```html
  <!-- Criteo 加载器文件 -->
  <script type="text/javascript" src="//dynamic.criteo.com/js/a.js?a=<Pixel ID>" async="true"></script>
  <!-- END Criteo 加载器文件 -->
  ```

* #### 2. 创建针对特定页面的自定义代码（例如，订单完成页面的订单 event 追踪）

  > 在自定义代码面板中：\
  > &#x9;•	将触发页面设置为"特定页面"。\
  > &#x9;•	选择"订单完成页面"。\
  > &#x9;•	粘贴修改后的订单完成 event 的 Pixel 代码。

  #### 示例 -- 特定页面：订单完成页面

  

  #### 替换提供的模板中的占位符参数

  | **字段**       | **说明**                 | **示例代码**                          |
  | -------------- | ------------------------ | ------------------------------------- |
  | **Currency**   | 订单的货币代码           | `window.ORDER.currency_code`          |
  | **Order Total**| 订单总价                 | `window.ORDER.total_price`            |
  | **Order ID**   | 订单的唯一标识符         | `window.ORDER.id`                     |
  | **EMAIL**      | 收件人的电子邮件地址     | `window.ORDER.shipping_address.email` |
  | **Phone**      | 收件人的电话号码         | `window.ORDER.shipping_address.phone` |

  #### **订单商品字段**

  
    
      
        
          **字段**
        

        
          **说明**
        

        
          **示例代码**
        
      
    

    
      
        
          **order.line\_items**
        

        

        

        
          window\.ORDER.line\_items.map(function (item) \{\
            return \{\
              id: item.variant\_id,\
              price: item.price,\
              quantity: item.quantity,\
              // ...其他商品属性\
            };\
          });
        
      

      
        
          **line\_items ID**
        

        
          商品 variant 的唯一 ID
        

        
          `item.variant_id`
        
      

      
        
          **line\_items Price**
        

        
          商品价格
        

        
          `item.price`
        
      

      
        
          **line\_items Quantity**
        

        
          购买数量
        

        
          `item.quantity`
        
      
    
  

  #### 修改后

  ```html
  <!-- Criteo 购买 Tag -->
  <script type="text/javascript">
      window.criteo_q.push(
        { event: "setAccount", account: 891781 },
        { event: "setEmail", email: window.ORDER.shipping_address.email },
        { event: "setSiteType", type: deviceType },
        {
          event: "trackTransaction",
          id: window.ORDER.id,
          currency: window.ORDER.currency_code,
          item: window.ORDER.line_items.map(function (item) {
            return {
              id: item.variant_id,
              price: item.price,
              quantity: item.quantity,
              // ...其他商品属性
            };
          }),
        }
      );
    </script>
    
  <!-- END Criteo 购买 Tag -->
  ```

  

  

### 方式二：使用结账页面设置 - 附加脚本

如果您只需要追踪**订单完成 events**，可以通过使用**结账页面设置**嵌入自定义脚本来实现。

#### 实现步骤：

1. 在 Shoplazza 管理后台导航至**设置** > **结账设置**。
2. 找到**附加脚本**部分。
3. 将您的自定义 JavaScript 代码粘贴到提供的字段中。此代码将在顾客成功结账后在**订单完成页面**运行。

![](https://cnres.appracle.com/feebbd8a7c6a5abb464c8828dc6866f6.png)

# 更多示例

以下是三个详细示例，展示如何为追踪不同用户操作创建自定义 events，包括加入购物车、查看商品详情和邮件订阅。这些示例展示了如何使用 Shoplazza 的可用数据字段填充第三方 pixel 代码模板。

## 示例 1：加入购物车 Event

**触发页面**：所有页面

要追踪顾客何时将商品加入购物车，请使用 `dj.addToCart` event 监听器包装第三方平台的报告代码。

**替换平台提供代码模板中的占位符参数**

以下是可用字段及其对应值，可以从 `detail` 变量访问这些字段，以填充 event 追踪所需的参数。

| **字段**                 | **说明**                    | **代码**                                    |
| ------------------------ | --------------------------- | ------------------------------------------- |
| **Currency**             | 购物车的货币代码            | `window.C_SETTINGS.currency_code`           |
| **Product Price**        | 添加商品的价格              | `detail.item_price`                         |
| **Variant ID**           | 商品 variant 标识符         | `detail.variant_id`                         |
| **Product ID**           | 商品标识符                  | `detail.product_id`                         |
| **Product Name**         | 商品名称                    | `detail.name`                               |
| **Quantity Added**       | 添加商品的数量              | `detail.quantity`                           |
| **Email (if logged in)** | 顾客的电子邮件地址          | `window.C_SETTINGS.customer.customer_email` |

**修改前：**\
以下是 Criteo 提供的加入购物车 event（Add To Cart Tag）模板示例。

```html
<!-- Criteo 加入购物车 Tag -->
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent)
    ? "t"
    : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
        navigator.userAgent
      )
    ? "m"
    : "d";
  window.criteo_q.push(
    { event: "setAccount", account: 89178 },
    { event: "setEmail", email: "#用户邮件地址#" },
    { event: "setSiteType", type: deviceType },
    {
      event: "addToCart",
      item: [
        { id: "#商品 Id#", price: "#价格#", quantity: "#数量#" },
      ],
    }
  );
</script>
<!-- END Criteo 加入购物车 Tag -->

 
```

**修改后示例代码：**

```html
<!-- Criteo 加入购物车 Tag -->
<script type="text/javascript">
  document.addEventListener("dj.addToCart", function (e) {
    const detail = e.detail;
    // 第三方平台报告代码
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent)
      ? "t"
      : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
          navigator.userAgent
        )
      ? "m"
      : "d";
    window.criteo_q.push(
      { event: "setAccount", account: account_id },
      {
        event: "setEmail",
        email: window.C_SETTINGS.customer.customer_email || "",
      },
      { event: "setSiteType", type: deviceType },
      {
        event: "addToCart",
        currency: window.C_SETTINGS.currency_code,
        item: [
          {
            id: detail.variant_id,
            price: detail.item_price,
            quantity: detail.quantity,
          },
        ],
      }
    );
  });
</script>
<!-- END Criteo 加入购物车 Tag -->

 
```

## 示例 2：查看商品 Event

**触发页面**：所有页面

要追踪顾客何时查看商品，请使用 dj.viewContent event 监听器。

**替换平台提供代码模板中的占位符参数**

| 占位符               | 示例变量                                       |
| :------------------- | :--------------------------------------------- |
| Currency             | `window.C_SETTINGS.currency_code`              |
| Product Price        | `detail.selected.price`                        |
| Product Variant ID   | `detail.selected.id`                           |
| Product ID           | `detail.product.id`                            |
| Product Name         | `detail.product.title`                         |
| Quantity             | `detail.qty`                                   |
| Email (if logged in) | \`window\.C\_SETTINGS.customer.customer\_email |

**修改前：**

```html
<!-- Criteo 商品 Tag -->
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent)
    ? "t"
    : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
        navigator.userAgent
      )
    ? "m"
    : "d";
  window.criteo_q.push(
    { event: "setAccount", account: 89178 },
    { event: "setEmail", email: "##用户邮件地址##" },
    { event: "setSiteType", type: deviceType },
    { event: "viewItem", item: "##商品 ID##" }
  );
</script>
<!-- END Criteo 商品 Tag -->
```

**修改后示例代码：**

```html
<!-- Criteo 商品 Tag -->
<script type="text/javascript">
  document.addEventListener("dj.viewContent", function (e) {
    const detail = e.detail;
    // 第三方平台报告代码
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent)
      ? "t"
      : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(
          navigator.userAgent
        )
      ? "m"
      : "d";
    window.criteo_q.push(
      { event: "setAccount", account: 89178 },
      {
        event: "setEmail",
        email: window.C_SETTINGS.customer.customer_email || "",
      },
      { event: "setSiteType", type: deviceType },
      {
        event: "viewItem",
        item: detail.selected.id,
        price: detail.selected.price,
      }
    );
  });
</script>
<!-- END Criteo 商品 Tag -->
```

## 示例 3：邮件订阅 Event

**触发页面**：所有页面

使用 `dj.emailSubscription` Event 监控并包装第三方代码模板进行报告

**修改前：**

![](https://cnres.appracle.com/798df41fcaa27f982e3549db0d0756c8.png)

#### **修改后示例代码：**

```html
<script type="text/javascript">
  document.addEventListener("dj.emailSubscription", function () {
    // 用 event 监听器包装第三方代码模板
  });
</script>

 
```

## 示例 4：用户注册 Event

**触发页面**：所有页面

使用 dj.completeRegistration Event 监控并包装第三方代码模板进行报告

**修改前：**

![](https://cnres.appracle.com/de9edd12afd3a5db4b6c25192770e448.png)

#### **修改后示例代码：**

```html
<!-- 追踪转化 event，请在以下代码中使用 EXACT 'event', 'complete_registration' -->
<script>
  document.addEventListener("dj.completeRegistration", function () {
    nbpix("event", "complete_registration");
  });
</script>
```