如何安装Tiktok Pixel代码 - 智能建站学院
一、 涉及平台
本教程展示如何通过Google Tag Manager来支持、管理ttPixel代码，实现监控统计。
【使用到的网站】
Google Tag Manager（Google跟踪代码管理器，后文简称为GTM），是用于统一管理所有追踪代码（如Google Ads、GA4）的平台，单次配置成功后，后续事件不需要再修改网站代码，是非常方便的管理工具。
如果您同时做其他社媒广告投放，建议使用此平台进行统一管理和监控。
TikTok for Business（TikTok商务管理平台，后文简称为TikTok平台）是TikTok为企业和营销人员提供的一体化、免费的管理中心，用于统一管理您在TikTok上的所有资产、广告和互动。
根据TikTok平台的政策，大陆企业基本无法入驻商务管理平台，您需要拥有香港或海外资质的企业资料。
二、 步骤
STEP1安装GTM代码、预创建参数和事件触发器
请参考此指导完成：如何安装Google Tag Manager
STEP2 登录TikTok for Business
请访问https://ads.tiktok.com/business点��右上角“Get Started”，以广告主的身份创建账号（如您是首次创建，留意创建时“是否为代理”选择为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”直到配置流程结束：
登录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.如您无法找到事件管理器，请从侧边栏中查看
如图，确认事件统计无误、有获取到参数，即安装成功。
如想要查阅参数细节，可以使用Chrome浏览器，并安装官方插件进行实时页面推送监控：
