Installing TikTok Pixel through Google Tag Manager gives you more flexibility than the native Shopify app, especially if you are already managing other tracking tags through GTM or need to customise event parameters beyond what the app supports by default.
This guide walks through the full GTM setup: base code installation, standard event firing, and connecting the TikTok Events API for server-side backup.
When to Use GTM for TikTok Pixel (vs the Shopify App)
Use the TikTok Shopify app if you want a quick setup with minimal configuration. Use GTM if:
- You are already managing all tracking through GTM and want a single source of truth
- You need to customise event parameters beyond what the Shopify app supports
- You want to control exactly when and where events fire based on custom triggers
- You are running a headless Shopify setup where the native app does not install cleanly
Do not run both the TikTok Shopify app and a GTM implementation simultaneously. This will create duplicate events.
Step 1: Get Your TikTok Pixel ID
Go to TikTok Ads Manager → Assets → Events → Web Events. Create a new pixel or select an existing one. Find the Pixel ID (a string of numbers and letters). You will need this for the GTM tag.
Step 2: Install Google Tag Manager on Shopify
If GTM is not already installed on your Shopify store, add the GTM container snippet to your theme.liquid file. Place the head snippet just after the opening head tag, and the body snippet just after the opening body tag.
In newer Shopify themes, use the theme editor to add a custom code section, or add it directly in Online Store → Themes → Edit code → theme.liquid.
Step 3: Create the TikTok Base Code Tag in GTM
In GTM, create a new tag:
- Tag type: Custom HTML
- Trigger: All Pages
Paste the TikTok base pixel code in the HTML field. Replace YOUR_PIXEL_ID with your actual pixel ID. The base code initialises the TikTok Pixel on every page but does not fire any standard events yet.
Enable Support document.write if offered, and set the tag to fire as early as possible (top of page) for the most accurate session data.
Step 4: Create Standard Event Tags
For each standard event, create a separate GTM tag. For a Shopify store, the minimum events to implement are:
ViewContent Tag
- Tag type: Custom HTML
- Trigger: Product pages (filter by page URL containing /products/)
- Code: ttq.track(‘ViewContent’, { content_id: ‘{{product id}}’, content_name: ‘{{product title}}’, content_type: ‘product’, currency: ‘{{currency}}’, value: {{product price}} })
AddToCart Tag
- Tag type: Custom HTML
- Trigger: dataLayer event add_to_cart (pushed by Shopify when user clicks Add to Cart)
- Pull product data from the dataLayer variables: item_id, item_name, price, quantity
InitiateCheckout Tag
- Tag type: Custom HTML
- Trigger: Clicks on checkout button, or begin_checkout dataLayer event
CompletePayment Tag
- Tag type: Custom HTML
- Trigger: Purchase page (thank you page) — filter by URL containing /thank_you or using the Shopify purchase dataLayer event
- Include order_id for deduplication
Step 5: Set Up GTM Variables for Dynamic Data
Create GTM Variables to pull dynamic values from the Shopify dataLayer. Common variables you need:
- Product ID — from ecommerce.items[0].item_id
- Product name — from ecommerce.items[0].item_name
- Purchase value — from ecommerce.value
- Order ID — from ecommerce.transaction_id
- Currency — from ecommerce.currency
Step 6: Connect TikTok Events API
GTM alone gives you browser-side pixel events. For server-side backup, you have two options:
- Use TikTok’s Events API directly — requires server-side development to send events from your backend
- Use Server-Side GTM — route GTM tags through a server-side container, which then forwards events to TikTok via the Events API
For most Shopify stores, the easiest path is to install the TikTok Shopify app for Events API only (disable the pixel portion) and let GTM handle the browser events. The Shopify app’s Customer Events integration handles the server-side purchase events cleanly.
Common GTM TikTok Pixel Mistakes
- CompletePayment firing on every order confirmation page view — if a customer refreshes the thank you page, the event fires twice. Use a GTM trigger that checks if the purchase event has already been sent in this session.
- Missing order_id — without the transaction ID, TikTok cannot deduplicate between the browser pixel and Events API, causing double-counting.
- Base code loading after standard events — if your event tags fire before the base code initialises ttq, the events will not be queued correctly. Ensure the base code tag fires first using tag sequencing in GTM.
Verify and Test Before Going Live
Use GTM’s Preview mode to test every tag in a real browser session. Make a test purchase and confirm that ViewContent, AddToCart, InitiateCheckout, and CompletePayment all fire in the right order with the correct data in each event payload.
Then check TikTok Events Manager to confirm the events are arriving and that Event Match Quality is at an acceptable level.
Need Help With Your TikTok GTM Setup?
GTM-based TikTok Pixel setups have more moving parts than the Shopify app, and small mistakes in variable configuration or trigger logic can cause significant tracking gaps. If you are not seeing expected events in TikTok Events Manager, we can audit the full setup and identify exactly where the breakdown is.