一、   涉及平台

本教程展示如何通过Google Tag Manager来支持、管理ttPixel代码，实现监控统计。

【使用到的网站】

Google Tag Manager（Google跟踪代码管理器，后文简称为GTM），是用于统一管理所有追踪代码（如Google Ads、GA4）的平台，单次配置成功后，后续事件不需要再修改网站代码，是非常方便的管理工具。

如果您同时做其他社媒广告投放，建议使用此平台进行统一管理和监控。

TikTok for Business（TikTok商务管理平台，后文简称为TikTok平台）是TikTok为企业和营销人员提供的一体化、免费的管理中心，用于统一管理您在TikTok上的所有资产、广告和互动。

根据TikTok平台的政策，大陆企业基本无法入驻商务管理平台，您需要拥有香港或海外资质的企业资料。

二、   步骤

STEP1 安装GTM代码

请参考此指导完成：如何安装GTM代码_凡科建站

STEP2 登录TikTok for Business

请访问https://ads.tiktok.com/business点击右上角“GetStarted”，以广告主的身份创建账号（如您是首次创建，留意创建时“是否为代理”选择为no）：

进入TikTok后台后根据流程指引，完善相关信息

注意：如您进入后台时，发现页面和本教程差异较大，请确认注册角色是否正确选择为广告主（advertiser），而不是代理机构（agent）。

完善基础资料后，下一步会进入广告类型选择，根据您的业务指标选择即可。

本博客以外贸零售场景为例，选择“sales - website conversion ”，如您的网站不应用于海外贸易，可以根据您的业务场景选择其他类型；

点击“continue”，进入下一步。

在此步骤中，先点击Tik Tokpixel的GetStarted按钮：

在跳转的新页面中，点击“Connectdatasource”主按钮：

选择“web”类型：

输入您的网站地址：

链接方式选择“合作伙伴整合”：

partner选择“Googletagmanager”，点击next按钮进入下一步操作：

点击“链接账户”：

在请求的弹窗中，授权您的谷歌账号：

确认您的账号并点击下一步：

请根据您的gtm类型选择链接方式，两者都可以；如您不清楚服务器端和客户端差异，请选择直接寻找右侧客户端，避免无关流程干扰。

点击“next”进入下一步：

在跳转的页面中，按照步骤确认信息后点击“next”：

选择您需要链接的容器（站点）：

这一步设置方案会有一些差异：

选择“Set up with Event builder”，TikTok会在后续步骤中往gtm插入像素代码和一个全部事件监听。

选择“Use Google Tag Manager data layer APIs”，TikTok会在后续步骤中往gtm插入像素代码，我们可以自己定义事件推送规则。

两个方案差异不大，前者会多创建一个用处不大的GTMevent。您可以选择其中任一个进行下一步：

确认将要新增的两个事件：一个是像素代码插入、一个是自定义事件。

我们主要关注基代码的插入（即像素设置的自定义html事件）。

然后确认发布即可。

（如此步骤提示发布异常，可能是您gtm代码配置异常，请您登录GTM后台确定是否能正常发布版本）。

根据您的需要，选择是否与Tik Tok共享您的数据，然后点击next进入下一步：

后面的步骤不需要在此处配置，可以点击“next”直到配置流程结束：

STEP3 登录GTM检查您的Tik Tok基代码

登录GTM后台https://tagmanager.google.com/#/home

首先，您需要确认基代码是否顺利插入。在后台找到一个后缀为“Pixel_setup”的代码：

您可以进入这个代码详情更改它的名称，因为案例中的GTM账号同时处理了多个社媒平台，为了更好的区分代码，我将这个代码命名为“TIKTOK像素代码插入”，您可以根据您的喜好修改或保留原名称。

其二，如您在第二步时在Tik Tok后台选择了“Set up with Event builder”设置方案，代码中会出现一个后缀为Event的事件。

（如果没有忽略此步骤即可）

这是一个无差别监听所有事件的代码，因为条件不够精确，它统计的数据对我们的业务决策没有意义。我们点进去代码详情，把它停用了：

STEP4设置Tik Tok推送代码

此步骤设置有效的前提：您完成了STEP1 GTM基础代码教程中的 标准事件的变量和触发器设置，否则发布版本时gtm会报错。

如您未完成，请回到第一步、根据教程完成对应步骤。

在代码页面点击“创建”，

