如果之前安装过Newsbreak像素代码，请先清除原来的代码！！！
一共分5段
1.创建Newsbreak像素事件
2. 安装Shopify模板代码
3.安装Shopify客户事件代码
4.安装收款插件代码
5.模拟结账流程-测试激活事件-通过后保存事件
1.创建Newsbreak像素事件
选择Pixel—Shopify(Customize events)
按下图所示勾选对应的5个事件—获得代码和像素事件ID
2.安装Shopify模板代码
编辑主题模板文件 – 找到theme.liquid文件 – 编辑该文件 –
在 <head>插入代码处</head> 标签中插入下面的代码 – 修改NB像素ID为自己的 – 保存即可
<script type="text/javascript">
// =========================//
// Newsbreak v1.3
// ***************************//
const NB_ID = 'ID-XXXXXXXXXXXXXXXXXXX';
// ===================
// DO NOT UPDATE BELOW
// ===================
!(function (e, n, t, i, p, a, s) {
e[i] ||
(((p = e[i] =
function () {
p.process ? p.process.apply(p, argument) : p.queue.push(arguments);
}).queue = []),
(pt = +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.trim()),
nbpix('event', 'pageload');
(async () => {
//save cid params to localstorage
var url = new URL(window.location.href);
var c_id = url.searchParams.get('newsbreak_cid');
if (c_id) {
localStorage.setItem('_newsbreak_click_id', c_id);
}
})()
// =========================//
// Newsbreak end
// ***************************//
</script>3.安装客户事件代码
Shopify Settings > Customer events > Add custom pixel
// =========================//
// Newsbreak v1.3
// ***************************//
const NB_ID = 'ID-XXXXXXXXXXXXXXXXXXX';
// ===================
// 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.trim()),
analytics.subscribe("checkout_completed", event => {
nbpix('event', 'complete_payment', {nb_value: event.data.checkout.totalPrice.amount});
});
analytics.subscribe("payment_info_submitted", event => {
nbpix('event', 'add_payment_info', {nb_value: event.data.checkout.totalPrice.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("product_viewed", event => {
nbpix('event', 'view_content', {nb_value: event.data.productVariant.price.amount});
});
analytics.subscribe("search_submitted", event => {
nbpix('event', 'search');
});
// =========================//
// Newsbreak end
// ***************************//4.安装收款插件代码
收款插件 – Settings – Intergrations – PPFunnel Extentions 加入下方代码
修改像素ID为自己的 – 保存即可
// ***************************//
// Newsbreak v1.3
// change your config
const NB_ID = "ID-XXXXXXXXXXXXXXXXXXX"
// ===================
// DO NOT UPDATE BELOW
// ===================
!function () { "use strict"; function y(t, i) { i ? (u[0] = u[16] = u[1] = u[2] = u[3] = u[4] = u[5] = u[6] = u[7] = u[8] = u[9] = u[10] = u[11] = u[12] = u[13] = u[14] = u[15] = 0, this.blocks = u) : this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], t ? (this.h0 = 3238371032, this.h1 = 914150663, this.h2 = 812702999, this.h3 = 4144912697, this.h4 = 4290775857, this.h5 = 1750603025, this.h6 = 1694076839, this.h7 = 3204075428) : (this.h0 = 1779033703, this.h1 = 3144134277, this.h2 = 1013904242, this.h3 = 2773480762, this.h4 = 1359893119, this.h5 = 2600822924, this.h6 = 528734635, this.h7 = 1541459225), this.block = this.start = this.bytes = this.hBytes = 0, this.finalized = this.hashed = !1, this.first = !0, this.is224 = t } function s(t, i, h) { var r = typeof t; if ("string" == r) { for (var s, e = [], n = t.length, o = 0, a = 0; a < n; ++a)(s = t.charCodeAt(a)) < 128 ? e[o++] = s : (s < 2048 ? e[o++] = 192 | s >>> 6 : (s < 55296 || 57344 <= s ? e[o++] = 224 | s >>> 12 : (s = 65536 + ((1023 & s) << 10 | 1023 & t.charCodeAt(++a)), e[o++] = 240 | s >>> 18, e[o++] = 128 | s >>> 12 & 63), e[o++] = 128 | s >>> 6 & 63), e[o++] = 128 | 63 & s); t = e } else { if ("object" != r) throw new Error(l); if (null === t) throw new Error(l); if (p && t.constructor === ArrayBuffer) t = new Uint8Array(t); else if (!(Array.isArray(t) || p && ArrayBuffer.isView(t))) throw new Error(l) } 64 < t.length && (t = new y(i, !0).update(t).array()); var f = [], u = []; for (a = 0; a < 64; ++a) { var c = t[a] || 0; f[a] = 92 ^ c, u[a] = 54 ^ c } y.call(this, i, h), this.update(u), this.oKeyPad = f, this.inner = !0, this.sharedMemory = h } var l = "input is invalid type", n = (A = "object" == typeof window) ? window : {}; n.JS_SHA256_NO_WINDOW && (A = !1); var t = !A && "object" == typeof self, e = !n.JS_SHA256_NO_NODE_JS && "object" == typeof process && process.versions && process.versions.node; e ? n = global : t && (n = self); var i = !n.JS_SHA256_NO_COMMON_JS && "object" == typeof module && module.exports, h = "function" == typeof define && define.amd, p = !n.JS_SHA256_NO_ARRAY_BUFFER && "undefined" != typeof ArrayBuffer, a = "0123456789abcdef".split(""), r = [-2147483648, 8388608, 32768, 128], f = [24, 16, 8, 0], b = [1116352408, 1899447441, 3049323471, 3921009573, 961987163, 1508970993, 2453635748, 2870763221, 3624381080, 310598401, 607225278, 1426881987, 1925078388, 2162078206, 2614888103, 3248222580, 3835390401, 4022224774, 264347078, 604807628, 770255983, 1249150122, 1555081692, 1996064986, 2554220882, 2821834349, 2952996808, 3210313671, 3336571891, 3584528711, 113926993, 338241895, 666307205, 773529912, 1294757372, 1396182291, 1695183700, 1986661051, 2177026350, 2456956037, 2730485921, 2820302411, 3259730800, 3345764771, 3516065817, 3600352804, 4094571909, 275423344, 430227734, 506948616, 659060556, 883997877, 958139571, 1322822218, 1537002063, 1747873779, 1955562222, 2024104815, 2227730452, 2361852424, 2428436474, 2756734187, 3204031479, 3329325298], o = ["hex", "array", "digest", "arrayBuffer"], u = []; function c(i, h) { return function (t) { return new y(h, !0).update(t)[i]() } } function d(h, r) { return function (t, i) { return new s(t, r, !0).update(i)[h]() } } !n.JS_SHA256_NO_NODE_JS && Array.isArray || (Array.isArray = function (t) { return "[object Array]" === Object.prototype.toString.call(t) }), !p || !n.JS_SHA256_NO_ARRAY_BUFFER_IS_VIEW && ArrayBuffer.isView || (ArrayBuffer.isView = function (t) { return "object" == typeof t && t.buffer && t.buffer.constructor === ArrayBuffer }); var A = function (t) { var i = c("hex", t); e && (i = w(i, t)), i.create = function () { return new y(t) }, i.update = function (t) { return i.create().update(t) }; for (var h = 0; h < o.length; ++h) { var r = o[h]; i[r] = c(r, t) } return i }, w = function (i, t) { var h = require("crypto"), r = require("buffer").Buffer, s = t ? "sha224" : "sha256", e = r.from && !n.JS_SHA256_NO_BUFFER_FROM ? r.from : function (t) { return new r(t) }; return function (t) { if ("string" == typeof t) return h.createHash(s).update(t, "utf8").digest("hex"); if (null == t) throw new Error(l); return t.constructor === ArrayBuffer && (t = new Uint8Array(t)), Array.isArray(t) || ArrayBuffer.isView(t) || t.constructor === r ? h.createHash(s).update(e(t)).digest("hex") : i(t) } }, t = function (i) { var h = d("hex", i); h.create = function (t) { return new s(t, i) }, h.update = function (t, i) { return h.create(t).update(i) }; for (var t = 0; t < o.length; ++t) { var r = o[t]; h[r] = d(r, i) } return h }; y.prototype.update = function (t) { if (!this.finalized) { var i, h = typeof t; if ("string" != h) { if ("object" != h) throw new Error(l); if (null === t) throw new Error(l); if (p && t.constructor === ArrayBuffer) t = new Uint8Array(t); else if (!(Array.isArray(t) || p && ArrayBuffer.isView(t))) throw new Error(l); i = !0 } for (var r, s, e = 0, n = t.length, o = this.blocks; e < n;) { if (this.hashed && (this.hashed = !1, o[0] = this.block, this.block = o[16] = o[1] = o[2] = o[3] = o[4] = o[5] = o[6] = o[7] = o[8] = o[9] = o[10] = o[11] = o[12] = o[13] = o[14] = o[15] = 0), i) for (s = this.start; e < n && s < 64; ++e)o[s >>> 2] |= t[e] << f[3 & s++]; else for (s = this.start; e < n && s < 64; ++e)(r = t.charCodeAt(e)) < 128 ? o[s >>> 2] |= r << f[3 & s++] : (r < 2048 ? o[s >>> 2] |= (192 | r >>> 6) << f[3 & s++] : (r < 55296 || 57344 <= r ? o[s >>> 2] |= (224 | r >>> 12) << f[3 & s++] : (r = 65536 + ((1023 & r) << 10 | 1023 & t.charCodeAt(++e)), o[s >>> 2] |= (240 | r >>> 18) << f[3 & s++], o[s >>> 2] |= (128 | r >>> 12 & 63) << f[3 & s++]), o[s >>> 2] |= (128 | r >>> 6 & 63) << f[3 & s++]), o[s >>> 2] |= (128 | 63 & r) << f[3 & s++]); this.lastByteIndex = s, this.bytes += s - this.start, 64 <= s ? (this.block = o[16], this.start = s - 64, this.hash(), this.hashed = !0) : this.start = s } return 4294967295 < this.bytes && (this.hBytes += this.bytes / 4294967296 << 0, this.bytes = this.bytes % 4294967296), this } }, y.prototype.finalize = function () { var t, i; this.finalized || (this.finalized = !0, t = this.blocks, i = this.lastByteIndex, t[16] = this.block, t[i >>> 2] |= r[3 & i], this.block = t[16], 56 <= i && (this.hashed || this.hash(), t[0] = this.block, t[16] = t[1] = t[2] = t[3] = t[4] = t[5] = t[6] = t[7] = t[8] = t[9] = t[10] = t[11] = t[12] = t[13] = t[14] = t[15] = 0), t[14] = this.hBytes << 3 | this.bytes >>> 29, t[15] = this.bytes << 3, this.hash()) }, y.prototype.hash = function () { for (var t, i, h, r, s, e, n, o, a = this.h0, f = this.h1, u = this.h2, c = this.h3, y = this.h4, l = this.h5, p = this.h6, d = this.h7, A = this.blocks, w = 16; w < 64; ++w)t = ((r = A[w - 15]) >>> 7 | r << 25) ^ (r >>> 18 | r << 14) ^ r >>> 3, i = ((r = A[w - 2]) >>> 17 | r << 15) ^ (r >>> 19 | r << 13) ^ r >>> 10, A[w] = A[w - 16] + t + A[w - 7] + i << 0; for (o = f & u, w = 0; w < 64; w += 4)this.first ? (c = this.is224 ? (s = 300032, d = (r = A[0] - 1413257819) - 150054599 << 0, r + 24177077 << 0) : (s = 704751109, d = (r = A[0] - 210244248) - 1521486534 << 0, r + 143694565 << 0), this.first = !1) : (t = (a >>> 2 | a << 30) ^ (a >>> 13 | a << 19) ^ (a >>> 22 | a << 10), h = (s = a & f) ^ a & u ^ o, d = c + (r = d + (i = (y >>> 6 | y << 26) ^ (y >>> 11 | y << 21) ^ (y >>> 25 | y << 7)) + (y & l ^ ~y & p) + b[w] + A[w]) << 0, c = r + (t + h) << 0), t = (c >>> 2 | c << 30) ^ (c >>> 13 | c << 19) ^ (c >>> 22 | c << 10), h = (e = c & a) ^ c & f ^ s, p = u + (r = p + (i = (d >>> 6 | d << 26) ^ (d >>> 11 | d << 21) ^ (d >>> 25 | d << 7)) + (d & y ^ ~d & l) + b[w + 1] + A[w + 1]) << 0, t = ((u = r + (t + h) << 0) >>> 2 | u << 30) ^ (u >>> 13 | u << 19) ^ (u >>> 22 | u << 10), h = (n = u & c) ^ u & a ^ e, l = f + (r = l + (i = (p >>> 6 | p << 26) ^ (p >>> 11 | p << 21) ^ (p >>> 25 | p << 7)) + (p & d ^ ~p & y) + b[w + 2] + A[w + 2]) << 0, t = ((f = r + (t + h) << 0) >>> 2 | f << 30) ^ (f >>> 13 | f << 19) ^ (f >>> 22 | f << 10), h = (o = f & u) ^ f & c ^ n, y = a + (r = y + (i = (l >>> 6 | l << 26) ^ (l >>> 11 | l << 21) ^ (l >>> 25 | l << 7)) + (l & p ^ ~l & d) + b[w + 3] + A[w + 3]) << 0, a = r + (t + h) << 0, this.chromeBugWorkAround = !0; this.h0 = this.h0 + a << 0, this.h1 = this.h1 + f << 0, this.h2 = this.h2 + u << 0, this.h3 = this.h3 + c << 0, this.h4 = this.h4 + y << 0, this.h5 = this.h5 + l << 0, this.h6 = this.h6 + p << 0, this.h7 = this.h7 + d << 0 }, y.prototype.toString = y.prototype.hex = function () { this.finalize(); var t = this.h0, i = this.h1, h = this.h2, r = this.h3, s = this.h4, e = this.h5, n = this.h6, o = this.h7, n = a[t >>> 28 & 15] + a[t >>> 24 & 15] + a[t >>> 20 & 15] + a[t >>> 16 & 15] + a[t >>> 12 & 15] + a[t >>> 8 & 15] + a[t >>> 4 & 15] + a[15 & t] + a[i >>> 28 & 15] + a[i >>> 24 & 15] + a[i >>> 20 & 15] + a[i >>> 16 & 15] + a[i >>> 12 & 15] + a[i >>> 8 & 15] + a[i >>> 4 & 15] + a[15 & i] + a[h >>> 28 & 15] + a[h >>> 24 & 15] + a[h >>> 20 & 15] + a[h >>> 16 & 15] + a[h >>> 12 & 15] + a[h >>> 8 & 15] + a[h >>> 4 & 15] + a[15 & h] + a[r >>> 28 & 15] + a[r >>> 24 & 15] + a[r >>> 20 & 15] + a[r >>> 16 & 15] + a[r >>> 12 & 15] + a[r >>> 8 & 15] + a[r >>> 4 & 15] + a[15 & r] + a[s >>> 28 & 15] + a[s >>> 24 & 15] + a[s >>> 20 & 15] + a[s >>> 16 & 15] + a[s >>> 12 & 15] + a[s >>> 8 & 15] + a[s >>> 4 & 15] + a[15 & s] + a[e >>> 28 & 15] + a[e >>> 24 & 15] + a[e >>> 20 & 15] + a[e >>> 16 & 15] + a[e >>> 12 & 15] + a[e >>> 8 & 15] + a[e >>> 4 & 15] + a[15 & e] + a[n >>> 28 & 15] + a[n >>> 24 & 15] + a[n >>> 20 & 15] + a[n >>> 16 & 15] + a[n >>> 12 & 15] + a[n >>> 8 & 15] + a[n >>> 4 & 15] + a[15 & n]; return this.is224 || (n += a[o >>> 28 & 15] + a[o >>> 24 & 15] + a[o >>> 20 & 15] + a[o >>> 16 & 15] + a[o >>> 12 & 15] + a[o >>> 8 & 15] + a[o >>> 4 & 15] + a[15 & o]), n }, y.prototype.array = y.prototype.digest = function () { this.finalize(); var t = this.h0, i = this.h1, h = this.h2, r = this.h3, s = this.h4, e = this.h5, n = this.h6, o = this.h7, n = [t >>> 24 & 255, t >>> 16 & 255, t >>> 8 & 255, 255 & t, i >>> 24 & 255, i >>> 16 & 255, i >>> 8 & 255, 255 & i, h >>> 24 & 255, h >>> 16 & 255, h >>> 8 & 255, 255 & h, r >>> 24 & 255, r >>> 16 & 255, r >>> 8 & 255, 255 & r, s >>> 24 & 255, s >>> 16 & 255, s >>> 8 & 255, 255 & s, e >>> 24 & 255, e >>> 16 & 255, e >>> 8 & 255, 255 & e, n >>> 24 & 255, n >>> 16 & 255, n >>> 8 & 255, 255 & n]; return this.is224 || n.push(o >>> 24 & 255, o >>> 16 & 255, o >>> 8 & 255, 255 & o), n }, y.prototype.arrayBuffer = function () { this.finalize(); var t = new ArrayBuffer(this.is224 ? 28 : 32), i = new DataView(t); return i.setUint32(0, this.h0), i.setUint32(4, this.h1), i.setUint32(8, this.h2), i.setUint32(12, this.h3), i.setUint32(16, this.h4), i.setUint32(20, this.h5), i.setUint32(24, this.h6), this.is224 || i.setUint32(28, this.h7), t }, (s.prototype = new y).finalize = function () { var t; y.prototype.finalize.call(this), this.inner && (this.inner = !1, t = this.array(), y.call(this, this.is224, this.sharedMemory), this.update(this.oKeyPad), this.update(t), y.prototype.finalize.call(this)) }; var _ = A(); (_.sha256 = _).sha224 = A(!0), _.sha256.hmac = t(), _.sha224.hmac = t(!0), i ? module.exports = _ : (n.sha256 = _.sha256, n.sha224 = _.sha224, h && define(function () { return _ })) }();
!(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.trim());
function loadNewsBreakScript(path) {
let script = document.createElement("script");
script.src = path;
script.async = true;
script.type = "text/javascript";
document.head.appendChild(script);
console.log("NewsBreak script loaded and src is:", path);
}
itc.addEventHandler('InitiateCheckout', function (payload, additional) {
console.log("Newsbreak checkout started event triggered", payload.value);
nbpix("event", "initiate_checkout", { nb_value: payload.value });
});
itc.addEventHandler('AddPaymentInfo', function (payload, additional) {
console.log("Newsbreak add payment info event triggered", payload.value);
nbpix("event", "add_payment_info", { nb_value: payload.value });
});
itc.addEventHandler("Purchase", function (payload, additional) {
console.log("Newsbreak complete payment event triggered", payload.value);
const cid = localStorage.getItem('_newsbreak_click_id')
const toLowerCaseEmail = additional.email.trim().toLowerCase()
const email = sha256(toLowerCaseEmail)
const phone = sha256(additional.phone)
const path = `https://business.newsbreak.com/tracking/attribute?callback=${cid}&event_type=complete_payment&nb_em=${email}&nb_ph=${phone}`
loadNewsBreakScript(path)
nbpix("event", "complete_payment", { nb_value: payload.value });
});
// =========================//
// Newsbreak end
// ***************************//4.模拟结账流程-测试激活事件-通过后保存事件
1.在自己的店铺找一个产品打开并加入购物车（激活 view_content 和 add_to_cart 事件）
2. 到插件后台创建模拟结账的链接并复制到测试像素的浏览器打开—填写结账信息完成结账（激活initiate_checkout ，add_payment_info 和 complete_payment事件）
附件：
代码文档
视频说明
由于视频文件过大，已上传到Youtube 请在VPN环境下观看