Elevar Integrations How To Implement TikTok Pixel with Shopify via GTM & Server-Side API

How To Implement TikTok Pixel with Shopify via GTM & Server-Side API

Elevar powers your data layer and server-side tracking needed to connect TikTok and Shopify.

beginner Implementation Difficulty

Integration Specs

  • Channel Accuracy Monitoring
  • Requires Elevar Data Layer
  • GTM server-side client customizable
  • Chrome Extension
  • Elevar Server-Side
  • GTM Server-Side
  • GTM Web Container

What's Included

Events

What customer events are tracked in this integration

  • Pageview
  • Product View
  • Add To Cart
  • Initiate Checkout
  • Place An Order
  • Search
  • Purchase
  • Base Tag
  • Identify Tag
  • Click ID
  • Event ID

Customer Parameters

What customer parameters are tracked in this integration

  • phone number
  • e-mail
  • customer id
  • click id
  • order id

Steps to Implement

Step 1: Prerequisites

Before you can enable your TikTok Events API Destination, you will need to:

  1. Install Elevar’s Data Layer on your store or ensure you are on Elevar Data Layer Version 2.28+. This can be done inside your Elevar Dashboard > Data Layer.. If you are not on version 2.28 or above, then you’ll need to go through the upgrade steps.
  2. Install Elevar’s Shopify Notifications to add Webhook listeners to your store for purchases

Plus, TikTok recommends adding their client-side tracking in parallel with server-side tracking. So if you would like to implement this then follow this step included below as well.

Step 2: Add UTM & ttclid Query Parameters to your TikTok Links

1. Start by adding UTM parameters to your TikTok Ad URLs. [How do I do this?]

So if your old links were something like this:

https://yourdomain.com

They will now be similar to this:

https://yourdomain.com?utm_source=tiktok&utm_medium=paidsocial

2. Add “ttclid” as a query parameter at the end of your URLs

 &ttclid=__CLICKID__

Your links that you just configured to mirror the below:

https://yourdomain.com?utm_source=tiktok&utm_medium=paidsocial

Will now have the ttclid added similar to this:

https://yourdomain.com?utm_source=tiktok&utm_medium=paidsocial&ttclid=__CLICKID__

Note: the CLICKID is TikToks “macro” and should be left exactly as it’s shown above.

More info here – https://ads.tiktok.com/marketing_api/docs?rid=959icq5stjr&id=1701890980108353

Step 3: Import your Pre-Built TikTok Tags to Google Tag Manager

TikTok is similar to Facebook where TikTok wants you to send both your Pixel events [Browser/Client-Side Tagging] and your Event API data [Server-Side Tagging] to TikTok, and TikTok will deduplicate identical events.

To set up your TikTok Pixel with the needed deduplication setup:

  1. Click here to be taken to the Pre-Built TikTok Tags (for Events API).
  2. Add in your TikTok Pixel ID > Select Download Container
  3. Log into Google Tag Manager > Select your desired Web GTM Container
  4. Navigate to Admin > Import Container > Upload the file you just downloaded from Elevar
  5. Select New under Choose Workspace > titled it Elevar TikTok Pixel + Events API
  6. Select Merge > Then select Overwrite > Then Confirm
  7. [Optional] QA the newly uploaded tags using Google Tag Manager’s Preview Mode
  8. Once you’re ready to publish, navigate to the Elevar TikTok Pixel + Events API Workspace > Select Submit at the top right > Then Publish

Step 4: Navigate to the TikTok Events API Install Wizard in your Elevar App

In your Elevar App, navigate to Server-Side > Select Add Destination > Find and select TikTok.

tiktokstep3a

You’ll be taken to an Overview Page, select Get Started

tiktokstep3b

Step 5: Select your Events

In this first step you are simply choosing what events you want enabled for your Events API.

By default, we’ve already selected the standard recommended events for you! Most likely, you won’t need to adjust anything and can just select Save to continue to the next step.

tiktok-events

If you are a subscription business then you have the option to also enable the “Subscribe” event. Selecting this option will trigger a “Subscribe” event to fire anytime your customers purchase a subscription (e.g. Subscription First Order). If you also sell one-time products via native Shopify checkout then this event can help you distinguish between first-time and subscription purchases inside of TikTok.

Note: recurring orders are handled separately in the Subscription settings below.

Step 6: Select your Product Identifier

Product ID is the most common primary “content_id” in TikTok catalog integrations. You’ll want to match the product identifier used in your Pixel/Events API tracking to the product identifier you use in your Product Catalog in TikTok.

product-identifier

If you are migrating from the native Shopify <> TikTok Channel, then you will likely leave this as Product ID. The Shopify <> TikTok Channel uses the Product ID by default, so this will map over as you currently have it.

Our pre-built tags also use Product ID by default. So if you select Product ID in this step, nothing further needs to be done. You can save & continue to the next step.

If you choose a different Product Identifier for your TikTok Events API, be sure to change your TikTok tags in Google Tag manager to match! This will need to be updated for your Product View, Add to Cart, Initiate Checkout, and Purchase TikTok Tags in Google Tag Manager.

 

Step 7: Block Transactions

This step allows you to control exactly what purchase events are sent to TikTok’s Event API. You can block orders based on Source Channel Names, Order Tags or Order Gateways.

blocktiktoktransactions

Two common scenarios where you may want to block orders are: recurring orders & offline orders. Learn how to block these orders in this guide.

Not sure if you need to block orders? Look at what Sales Channels you have in Shopify!

Step 8: Add in Your TikTok Pixel & Access Token

Add your Pixel ID, TikTok Access Token, and click Save & Continue.

tiktokpixelid

You can then choose to go live.

Step 9: Monitor Accuracy in Real Time

Once you are live then you can view transactions in real-time including all attribution data for the order:

realtimeorders

And you can also view your conversion accuracy over time:

tiktokchannelaccuracy

Step 1: Install Data Layer to Your Store

In order to deploy TikTok conversion tracking via Google Tag Manager tags, you need to have a data layer implemented on your Shopify store that pushes customer, product, and order data that TikTok’s tags require.

installdatalayer

If you don’t have a data layer for your Shopify store yet, then you can utilize Elevar’s data layer for Shopify. It’s a 1-click installation into your theme.

Step 2: Download Container for GTM

Inside of your Elevar account, go to Pre Built Tags > TikTok.

Update your TikTok pixel ID in the tag settings shown below.

tiktok-gtm-recipe-shopify

Download the container and save to your computer.

Step 3: Import Container to GTM

Next up, go to your Google Tag Manager container > Admin > Import.

import-container-gtm

Be sure to select Merge container, not overwrite.

Once you’ve imported, verify your Pixel ID variable is accurate.

Step 4: QA & Publish

Once you’re ready to go live then put GTM into preview mode.

You can navigate the site and place an order to verify your TikTok tags trigger as expected.

Remember that the data layer from step 1 needs to be live on your store in order for the variables – like revenue and order id – to populate.

Compatible Data Sources

Data Layer

Complete data layer for Google Tag Manager including all native events and variables for Shopify.
Learn More

Shopify Webhooks

Used for our server-side integrations for 100% purchase capture rate.
Learn More

FAQs

View common integration questions

  • The TikTok Sales Channel no longer allows you to separate use of the Catalog vs the Pixel in the app. You can either use another software for your TikTok Feed Management or pause your TikTok tags in GTM & use the native app for your TikTok Pixel.
  • TikTok optimizes on the Complete Payment event.