There are multiple ways to set up your web events such as using Event Builder or custom code or both. You have the flexibility to change how your events are set up at any time.
Event Builder: Create events using our platform by setting click rules or URL rules to track website visitor actions.
Custom code: Create events by coding them into your website. This option gives you the most flexibility in setting up event rules and lets you append parameters to your events. For more information about using code to get started, please review our Developer Documentation.
To get started, choose an initial method to set up your events for the first time. Remember, you can always change how your events are set up later.
Before you begin, you need to have a website for your business and be able to edit your website's code or theme.
Click Event under "Assets" in TikTok Ads Manager.
Select Manage under Web Events.
Click Set Up Web Events.
Select TikTok Pixel as your connection method, then Next.
Learn more about Events API to determine if this option is right for you.
5. Give your pixel a name.
We recommend the pixel name corresponds to the website or domain name.
Maximum character length is 128 characters, including spaces.
6. Select Manually install pixel code. Then click Next.
7. Choose how you want to set up your events for the first time via our platform's Event Builder tool or code. You can change how your events are set up later at any time.
Note: We recommend using only 1 pixel per website as adding multiple pixels makes it more difficult to organize and manage. Too many pixels can also reduce page load speed.
TikTok will always set first-party cookies when using pixel unless you opt-out, which can be configured during initial setup or in your pixel settings. You can change this setting at any time. TikTok will also always try to set and read third-party cookies.
To manage third-party cookies, configure a consent management platform or tag manager to control the firing of pixel. Read Using Cookies with TikTok Pixel to learn more.
For a more complete measurement of the pixel events you share with us, and to maximize the performance of your ad campaigns, use both first-party and third-party cookies together. TikTok uses this data in accordance with the TikTok Business Product (Data) Terms.
1. Once you've decided on your pixel settings, proceed to the next screen.
2. Copy the pixel code by clicking Copy Pixel Code or clicking directly on the code itself.
3. You can also download the pixel code using the Download Pixel Code button. Your pixel base code will look like the following:
<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 PIXEL ID WILL BE LOCATED HERE'); ttq.page();}(window, document, 'ttq');</script>
4. Paste the pixel code at the top of the header section on your website. Website headers start with the <head>
tag and close with the </head>
tag.
For example:
<!---Example___><!DOCTYPE html > <head> "INSERT TIKTOK PIXEL CODE HERE" </head></html>
Note: Some website themes have a central location to add Header and Footer Scripts, which you can paste the pixel into the header section. Please check your website theme settings for detailed specifications or ask your website developer for help.
5. Paste your pixel code once. Do not add the pixel repeatedly to the header section.
If you created a pixel previously but did not install it on your website, you can return to the setup screen by doing the following:
Click on Event under "Assets".
Click on Manage under "Website Pixel" to arrive at Events Manager.
Select the pixel you want to revisit.
Click on the Complete Pixel Setup button.
If you have already installed the pixel and would like to retrieve your pixel base code again, you can copy/paste the standardized pixel base code here, but remember to input your pixel ID in the ttq.load()
function:
<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 PIXEL ID WILL BE LOCATED HERE'); ttq.page();}(window, document, 'ttq');</script>
Next, refer to Standard Events and Parameters to learn more about the types of events you can measure. Refer to the next set of instructions to help with creating your initial events:
If you opted to code your events, refer to the Developer Documentation for more assistance.
If you opted to use our platform's Event Builder tool, learn how to use the tool by referring to Create Events.
For advertisers that have technical resources, we recommend setting up with custom code and Event API to ensure maximum data coverage.
For Pixel-only advertisers, we recommend setting up Event API to help mitigate data loss due to browser adblockers, network connectivity issues, and page loading errors.
For Event API-only advertisers, we recommend setting up the pixel to help increase event matching by leveraging first and third-party cookies supported by the pixel.
If advertisers planning to set up both, make sure to set up deduplication in order to avoid over-reporting. Click here to learn more.
If you would like to use both Event Builder and code to create events, we recommend selecting Event Builder during your initial setup and using the event code after installing the pixel. We highly recommend you avoid creating multiples of the same event across different methods or channels under the same domain, as this may result in over-reporting. However, there are exceptions to this recommendation, which include:
If you are using custom code and Events API together.
If you are setting up multiples of the same event under different domains.
If you are setting up multiples of the same event using different rules under the same domain.
If you are using a third-party platform, we always recommend integrating your third-party setup with one of our partner integrations, such as Shopify, for the best experience.
Common event setup scenarios and solutions:
Example:
You previously set up an "Add to Cart" event using Event Builder.
You wish to add a new event, Complete Payment, through custom code.
Our recommendation:
Insert the "Complete Payment" event code into your website as you normally would.
Example:
You previously set up an "Add to Cart" event using Event Builder.
You wish to code it instead.
Our recommendation:
Using Event Builder, clear all rules under the "Add to Cart" event.
Insert the "Add to Cart" event code into your website as you normally would.
Due to the delay of the pixel SDK cache update, you may need to wait up to 12 hours for the new event to show up.
Example:
You are using a Shopify-integrated pixel.
You wish to also integrate with BigCommerce.
Our recommendation:
Option 1
Navigate to your pixel in Events Manager.
Click "Add Events" and select TikTok Pixel or Events API.
Select to connect with a partner (in this example, BigCommerce)
Continue with the onscreen instructions until finished.
Option 2
Go to the partner platform you want to connect with (in this example, BigCommerce).
Under your settings, connect your TikTok for Business account and then your TikTok Pixel.