SOP 110: Install TikTok pixel on your site
Add the TikTok pixel to your site in order to create remarketing audiences and set up conversions for your campaigns that better optimize your ads.
Last Updated / Reviewed: 06/21/2024
Execution Time: 10-20 minutes
🚀 Goal: To add the TikTok tracking pixel to your site.
🤞 Ideal Outcome: The TikTok pixel is properly installed without any technical issues.
🤔 Why this is important: The TikTok Pixel allows you to track visitors who come from your TikTok ad campaigns. You can also track website visitor actions, like 'Pageviews' or 'Purchases' and create audience segments to retarget them.
🧐 Where this is done In Google Tag Manager and TikTok Ads Manager.
🗓️ When this is done: Before you run any TikTok advertising campaign on your website. You only need to do this once unless you’re running TikTok ads on multiple websites.
👨 Who does this: The person responsible for website management, analytics, or paid advertising.
__⚠️Prerequisites or requirements: __
You’ll need access to an active TikTok for Business account. Also, you’ll need access to Google Tag Manager (GTM) that was set up on your website.
If you don’t have a TikTok For Business account, sign up here.
If you haven’t set up Google Tag Manager, refer to the following SOPs:
• SOP 004 (web version) to Set up Google Tag Manager on WordPress
• SOP 065 (web version) to Set up Google Tag Manager on Shopify
• SOP 066 (web version) to Set up Google Tag Manager on Squarespace
Click here to get the most up-to-date version of this SOP
Environment Setup
Before you start:
01▸ Open a new browser window with your TikTok and Google Tag Manager account signed in.
02▸ Download the TikTok Pixel helper
Install TikTok Pixel via Google Tag Manager
01▸ Sign in to TikTok for Business.
02▸ Once signed in. Head to Events manager by clicking "Tools" followed by "Events".
03▸ Click "Manage" under Web Event.
04▸ Click on the "Create pixel" button. A pop up will appear:
Creating your Pixel:
05▸ Select "Partner setup".
06▸ Select "Google Tag Manager" as your TikTok partner and follow through the setup guide:
You’ll be asked to login to your Google account. Make sure all the Google Tag Manager permissions are checked. This allows Google Tag Manager and the TikTok Pixel to communicate with each other.
Note: Double-check that you’re logging into the correct Google account (the one that has access to your Google Tag Manager container).
**
07▸ Your Google Tag Manager details will be automatically populated. Make sure you are selecting the correct Account and Container, if so click "Next".
08▸ Next, name your pixel.
09▸ Choose the correct container:
10▸ Select "Set up with Event builder".
11▸ Next, click "Publish" and continue setup.
12▸ By now, you should be able to see a new tag in your GTM account:
13▸ Next, switch on all configurations.
Create a Page View event
Following the above steps,
01▸ Click "Launch Event Builder" under step 5 "Set up events". You will be directed to a new tab.
02▸ Add your website URL and select an event type.
Note:* Click on the arrow on step 1 to reveal if the TikTok Pixel has been properly installed on your website. If not, you will have to install the base code in the header section of your website. Click on the below button "Install Base Code" to reveal the pixel code. *
**
03▸ Select a tracking method and remember to click "Save".
Note 1:* When setting up __URL keywords__, avoid entering keywords that might be duplicates of each other. For instance, using "cart" and "cart/123" as separate keywords could cause duplicate events due to overlapping trigger rules. You can also create more events by clicking on + Enter URL Keywords or + Add Web Elements.Note 2:When setting up __Web Elements__, enter your website’s URL in the preview on the left side of the screen to sync your website with the event setup, which mimics how your site will appear in the TikTok app. Once connected, use "selector" mode to add web elements or "navigation" mode to move around your site. After syncing your website in the preview and on your mobile device, click "+ Add Web Elements" to begin. Selectable web elements will be highlighted in blue. Click on an element to record it as CSS selector code under "Select clicked element".*
04▸ Additional set ups
(1) Set up value and currency parameters with Event Builder
After selecting your event type and setup method, configure the value and currency parameters required for ROAS reporting and Value Optimization. Click the "value & currency" dropdown and choose "Choose value & currency on page" to add a value parameter corresponding to the event on your page. Event Builder will then dynamically fill values onto other pages. Finally, select your currency from the dropdown menu under the currency section. Note:* This setup is best for one currency. If you have a more complex website with multiple currencies, we recommend you use a more advanced setup tool for parameters such as Custom Code or Events API.* (2) Set up content parameters with Event Builder After selecting your event type and setup method, configure the content parameters (content ID and content type) necessary for Video Shopping Ads and Catalog Management. Click the "Content ID and Content Type" dropdown to add a content parameter. You can select the content ID from your web page if it is visible, or choose to extract the content ID from the URL if it appears there. Then, select the content type.
Verifying the TikTok and Event Pixels are installed correctly
Important: It takes about 15-30 minutes for both Google Tag Manager and TikTok’s event pixel to start sending signals.
01▸ Head over to your website after 30 mins and refresh a couple of times for the event pixel to kick in.
02▸ Click the "TikTok Pixel" helper in your Google Chrome toolbar, you should see both the TikTok and Event pixels are now tracked.
03▸ Now head back to TikTok's Event Manager and you’ll see the page view metrics are now tracked.
You’ve done it!* *Now that you’ve started tracking page views across your website, you can set up tracking for other metrics such as add to cart and purchase events.