在代码中新增一个需要向TikTok推送数据”的自定义代码：

如您未配置触发器和自定义参数，请回到STEP1完成此必要步骤，否则发布版本时会失败。

tiktok常见推送事件和对应自定义代码如下，复制对应代码到输入框后，保存即可。

查看商品详情（仅跨境电商）ViewContent

<script>
if (typeof ttq !== 'undefined') {
   // 获取商品数组
   var items = {{js - ecommerce_items}};

   // 构建TikTok需要的格式
   var contents = [];

   // 处理每个商品
   items.forEach(function(item) {
    if (item.item_id) {
      contents.push({
        content_id: item.item_id,
        content_name: item.item_name || '',
        content_type: 'product',
        price: item.price || 0,
      });
    }
   });

   // 推送到TikTok
   ttq.track('ViewContent', {
    contents: contents,
    value: {{value}} || 0,
    currency: '{{currency}}' || 'CNY'
   });
}
</script>

加入购物车（仅跨境电商）AddToCart

<script>
if (typeof ttq !== 'undefined') {
   // 获取商品数组
   var items = {{js - ecommerce_items}};

   // 构建TikTok需要的格式
   var contents = [];

   // 处理每个商品
   items.forEach(function(item) {
    if (item.item_id) {
      contents.push({
        content_id: item.item_id,
        content_name: item.item_name || '',
        content_type: 'product',
        price: item.price || 0,
        quantity: item.quantity || 1,
        content_variant: item.item_variant || ''
      });
    }
   });

   // 推送到TikTok
   ttq.track('AddToCart', {
    contents: contents,
    value: {{value}} || 0,
    currency: '{{currency}}' || 'CNY'
   });
}
</script>

提交订单（仅跨境电商）InitiateCheckout

<script>
if (typeof ttq !== 'undefined') {
   // 获取商品数组
   var items = {{js - ecommerce_items}};

   // 构建TikTok需要的格式
   var contents = [];

   // 处理每个商品
   items.forEach(function(item) {
    if (item.item_id) {
      contents.push({
        content_id: item.item_id,
        content_name: item.item_name || '',
        content_type: 'product',
        price: item.price || 0,
        quantity: item.quantity || 1,
        content_variant: item.item_variant || ''
      });
    }
   });

   // 推送到TikTok
   ttq.track('InitiateCheckout', {
    contents: contents,
    value: {{value}} || 0,
    currency: '{{currency}}' || 'CNY',
    coupon: '{{coupon}}' || ''
   });
}
</script>

订单支付成功（仅跨境电商）PlaceAnOrder

<script>
if(typeof ttq !=='undefined'){
// 获取商品数组
var items ={{js - ecommerce_items}};

// 构建TikTok需要的格式
var contents =[];
var totalDiscount =0;
var totalQuantity =0;

// 处理每个商品
   items.forEach(function(item){
if(item.item_id){
var quantity =parseFloat(item.quantity)||1;
var discount =parseFloat(item.discount)||0;

      contents.push({
        content_id: item.item_id,
content_name: item.item_name||'',
content_type:'product',
price: item.price||0,
quantity: quantity,
content_category: item.item_category||'',
content_variant: item.item_variant||'',
discount: discount
});

// 累加统计
      totalDiscount += discount;
      totalQuantity += quantity;
}
});

// 推送到TikTok - 使用PlaceAnOrder事件（TikTok推荐用于购买完成）
   ttq.track('PlaceAnOrder',{
    contents: contents,
value:{{value}}||0,
currency:'{{currency}}'||'CNY',
transaction_id:'{{transaction_id}}'||'',
coupon:'{{coupon}}'||'',
shipping:{{shipping}}||0,
tax:{{tax}}||0,
discount: totalDiscount,
total_quantity: totalQuantity,
customer_type:'{{customer_type}}'||'new',
description:'订单支付成功'
});
}
</script>

例如：

预览确认在用户进行对应行为的时候，代码会被正确触发：

点击对应的行为-变量，查阅下方的参数是否能正确获取：

确认无误后点击提交发布最新的GTM版本。

最后回到tiktok平台检查推送是否成功（留意新事件更新可能会有半个小时的延迟，请耐心等待并刷新页面）。

P.S.如您无法找到事件管理器，请从侧边栏中查看

如图，确认事件统计无误、有获取到参数，即安装成功。

或者安装官方插件进行实时页面推送监控：