In this section
A. Create Tiktok Pixel
B. Install Tiktok basecode
C. Send Ecommerce Events to Tiktok
D. Verify your pixel

A. Create Tiktok Pixel

Go to Pixel Manager in Tiktok
Click Create Pixel

Create a new pixel

Set name for your Pixel & choose Manual Install Pixel Code, then click Next

Set name of pixel

Select Developer Mode

Select Developer Mode

Scroll to the bottom of the popup and click Confirm

Confirm to create pixel

Your pixel will be created, click on its name to view detail
Copy the Pixel ID

Copy the pixel ID

B. Install Tiktok Pixel basecode

Copy the basecode and add to Additional Script Section of your online store

<!-- TikTok Pixel Code Start -->
<script>
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

ttq.load('YOUR_TIKTOK_PIXEL_ID');
ttq.page();
}(window, document, 'ttq');
</script>
<!-- TikTok Pixel Code End -->


Remember to change YOUR_TIKTOK_PIXEL_ID with your own Pixel ID

C. Send Ecommerce Events to Tiktok

Copy the following code to Additional Script Section of your online store

<script>
// View Product
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(ctx) {
setTimeout(function() {
if (
ctx.type === "product" &&
window.sb_product &&
window.sb_product.selected_variant &&
window.sb_product.selected_variant.id
) {
ttq.track('ViewContent', {
'content_type': 'product',
'content_id': sb_product.selected_variant.id.toString()
})
}

if (ctx.type === "checkout") {
ttq.track('StartCheckout')
}
}, 1000);
});

// Add to Cart
window.sbsdk.cart.onAdd(function(ctx) {
if (
ctx &&
ctx.variant_id &&
ctx.qty
) {
ttq.track('AddToCart',{
'content_type': 'product',
'quantity': ctx.qty,
'content_id': ctx.variant_id.toString()
})
}
});

// Purchase
window.sbsdk.checkout.onCompleteOrder(function(ctx) {
if (
ctx &&
ctx.items &&
ctx.items.length > 0 &&
ctx.totalPrice &&
window.sb_shop &&
window.sb_shop.currency
) {
var variantIds = ctx.items.map(function(item) {
return item.variant_id;
});
ttq.track('Checkout', {
'contents': variantIds,
'value': ctx.totalPrice,
'currency': window.sb_shop.currency
})
}
});
});
</script>


D. Verify your Tiktok pixel

Install Tiktok Pixel Helper for Chrome
Go to any product page on your online store, click on icon of Pixel Helper on Chrome to display Pixel is triggered

Pixel Helper
Was this article helpful?
Cancel
Thank you!