# NewsBreak Pixel 自定义代码接入指引（主题 3.0）

**URL:** <https://community.shoplineapp.cn/t/topic/38>\
**Category:** 解决方案\
**Tags:** pixel, newsbreak\
**Created:** [2026 年1 月 20 日 06:44 UTC](https://community.shoplineapp.cn/t/topic/38 "2026-01-20T06:44:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![子寒](https://community.shoplineapp.cn/user_avatar/community.shoplineapp.cn/%E5%AD%90%E5%AF%92/32/41_2.png) [@子寒](https://community.shoplineapp.cn/u/%E5%AD%90%E5%AF%92)\
发布日期： [2026 年1 月 20 日 06:44 UTC](https://community.shoplineapp.cn/t/topic/38/1 "2026-01-20T06:44:38Z")

</div>

#### 一、官方文档

[https://help.newsbreak.com/hc/en-us/sections/30523433509645-Event-Tracking](https://help.newsbreak.com/hc/en-us/sections/30523433509645-Event-Tracking)

#### 二、兼容版本

主题 3.0

#### 三、操作流程

**准备：安装自定义代码应用，以下操作需要添加自定义代码**

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/2c9da7c90eca35458e3ef7c7f141ac72827e6326.jpeg)

注意：下列代码中，注意修改自己的 \*\*[pixel ID]\*\*

##### 1. NewBreak配置

###### 1.1. 创建你的 NewsBreak Pixel Event

- 登录 [Ad Manager](https://admanager.newsbreak.com/) ，然后导航到“Tools” \> “Event Mangement” \> “Create/test web event”。

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/d399c632707a79f5a9ac208ae2fe12df116083c6.png)

###### 1.2. 配置你的 NewsBreak Pixel Event, 并在下方 Base Code 中找到 NewsBreak Pixel ID

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/df079900ae58bc742b150a02256a69dc839816ef.png)

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/9c495152a93926e0d147f5f92201ffd21a04cfaa.jpeg)

##### 2. 通用代码安装

###### 2.1. 添加代码，触发页面全选，插入位置顶部，语法选择 Sline

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/2094df89f0cbcaa5d766229f2f474957700bb3a3.jpeg)

###### 2.2. 将以下代码复制入代码内容，注意将下方代码中的 pixel ID，替换为步骤 1.2 中获取到的 NewsBreak Pixel ID ，例如：ID-xxxxxxxxx

```auto
<script>
  document.addEventListener('DOMContentLoaded', function() {
    !(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');
  })
</script>

```

##### 3. 加购事件

###### 3.1. 添加代码，触发页面全选，插入位置底部，语法选择 Sline

如果对应页面不会存在加购操作，可以不选。

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/cdb306e86561dacd1caa97fd380191ad9b9d475b.jpeg)

###### 3.2. 将以下代码复制入代码内容

```auto
<script>
  window.themeEventCenter.addListener('variant:added', (event) => {
    nbpix('event','add_to_cart', {nb_value: event.detail.price});
  });
</script>

```

##### 4. 商品访问事件

###### 4.1. 添加代码，触发页面选择商品详情页，插入位置底部，语法选择 Sline

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/55ed6d264ec68c4aab5228d0931c3d74b2220b0c.jpeg)

###### 4.2. 将以下代码复制入代码内容

```auto
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const compare_at_price = '{{ product.selected_or_first_available_variant.compare_at_price | divided_by(100, integer=false) }}';
    nbpix('event','view_content', {nb_value: compare_at_price});
  })
</script>

```

##### 5. 开始结账与下单成功事件

###### 5.1. 添加代码，触发页面选择结算页，插入位置底部，语法选择 Handlebars

 ![image](https://community.shoplineapp.cn/uploads/default/original/1X/5ac713bacc7b63bd7b413a59c98eb1d427da0721.jpeg)

###### 5.2. 将以下代码复制入代码内容

```auto
<script>
  document.addEventListener('DOMContentLoaded', function() {
    {{#if @root.checkout}}
      console.log('Start NB Pixel Snippet initiate_checkout')
      const checkout_total_amount = '{{ divide checkout.total_price 100 }}';
      nbpix('event', 'initiate_checkout', {nb_value: checkout_total_amount});
    {{/if}}
    {{#if @root.thankyou}}
      console.log('Start NB Pixel Snippet CompleteOrder')
      const thankyou_total_amount = '{{ divide thankyou.priceInfo.totalAmount 100 }}';
      nbpix('event','complete_payment', {nb_value: thankyou_total_amount});
    {{/if}}
  })
</script>

```