NewsBreak Pixel通过客户事件接入指引

Web Pixel
,
1

一、概述

本文档用于指导 SHOPLINE 商店通过客户事件接入 NewsBreak Pixel。

接入后，当用户通过 NewsBreak 广告进入 SHOPLINE 商店并产生浏览商品、加入购物车、提交支付信息、开始结账、完成购买、完成注册或搜索等行为时，可向 NewsBreak 上报对应转化事件，用于衡量广告效果。

NewsBreak 官方文档：

二、名词解释

名词 通俗解释
NewsBreak Ad Manager NewsBreak 的广告投放及效果管理平台
SHOPLINE 客户事件 SHOPLINE 在用户浏览、加购、结账或购买时产生的行为通知
埋点 监听客户事件、整理数据并发送给第三方平台的代码及过程
NewsBreak Pixel 安装在商店中、负责向 NewsBreak 上报转化事件的追踪工具
Pixel ID NewsBreak 为 Pixel 分配的唯一标识
转化 浏览商品、加入购物车、开始结账或完成购买等目标行为

三、工作原理

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

四、兼容主题版本

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

五、事件对应关系

用户行为 SHOPLINE 客户事件 NewsBreak Pixel 事件
页面加载 Base Code 自动上报 pageload
浏览商品 product_viewed view_content
加入购物车 product_added_to_cart add_to_cart
提交支付信息 payment_info_submitted add_payment_info
开始结账 checkout_started initiate_checkout
完成购买 checkout_completed complete_payment
完成注册 registration_completed complete_registration
搜索 search_submitted search

六、操作流程

1. 创建 NewsBreak Pixel Event 并获取 Pixel ID

登录 NewsBreak Ad Manager，进入「Tools」>「Event Management」>「Create/test web event」。

image
image1018×590 85.4 KB

配置需要追踪的 NewsBreak Pixel Event。

image
image713×618 55.3 KB

在 NewsBreak 提供的 Base Code 中查看 Pixel ID。

后续代码中的 [pixel ID] 必须替换为商家自己的 NewsBreak Pixel ID。

image
image1115×721 88.3 KB

2. 创建自定义像素代码

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

image
image1920×873 94.5 KB

3. 安装 NewsBreak Base Code

将 NewsBreak 官方提供的以下代码复制到自定义像素代码中，并将 [pixel ID] 替换为商家自己的 Pixel ID。

!(function (e, n, t, i, p, a, s) {
  e[i] ||
    (((p = e[i] =
      function () {
        p.process ? p.process.apply(p, arguments) : p.queue.push(arguments);
      }).queue = []),
    (p.t = +new Date()),
    ((a = n.createElement(t)).async = 1),
    (a.src = 'https://static.newsbreak.com/business/tracking/nbpixel.js?t=' + 864e5 * Math.ceil(new Date() / 864e5)),
    (s = n.getElementsByTagName(t)[0]).parentNode.insertBefore(a, s));
})(window, document, 'script', 'nbpix'),
  nbpix('init', '[pixel ID]'),
  nbpix('event', 'pageload');

上述 Base Code 为 NewsBreak 官方代码，除替换 [pixel ID] 外不要修改。

4. 按需添加事件代码

将需要上报的 SHOPLINE 客户事件代码添加在 NewsBreak Base Code 下方。存在多个事件时，按顺序添加即可。

image
image1920×850 122 KB

4.1 商品浏览 product_viewed

商品浏览时，将 SHOPLINE 商品价格作为 nb_value 上报至 NewsBreak view_content 事件。

analytics.subscribe('product_viewed', (event) => {
  nbpix('event', 'view_content', { nb_value: event.data.price });
});

4.2 加入购物车 product_added_to_cart

加入购物车时，将本次加入购物车的商品金额作为 nb_value 上报至 NewsBreak add_to_cart 事件。

analytics.subscribe('product_added_to_cart', (event) => {
  nbpix('event', 'add_to_cart', { nb_value: event.data.value });
});

4.3 提交支付信息 payment_info_submitted

提交支付信息时，将当前结账金额作为 nb_value 上报至 NewsBreak add_payment_info 事件。

analytics.subscribe('payment_info_submitted', (event) => {
  nbpix('event', 'add_payment_info', { nb_value: event.data.value });
});

4.4 开始结账 checkout_started

开始结账时，将结账金额作为 nb_value 上报至 NewsBreak initiate_checkout 事件。

analytics.subscribe('checkout_started', (event) => {
  nbpix('event', 'initiate_checkout', { nb_value: event.data.value });
});

4.5 完成购买 checkout_completed

完成购买时，将订单金额作为 nb_value 上报至 NewsBreak complete_payment 事件。

analytics.subscribe('checkout_completed', (event) => {
  nbpix('event', 'complete_payment', { nb_value: event.data.value });
});

4.6 完成注册 registration_completed

完成注册时，将 SHOPLINE 用户 ID 作为 nb_value 上报至 NewsBreak complete_registration 事件。

analytics.subscribe('registration_completed', (event) => {
  nbpix('event', 'complete_registration', { nb_value: event.data.user_id });
});

4.7 搜索 search_submitted

用户搜索时，将搜索关键词作为 nb_value 上报至 NewsBreak search 事件。

analytics.subscribe('search_submitted', (event) => {
  nbpix('event', 'search', { nb_value: event.data.keyword });
});

5. 保存并连接

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

image
image1920×843 124 KB