MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

How to Set Up TikTok Event Tracking with Google Tag Manager

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.

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

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:

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.

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.

Phone number and email elements on the contact page

3. Lastly, you’ll need a Google Tag Manager account and have GTM implemented on your website.

Google Tag Manager account

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 AssetsEvents.

Configuring events in the TikTok ads manager

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.

Managing web events in the TikTok events manager

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.

Creating a TikTok 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.

🚨 Note: If you want to learn more about how server-side tagging works, check out our guides on GTM server-side tagging and Cloudflare Zaraz server-side tagging.

2. To provide a name for our pixel, select the TikTok Pixel, then click Next.

TikTok Pixel setup configuration

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 PlatformsNext.

Automatically setting up web events with the TikTok pixel

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.

Setting up web events with Google Tag Manager

3. Let’s select Manually Install Pixel CodeNext.

Manually installing the TikTok pixel code on your website

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 CodeNext.

Using a custom code to set up web events with the TikTok pixel

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.

Copying the pixel code

2. Go to Google Tag Manager → TagsNew.

Creating the TikTok base pixel tag

3. Next, we’ll select the Tag Configuration.

Selecting the tag configuration

4. Choose the Custom HTML tag type.

Selecting the custom HTML tag type

5. Paste the code in the HTML section, then click on Triggering.

The TikTok base pixel tag configuration

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.

Selecting all pages trigger

7. Finally, provide a name for our tag, then click Save.

Providing a name and saving the TikTok base pixel tag

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.

Going to the next set of instructions for setting up web events with the TikTok pixel

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.

Viewing code instructions for creating events

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.

The contact event type in the Tiktok documentation

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 VariablesConfigure.

Configuring the built-in variables

Now ensure that all the click-based variables are activated by selecting each one.

Activating all click-based variables

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 TriggersNew.

Creating a new trigger

Select Trigger ConfigurationJust Links under clicks.

Selecting the just links trigger configuration

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.

Naming and saving the generic link click trigger

Let’s test if we are seeing our click variables when we click on the links on our contact page.

Click on Preview.

Previewing the changes made to the container

Next, click Connect to confirm connecting the Tag Assistant to your website.

Connecting the Tag Assistant to your website

Let’s go to the contact page and click on both the phone number and the email.

Clicking on the phone number and email on the email address

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.

The click URL variable for the phone number link click

Next, go the event number 15, the second Link Click. Our Click URL variable this time would have “mailto:” followed by our email address.

The click URL variable for the email address link click

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.

Modifying the all links trigger

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.

Trigger configuration for the telephone link clicks

Change the name for this trigger, then click Save.

Renaming and saving the telephone link clicks trigger

Next, let’s create a second trigger for email link clicks.

Click on New.

Creating an email link clicks trigger

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.

Trigger configuration for email link clicks

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 TemplatesSearch Gallery for the tag templates.

Searching the tag template gallery

Look for TikTok and select the TikTok Pixel official template by TikTok.

Selecting the TikTok pixel tag template

Click on Add to Workspace.

Adding the TikTok pixel template to the 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.

Confirming permissions required by the TikTok pixel tag template

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 TagsNew.

Creating a new tag

Select Tag ConfigurationTikTok Pixel.

Selecting the TikTok pixel tag configuration

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.

Completing the TikTok pixel setup

We can then see our Pixel ID in the upper left corner of the window. Copy this value.

Pixel ID from the TikTok ads manager

Go back to Google Tag Manager and paste the Pixel ID in the space provided. Next, select Contact for our trigger event.

Pasting the Pixel ID and selecting the 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.

Sending an event without any parameters

Next, click on Triggering to set our trigger.

Selecting a trigger for the event tag

We have already made a trigger for both telephone and email link clicks. These can be seen in the trigger list that comes up.

Custom link click triggers

Select either one of these triggers. To add the other trigger, simply click on the + button for the firing triggers.

Adding another firing trigger

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.

TikTok event tag

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.

Adding the TikTok pixel helper extension to Chrome

Confirm installation by clicking on Add extension.

Adding the TikTok pixel helper extension confirmation

To access it more easily, go to your extensions and pin the TikTok Pixel Helper.

Pinning the TikTok pixel helper extension

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.

Testing the event tag by previewing the changes to the container

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.

The TikTok event tag fired due to the phone link click trigger

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.

The TikTok event tag fired due to the email address link click trigger

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.

Warning message for the contact event

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.

Submitting a live version of the tags

Add a version name, then click Publish.

Providing a version name and publishing the tags

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,

TikTok events manager overview

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.

Demo eCommerce store

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.

TikTok standard and custom events documentation

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,

Add to cart standard event in the TikTok documentation

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.

Sample code for setting up dynamic values

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.

Event parameters to be modified

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!

A data layer is a JavaScript object that passes the information from your website to Google Tag Manager. Let’s look at an example.

Here, we are looking at the Google documentation of the data layer.

Example 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.

Preview of the GTM container

Provide the URL of our website, then click Connect.

Connecting the Tag Assistant to the online store

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.

Purchase event in the Tag Assistant

If we look at the API Call, we can see the GA4 data layer we can use.

Data layer for the purchase event

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.

Creating a new tag with dynamic values

2. Next, click Tag Configuration.

Tag configuration for the new tag

3. Select TikTok Pixel.

Selecting the TikTok pixel tag type

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 ToolsEvents.

Opening the TikTok events manager

5. Under Web Events, click Manage.

Managing web events in the events manager

6. Here, we can see our pixel. Copy the pixel ID below.

Copying the pixel ID

7. Go to Google Tag Manager and paste this ID.

8. Next, select the CompletePayment trigger event.