构建 Web Pixel

如何构建 Web Pixels

📘 本教程将学到的内容

本节介绍如何：

使用自定义代码嵌入 App 将 pixel 代码嵌入到您的 Shoplazza 店铺。

通过结账设置为订单完成页面配置 event 追踪。

为不同 events 自定义 pixel 代码。

前提条件

App 要求：从 Shoplazza App 商店安装自定义代码嵌入 App（用于多 event 追踪）。
Pixel ID：第三方平台提供的唯一标识符。
第三方追踪模板：相应平台的代码片段（例如 Google Analytics、Facebook、Criteo）。

如何构建和配置 Web Pixels

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

前往 Shoplazza App 商店并安装自定义代码嵌入 App。
访问自定义代码面板。

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

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

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

示例
```

<script type="text/javascript" src="//dynamic.criteo.com/js/a.js?a=<Pixel ID>" async="true"></script>

```

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

在自定义代码面板中：
• 将触发页面设置为"特定页面"。
• 选择"订单完成页面"。
• 粘贴修改后的订单完成 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`

修改后

<!-- 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，可以通过使用结账页面设置嵌入自定义脚本来实现。

实现步骤：

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

更多示例

以下是三个详细示例，展示如何为追踪不同用户操作创建自定义 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）模板示例。

<!-- 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 -->

 

修改后示例代码：

<!-- 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

修改前：

<!-- 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 -->

修改后示例代码：

<!-- 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 监控并包装第三方代码模板进行报告

修改前：

修改后示例代码：

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

 

示例 4：用户注册 Event

触发页面：所有页面

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

修改前：

修改后示例代码：

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

如何构建 Web Pixels​

前提条件​

如何构建和配置 Web Pixels​

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

前往 Shoplazza App 商店并安装自定义代码嵌入 App。​

访问自定义代码面板。​

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

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

示例​

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

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

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

订单商品字段​

修改后​

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

实现步骤：​

更多示例

示例 1：加入购物车 Event​

示例 2：查看商品 Event​

示例 3：邮件订阅 Event​

修改后示例代码：​

示例 4：用户注册 Event​

修改后示例代码：​

如何构建 Web Pixels

前提条件

如何构建和配置 Web Pixels

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

前往 Shoplazza App 商店并安装自定义代码嵌入 App。

访问自定义代码面板。

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

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

示例

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

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

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

订单商品字段

修改后

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

实现步骤：

示例 1：加入购物车 Event

示例 2：查看商品 Event

示例 3：邮件订阅 Event

修改后示例代码：

示例 4：用户注册 Event

修改后示例代码：