Newsbreak 像素集成说明

安装过程

一共分4段

1.创建Newsbreak像素事件

2.安装Shopify客户事件代码

2.安装收款插件代码

4.模拟结账流程-测试激活事件-通过后保存事件

1.创建Newsbreak像素事件

选择Pixel—Shopify(Customize events)

按下图所示勾选对应的4个事件—获得代码和像素事件ID

2.安装客户事件代码（像素ID切换要替换，这里一共有2处需要替换）

// 步骤 1。初始化 JavaScript 像素 SDK（确保排除 HTML）

!(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', '替换像素ID位置1'),
  nbpix('event', 'pageload');

// 步骤 2。使用 analytics.subscribe() 订阅客户事件，并添加跟踪代码

!(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', '替换像素ID位置2'),
    analytics.subscribe("product_viewed", event => {
      nbpix('event', 'view_content', { nb_value: event.data.productVariant.price.amount} );
});
analytics.subscribe("product_added_to_cart", event => {
      nbpix('event', 'add_to_cart', { nb_value: event.data.cartLine.cost.totalAmount.amount} );
});
analytics.subscribe("checkout_started", event => {
      nbpix('event', 'initiate_checkout', { nb_value: event.data.checkout.totalPrice.amount} );
});
analytics.subscribe("checkout_completed", event => {
      nbpix('event', 'complete_payment', { nb_value: event.data.checkout.totalPrice.amount} );
});
    

3.安装收款插件代码

收款插件>More>Intergrations>PPFunnels Extension

插件像素代码（切记替换ID）

// ***************************//
// Nbpix  v1.2

let NB_ID = 'ID-替换像素ID';

// ===================
// DO NOT UPDATE BELOW
!(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', NB_ID);

//InitiateCheckout
itc.addEventHandler('InitiateCheckout', function (payload, additional) {
  nbpix('event', 'initiate_checkout', { nb_value: payload.value });
});

//Purchase
itc.addEventHandler('Purchase', function (payload, additional) {
  nbpix('event', 'complete_payment', { nb_value: payload.value });
});
// =========================//
// Nbpix end
// ***************************//

4.模拟结账流程-测试激活事件-通过后保存事件

1.在自己的店铺找一个产品打开并加入购物车（激活 view_content 和 add_to_cart 事件）

2. 到插件后台创建模拟结账的链接并复制到测试像素的浏览器打开—填写结账信息完成结账（激活initiate_checkout 和 complete_payment事件）

参考视频

模拟信用卡：4242 4242 4242 4242

有效期 01/28 CVV：111