Last Modified on January 16, 2024
Are you running ads on TikTok?
As one of the most downloaded apps in the world in recent years, TikTok has become one of the largest social media platforms with audiences spanning over 150 countries.
Running ads here allows you to reach more customers and drive traffic to your business.
If you want to bring your marketing strategy to the next level, you should measure your advertising efforts to understand which ads are generating the most conversions.
This allows you to define your perfect audience and target your ads to them.
Be at the top of your measuring game and set up TikTok event tracking for deeper business insights.
We’ll show you how to configure it easily using Google Tag Manager so that you can stay ahead of the competition and drive more engagements and sales.
Here is an overview of the steps we need to take to set up TikTok event tracking:
- Setup Requirements
- Configuration in TikTok Ads Manager
- Create Your TikTok Pixel
- Create TikTok Events
- Creating a Tag Without Parameters
- TikTok Event Tracking with Dynamic Values
- The Data Layer
- Setting Up a Tag with Dynamic Values
- Verifying Your Implementation
Let’s dive in!
What are the Setup Requirements for TikTok Event Tracking
To set up TikTok event tracking, there are a few things you need to have first.
1. First, you need a TikTok Ads Manager account.
2. Next, you’ll need to determine what events you’d want to track. For this example, we’ll be looking at the contact page of our website.
Specifically, we want to track every time a user clicks on the phone number and email. We also want to count them as a single contact event.
3. Lastly, you’ll need a Google Tag Manager account and have GTM implemented on your website.
If you don’t know how to set up Google Tag Manager on your website, check out our Google Tag Manager Tutorial for Beginners, where we lay down the steps for you to follow along easily.
Configuration in TikTok Ads Manager
After you have all those setup requirements prepared, the first step to setting up TikTok event tracking on your website is to configure events in your TikTok ads manager.
How to set up TikTok event tracking:
1. Go to your ads manager and click on Assets → Events.
In the events manager, we can track events that happen on your app or website.
2. Since we’ll be tracking the contact page on our website, select Manage under Web Events.
3. Here, we’re prompted to install a TikTok pixel first.
Similar to building a house, we need to lay the foundation first before we can start construction. For TikTok event tracking, the TikTok pixel is our foundation.
We have to install our base, the main pixel, first and then create our events.
Create Your TikTok Pixel
So, step number one is to create our pixel.
1. Click on Create Pixel.
We are given two options for how to connect your website to TikTok: the TikTok pixel and Events API. With the TikTok pixel, the implementation is straightforward with step-by-step setup instructions.
Meanwhile, the TikTok events API allows you to send web events from your server directly to TikTok. You’ll have more control over what you share and when you share information, but you must have a server. Moreover, technical development resources are required.
In this lesson, we won’t deal with the events API and instead create a TikTok pixel.
2. To provide a name for our pixel, select the TikTok Pixel, then click Next.
Next, we have the option of installing the pixel code manually or setting up web events with the TikTok pixel automatically. Either option will work perfectly fine since we are working with Google Tag Manager.
If you want to set up the pixel code automatically, select Automatically Set Up Web Events via Partner Platforms → Next.
Next, you’ll have to choose Google Tag Manager.
For this tutorial, however, we’ll show the steps to manually install the code, so click Back.
3. Let’s select Manually Install Pixel Code → Next.
Coming up are the event builder and the custom code options for the event setup method. Because we want to implement our events via Google Tag Manager and prefer having control over our tracking, we’ll be selecting the custom code option.
Now, don’t think that you need to know how to code here. You don’t have to be a developer because we’ll look at a great solution later.
4. Select Custom Code → Next.
Our TikTok pixel has now been created. Here, we’re given instructions on how to proceed, starting with installing the pixel code.
The steps we’ll show will differ slightly (particularly in step 2 – pasting the code to the header section of your website) because we’ll be using Google Tag Manager to install our code.
How to Install TikTok Pixel via Google Tag Manager
1. First, copy the pixel code either by clicking on the code itself or the Copy Pixel Code button.
2. Go to Google Tag Manager → Tags → New.
3. Next, we’ll select the Tag Configuration.
4. Choose the Custom HTML tag type.
5. Paste the code in the HTML section, then click on Triggering.
The question is when should our tag fire?
6. Since the snippet must be installed on each page of the website, our tag should fire on All Pages.
7. Finally, provide a name for our tag, then click Save.
So, this was step one for setting up TikTok event tracking, our foundation, which is installing the TikTok pixel. Now, it’s time to create our events.
How to Create TikTok Events
1. To start, let’s go back to the events manager and click Next.
Here, we are prompted to follow code instructions to create events.
2. Click on the View Instructions button to be directed to the TikTok documentation page.
Here, we can see various pieces of information regarding the supported standard events and the parameters you can send along with them.
3. In our case, we want to track whenever a visitor wants to contact our business.
In our list of standard events, we can see the event type, its description, the event code to use, and recommended parameters.
What if you’re not experienced with coding and would rather not deal with it? Don’t worry because we have a workaround that makes this step much easier.
To do this, we have to go back to Google Tag Manager.
Configure GTM Variables
Before we do any implementation, we need to configure the built-in variables available to our GTM container.
Go to Variables → Configure.
Now ensure that all the click-based variables are activated by selecting each one.
Next, let’s go on and create a trigger.
Create a Trigger
For this TikTok event tracking example, we want to track whenever a visitor clicks on either our phone number or email address links. Let’s first create a generic trigger for link clicks.
Go to Triggers → New.
Select Trigger Configuration → Just Links under clicks.
For now, let’s write All Links for the trigger name. We’ll change this later when we make the trigger more specific to our use case. Next, click Save.
Let’s test if we are seeing our click variables when we click on the links on our contact page.
Click on Preview.
Next, click Connect to confirm connecting the Tag Assistant to your website.
Let’s go to the contact page and click on both the phone number and the email.
Let’s go to the Tag Assistant to check if our trigger works and if our variables get populated properly. We should have two subsequent link-click events at the top.
Start with the first Link Click event, number 14, and go to the Variables tab. The Click URL variable should have the text “tel:” followed by our phone number.
Next, go the event number 15, the second Link Click. Our Click URL variable this time would have “mailto:” followed by our email address.
Now we were able to define our trigger specifically to our needs.
Go back to Google Tag Manager and select the All Links trigger we have already configured.
Instead of all link clicks, we only want our trigger to fire on the conditions we specify. In this case, we only want it to trigger when the user clicks on the link to call or message us.
Click on our Trigger configuration and select Some Link Clicks. Set the “Click URL contains tel:” as the condition.
Change the name for this trigger, then click Save.
Next, let’s create a second trigger for email link clicks.
Click on New.
Our trigger configuration should mostly be the same as our telephone link clicks trigger. Our trigger type remains Just Links, and the condition should also be for Click URLs.
The difference is that this time, the Click URL should contain “mailto:” Name this trigger and click Save.
Our triggers are now ready to be used. The next step will be for setting up our tags. We looked at the documentation earlier and saw the equivalent event code for each event type. What should we do if we don’t want to deal with code?
Add a Template to Your Workspace
In our case, Templates come to the rescue.
Go to Templates → Search Gallery for the tag templates.
Look for TikTok and select the TikTok Pixel official template by TikTok.
Click on Add to Workspace.
Since this template is from the community gallery, a window opens showing all the permissions you need to confirm to use the tag template.
Click on Add to proceed.
Our tag template is now ready to be used. We’re now ready to define our tags.
Creating a Tag Without Parameters
Let’s go to Tags → New.
Select Tag Configuration → TikTok Pixel.
To set up TikTok event tracking with GTM, we will need our Pixel ID.
Go back to our TikTok Ads Manager and click on Complete Setup.
We can then see our Pixel ID in the upper left corner of the window. Copy this value.
Go back to Google Tag Manager and paste the Pixel ID in the space provided. Next, select Contact for our trigger event.
Here, we can see all the different events we can implement for TikTok event tracking. All the events we saw in the official documentation are available to use here.
We’ll skip the advanced matching configurations for now, and take things one step at a time. For this section, we’ll only set up an event without any parameters.
We will have a look at dynamic values in a later section of our tutorial.
Go to Object Properties and select No Contents.
Next, click on Triggering to set our trigger.
We have already made a trigger for both telephone and email link clicks. These can be seen in the trigger list that comes up.
Select either one of these triggers. To add the other trigger, simply click on the + button for the firing triggers.
If you add multiple firing triggers, you’ll notice that it is set to the OR condition, meaning the tag will fire for either trigger. Provide a name for the tag, then Save it.
The last thing we need to do to complete our TikTok event tracking setup is to test out our tag.
Test Your Implementation
Before we begin testing, we’ll install the extension called TikTok Pixel Helper.
This extension helps you verify and troubleshoot pixel installation by checking for errors and providing implementation recommendations for your website. Using this extension will help in our TikTok event tracking.
💡 Top Tip: If you want to know about more Chrome extensions that can be helpful to you as a marketer, check out our definitive list of the 11 Essential Analytics Chrome Extensions.
Select this extension in the Chrome Web Store and click Add to Chrome.
Confirm installation by clicking on Add extension.
To access it more easily, go to your extensions and pin the TikTok Pixel Helper.
The TikTok Pixel Helper extension icon should show up in our toolbar.
Let’s go back to Google Tag Manager and click on Preview again.
Once again, go to the Contact page and click on the links to both our phone number and email address. Similar to our test earlier, our latest events should be two link clicks.
Click on the first Link Click event and confirm that our TikTok event tag has been fired successfully.
We should also check the second Link Click event to confirm that our email address link click trigger works. If it is working correctly, our TikTok event tag should also show under tags fired.
This is a good sign that we’ve set up our events correctly. As another layer of assurance, let’s go back to our website and have a look at the pixel helper.
Click on the TikTok Pixel Helper extension. Here, we have the base pixel Page View and two Contact events. Click on one to expand. Notice that a warning message shows up.
This notification tells us that the content ID received contains no value. Should we be worried that we got this message?
If you remember, we selected the no contents option in the Google Tag Manager. We intentionally sent this event without any parameters yet, so for now, this is perfectly fine. If you’re following along and you see this message, you can just ignore this warning.
Our event tag seems to be working properly. Let’s go back to GTM and publish our tags live on our website.
Click on Submit.
Add a version name, then click Publish.
The final and most definite test to see if our TikTok event tracking is working correctly is to go back to our TikTok events manager and see if our events are being tracked there,
Don’t worry if you’re not seeing events here immediately. It might take a while for your events to be recorded, but seeing your events here is the most definite confirmation that you’ve successfully implemented TikTok event tracking.
TikTok Event Tracking with Dynamic Values
Let’s dive deeper into TikTok event tracking and take it up a notch by introducing dynamic values. Tracking events with values on TikTok opens up a whole new range of possibilities for optimizing your campaigns and understanding user engagement.
Whether you’re an advertiser, marketer, or business owner, we’ll help you set up your tracking correctly so that you can make data-driven decisions.
Why Dynamic Values?
Let’s look at an eCommerce store with multiple products with varying prices.
If we continue with the process before, not only do we need to account for the different products and their prices, but we also need to consider different combinations with varying numbers of products.
With this amount of consideration, we can no longer track those values statically. We want to optimize our campaigns by sending additional information that better describes our products.
How is this doable technically? Let’s begin with the documentation.
Checking TikTok Documentation
Again let’s look at the TikTok documentation for standard events and parameters.
Here is where you can find information about standard events. Scrolling down a bit, you’ll see a list of supported standard events. Here, you can also see a description of the event, the recommended parameters, and the event code to use.
For example, let’s look at the Add to Cart event,
Here we can see that this event should fire when a user adds an item to the cart. We can also send some additional parameters, which are the data points that describe our event better. These include the content type, quantity, description, content ID, currency, and value.
Next, we can also look at an example of the snippet of code that we should install to implement TikTok event tracking with dynamic values.
Go to the About Parameters section. Next, click Setting up dynamic values with custom code. The snippet of code is right below the header.
When we implement this code on our website, we should change the corresponding values of the parameters such as content ID, type, name, value, price, and currency.
A developer usually handles this step because it involves installing this snippet in the source code. We’ll look at a way around this so that you can set it up on your own.
The Data Layer
Many businesses with an online store that uses GA4 usually also have eCommerce tracking implemented. With this implemented, we can use the GA4 data layer to send events to TikTok.
💡 Top Tip: If you haven’t already, check out our guide on How to Set Up Google Analytics 4 eCommerce Tracking to implement eCommerce tracking on your website.
It might be a little confusing but stay with us. We’re getting there!
Here, we are looking at the Google documentation of the data layer.
This code snippet adds information to the data layer. Key-value pairs define a data layer object. These are the lines in the middle. In our example, this information relates to books. We can see the book category, title, and author.
In our case, we should have the information related to our items.
The data layer lives in the background. It’s impossible to see anything directly on our website. This little helper does everything behind the scenes and passes the data to GTM.
With the help of the data layer, we can set up our tracking. The developer usually implements the data layer, but we can also do it with the help of a plug-in.
We have discussed the step-by-step procedure for using the GTM4WP (Google Tag Manager for WordPress) Chrome extension in our GA4 eCommerce tracking guide, so check it out if you also use WordPress for your online store.
GA4 eCommerce Data Layer
Once you have GA4 eCommerce tracking implemented, you should also have your data layer in place. Let’s have a look at it together.
Go to Google Tag Manager and click Preview.
Provide the URL of our website, then click Connect.
Now, let’s make a test purchase. Add any product to the cart, checkout, and complete the order.
Let’s go to the Tag Assistant and see what happens. We have the purchase event, and it fires whenever a user purchases.
If we look at the API Call, we can see the GA4 data layer we can use.
Let’s look at how we can reuse this information for our TikTok event tracking.
Setting Up a Tag with Dynamic Values
Let’s go back to GTM and have a look. Remember that we used the TikTok template for our previous tag, and we’ll use it again to set up our event.
1. At the Tags section, click New.
2. Next, click Tag Configuration.
3. Select TikTok Pixel.
Next, we need to provide the Pixel ID. We’ll show you now another way to obtain this value.
4. Go to the TikTok events manager by clicking Tools → Events.
5. Under Web Events, click Manage.
6. Here, we can see our pixel. Copy the pixel ID below.
7. Go to Google Tag Manager and paste this ID.
8. Next, select the CompletePayment trigger event.