Taboola Pixel 自定义代码接入指引

解决方案
,
1

一、官方文档

二、兼容版本

Theme OS 3.0

三、操作流程

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

image
image2556×981 99 KB

注意：下列代码中，请将所有YOUR_ACCOUNT_ID替换为您的 Account ID

image
image636×229 51.1 KB

1. 通用代码安装
1.1. 添加代码，触发页面全选，插入位置顶部，语法选择 Sline

image
image1491×912 121 KB

1.2. 将以下代码复制入代码内容, 请将所有YOUR_ACCOUNT_ID替换为您的 Account ID
<script>
  window._tfa = window._tfa || []; window._tfa.push({notify: 'event', name:
  'page_view', id: YOUR_ACCOUNT_ID}); !function (t, f, a, x) { if
  (!document.getElementById(x)) { t.async = 1;t.src =
  a;t.id=x;f.parentNode.insertBefore(t, f); }
  }(document.createElement('script'),
  document.getElementsByTagName('script')[0],
  '//cdn.taboola.com/libtrc/unip/YOUR_ACCOUNT_ID/tfa.js', 'tb_tfa_script');
</script>
2. 加购事件
2.1. 添加代码，触发页面全选，插入位置顶部，语法选择 Sline

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

image
image1491×912 121 KB

2.2. 将以下代码复制入代码内容, 请将所有YOUR_ACCOUNT_ID替换为您的 Account ID
<script>
  window.themeEventCenter.addListener('variant:added', (event) => {
    _tfa.push({ notify: "event", name: "add_to_cart", id: YOUR_ACCOUNT_ID });
  });
</script>
3. 商品访问事件
3.1. 添加代码，触发页面选择商品详情页，插入位置底部，语法选择 Sline

image
image1486×780 80.2 KB

3.2. 将以下代码复制入代码内容, 请将所有YOUR_ACCOUNT_ID替换为您的 Account ID
<script>
    _tfa.push({notify: 'event', name: 'view_content', id: YOUR_ACCOUNT_ID});
</script>
4. 开始结账与下单成功事件
4.1. 添加代码，触发页面选择结算页，插入位置底部，语法选择 Handlebars

image
image1485×751 76.5 KB

4.2. 将以下代码复制入代码内容, 请将所有YOUR_ACCOUNT_ID替换为您的 Account ID
<script>
  // start_checkout
  {{#if @root.checkout}}
    _tfa.push({notify: 'event', name: 'start_checkout', id: YOUR_ACCOUNT_ID});
  {{/if}}

  // make_purchase
  {{#if @root.thankyou}}
    _tfa.push({notify: 'event', name: 'make_purchase', id: YOUR_ACCOUNT_ID});
  {{/if}}
</script>