How to Install TikTok Pixel: Step-by-Step Setup Guide | OpsBlu Docs

How to Install TikTok Pixel: Step-by-Step Setup Guide

Install the TikTok Pixel on your website using manual code, Google Tag Manager, or the TikTok Events API.

Installation Methods Overview

TikTok Pixel can be installed via multiple methods depending on your platform and technical requirements.

Method Best For Complexity Flexibility
Direct Installation Static sites, custom platforms Low High
Google Tag Manager Dynamic sites, frequent updates Medium Very High
Platform Plugin Shopify, WooCommerce, etc. Very Low Low
Mobile SDK iOS/Android apps Medium High

Creating Your TikTok Pixel

Before installation, create your pixel in Events Manager.

Step-by-Step: Create Pixel

  1. Access Events Manager

  2. Create New Pixel

    • Click Manage (Web Events)
    • Click Create Pixel
    • Name your pixel (e.g., "Main Website Pixel")
    • Select Manually Install Pixel Code or Partner Platform

  3. Get Pixel Code

    • Copy your Pixel ID (format: C1234567890ABCDEFG)
    • Copy the base pixel code
    • Save for implementation

Direct HTML Implementation

Basic Installation

Install on every page of your website, preferably in the <head> section.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>

  <!-- TikTok Pixel Code -->
  <script>
  !function (w, d, t) {
    w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

    ttq.load('YOUR_PIXEL_ID');
    ttq.page();
  }(window, document, 'ttq');
  </script>
  <!-- End TikTok Pixel Code -->

</head>
<body>
  <!-- Your page content -->
</body>
</html>

Template-Based Installation

For sites using templates (header.php, master layout, etc.):

WordPress (header.php):

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <?php wp_head(); ?>

  <!-- TikTok Pixel -->
  <script>
  !function (w, d, t) {
    // TikTok Pixel base code
    ttq.load('<?php echo get_option('tiktok_pixel_id'); ?>');
    ttq.page();
  }(window, document, 'ttq');
  </script>
</head>

Laravel (Blade Template):

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <title>@yield('title')</title>

    <!-- TikTok Pixel -->
    @if(config('services.tiktok.pixel_id'))
    <script>
    !function (w, d, t) {
      // TikTok Pixel base code
      ttq.load('{{ config('services.tiktok.pixel_id') }}');
      ttq.page();
    }(window, document, 'ttq');
    </script>
    @endif
</head>

React (index.html or Layout component):

// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>

  <!-- TikTok Pixel -->
  <script>
  !function (w, d, t) {
    // TikTok Pixel base code
    ttq.load('%REACT_APP_TIKTOK_PIXEL_ID%');
    ttq.page();
  }(window, document, 'ttq');
  </script>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Environment-Specific Installation

Load different pixels for development/staging/production:

<script>
!function (w, d, t) {
  // TikTok Pixel base code here...

  // Determine environment
  var hostname = window.location.hostname;
  var pixelId;

  if (hostname === 'localhost' || hostname.includes('dev.')) {
    pixelId = 'DEV_PIXEL_ID';  // Development
  } else if (hostname.includes('staging.')) {
    pixelId = 'STAGING_PIXEL_ID';  // Staging
  } else {
    pixelId = 'PRODUCTION_PIXEL_ID';  // Production
  }

  ttq.load(pixelId);
  ttq.page();
}(window, document, 'ttq');
</script>

Google Tag Manager Installation

Prerequisites

  • GTM container installed on your website
  • GTM publish access

Step 1: Create Pixel ID Variable

  1. In GTM, go to Variables > New
  2. Variable Configuration > Constant
  3. Name: TikTok Pixel ID
  4. Value: YOUR_PIXEL_ID
  5. Save

Step 2: Create Base Pixel Tag

  1. Tags > New
  2. Tag Configuration > Custom HTML
  3. Name: TikTok Pixel - Base Code
  4. Paste this code:
<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};

  ttq.load('{{TikTok Pixel ID}}');
  ttq.page();
}(window, document, 'ttq');
</script>
  1. Triggering > All Pages
  2. Save

Step 3: Create Event Tags

Purchase Event Example:

  1. Tags > New
  2. Tag Configuration > Custom HTML
  3. Name: TikTok - Purchase
  4. HTML:
<script>
window.ttq = window.ttq || [];
ttq.track('CompletePayment', {
  value: {{Transaction Total}},
  currency: '{{Currency}}',
  order_id: {{Transaction ID}},
  contents: {{Transaction Products}}
});
</script>
  1. Triggering > Create trigger
    • Trigger Type: Custom Event
    • Event Name: purchase (or your dataLayer event)
  2. Save

Step 4: Set Up DataLayer Variables

Create GTM variables to capture dataLayer data:

Transaction Total Variable:

  1. Variables > New
  2. Variable Configuration > Data Layer Variable
  3. Name: Transaction Total
  4. Data Layer Variable Name: ecommerce.purchase.actionField.revenue
  5. Save

Transaction ID Variable:

  1. Variables > New
  2. Variable Configuration > Data Layer Variable
  3. Name: Transaction ID
  4. Data Layer Variable Name: ecommerce.purchase.actionField.id
  5. Save

Step 5: Test and Publish

  1. Preview mode in GTM
  2. Navigate to your site
  3. Verify tags fire using Tag Assistant
  4. Check TikTok Pixel Helper
  5. Submit and Publish GTM container

GTM Advanced: DataLayer Integration

Website dataLayer push (on purchase):

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'ORDER_12345',
        'revenue': '199.98',
        'currency': 'USD'
      },
      'products': [{
        'id': 'SKU_123',
        'name': 'Blue Widget',
        'price': '99.99',
        'quantity': 2
      }]
    }
  }
});

GTM Tag (using dataLayer):

<script>
ttq.track('CompletePayment', {
  value: {{Transaction Total}},
  currency: 'USD',
  order_id: {{Transaction ID}},
  contents: {{Transaction Products}}
});
</script>

Platform-Specific Installations

Shopify

  1. Install TikTok App

    • Shopify Admin > Apps > Visit Shopify App Store
    • Search "TikTok"
    • Click "Add app"

  2. Connect Accounts

    • Log in to TikTok for Business
    • Authorize Shopify to share data
    • Select or create ad account

  3. Configure Pixel

    • Pixel auto-installs on all pages
    • Events auto-configure
    • Product catalog syncs

Method 2: Manual Installation

  1. Get Pixel Code from TikTok Events Manager
  2. Shopify Admin > Online Store > Themes
  3. Actions > Edit Code
  4. Open theme.liquid
  5. Paste pixel code before </head>
  6. Save

Purchase tracking (order status page):

{% if first_time_accessed %}
<script>
ttq.track('CompletePayment', {
  value: {{ order.total_price | money_without_currency }},
  currency: '{{ order.currency }}',
  order_id: '{{ order.order_number }}',
  contents: [
    {% for line_item in order.line_items %}
    {
      content_id: '{{ line_item.product_id }}',
      content_name: '{{ line_item.product.title | escape }}',
      quantity: {{ line_item.quantity }},
      price: {{ line_item.price | money_without_currency }}
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
});
</script>
{% endif %}

WooCommerce (WordPress)

  1. Install Plugin

    • WordPress Admin > Plugins > Add New
    • Search "PixelYourSite" or "TikTok for WooCommerce"
    • Install and Activate

  2. Configure

Method 2: Manual Code

functions.php:

// Add TikTok Pixel to header
add_action('wp_head', 'add_tiktok_pixel_header');
function add_tiktok_pixel_header() {
  if (!is_admin()) {
    ?>
    <script>
    !function (w, d, t) {
      // TikTok Pixel base code
      ttq.load('<?php echo get_option('tiktok_pixel_id'); ?>');
      ttq.page();
    }(window, document, 'ttq');
    </script>
    <?php
  }
}

// Track WooCommerce purchase
add_action('woocommerce_thankyou', 'tiktok_track_purchase', 10, 1);
function tiktok_track_purchase($order_id) {
  if (!$order_id) return;

  $order = wc_get_order($order_id);
  if (!$order) return;

  $items = array();
  foreach ($order->get_items() as $item) {
    $product = $item->get_product();
    $items[] = array(
      'content_id' => $product->get_sku() ?: $product->get_id(),
      'content_name' => $product->get_name(),
      'quantity' => $item->get_quantity(),
      'price' => floatval($product->get_price())
    );
  }
  ?>
  <script>
  if (typeof ttq !== 'undefined') {
    ttq.track('CompletePayment', {
      value: <?php echo $order->get_total(); ?>,
      currency: '<?php echo $order->get_currency(); ?>',
      order_id: '<?php echo $order->get_order_number(); ?>',
      contents: <?php echo json_encode($items); ?>
    });
  }
  </script>
  <?php
}

BigCommerce

  1. Install App

    • BigCommerce Control Panel > Apps > Marketplace
    • Search "TikTok"
    • Install app

  2. Connect Accounts

  3. Configure

    • Pixel auto-installs
    • Enable product sync
    • Configure events

Magento 2

  1. Download Extension

    • Find TikTok Pixel extension for Magento
    • Upload to app/code/

  2. Enable Module

bin/magento module:enable TikTok_Pixel
bin/magento setup:upgrade
bin/magento cache:flush
  1. Configure
    • Admin > Stores > Configuration > TikTok
    • Enter Pixel ID
    • Enable tracking
    • Save config

Mobile SDK Installation

iOS SDK (Swift)

Step 1: Install via CocoaPods

Podfile:

platform :ios, '11.0'
use_frameworks!

target 'YourApp' do
  pod 'TikTokBusinessSDK'
end

Install:

pod install

Step 2: Initialize SDK

AppDelegate.swift:

import UIKit
import TikTokBusinessSDK

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

    // Initialize TikTok SDK
    TikTokBusiness.configure(
      accessToken: "YOUR_ACCESS_TOKEN",
      appId: "YOUR_APP_ID"
    )

    return true
  }
}

Step 3: Track Events

Purchase event:

import TikTokBusinessSDK

// Track purchase
TikTokBusiness.track(
  event: .completePayment,
  withProperties: [
    "value": 99.99,
    "currency": "USD",
    "content_type": "product",
    "content_id": "SKU_123"
  ]
)

Standard events:

// View product
TikTokBusiness.track(
  event: .viewContent,
  withProperties: [
    "content_type": "product",
    "content_id": "SKU_123",
    "value": 99.99,
    "currency": "USD"
  ]
)

// Add to cart
TikTokBusiness.track(
  event: .addToCart,
  withProperties: [
    "content_id": "SKU_123",
    "quantity": 1,
    "price": 99.99,
    "currency": "USD"
  ]
)

Android SDK (Kotlin)

Step 1: Add Dependency

build.gradle (app level):

dependencies {
    implementation 'com.tiktok.android:business-sdk:1.0.0'
}

Step 2: Initialize SDK

Application class:

import android.app.Application
import com.tiktok.business.TikTokBusinessSDK

class MyApplication : Application() {
  override fun onCreate() {
    super.onCreate()

    // Initialize TikTok SDK
    TikTokBusinessSDK.init(
      context = this,
      accessToken = "YOUR_ACCESS_TOKEN",
      appId = "YOUR_APP_ID"
    )
  }
}

AndroidManifest.xml:

<application
  android:name=".MyApplication"
  ...>
</application>

Step 3: Track Events

Purchase event:

import com.tiktok.business.TikTokBusinessSDK

// Track purchase
TikTokBusinessSDK.trackEvent(
  "CompletePayment",
  mapOf(
    "value" to 99.99,
    "currency" to "USD",
    "content_type" to "product",
    "content_id" to "SKU_123",
    "order_id" to "ORDER_12345"
  )
)

Standard events:

// View product
TikTokBusinessSDK.trackEvent(
  "ViewContent",
  mapOf(
    "content_type" to "product",
    "content_id" to "SKU_123",
    "value" to 99.99,
    "currency" to "USD"
  )
)

// Add to cart
TikTokBusinessSDK.trackEvent(
  "AddToCart",
  mapOf(
    "content_id" to "SKU_123",
    "quantity" to 1,
    "price" to 99.99,
    "currency" to "USD"
  )
)

React Native

Installation:

npm install react-native-tiktok-business-sdk
# or
yarn add react-native-tiktok-business-sdk

iOS setup:

cd ios && pod install

Usage:

import TikTokBusiness from 'react-native-tiktok-business-sdk';

// Initialize
TikTokBusiness.configure({
  accessToken: 'YOUR_ACCESS_TOKEN',
  appId: 'YOUR_APP_ID'
});

// Track event
TikTokBusiness.track('CompletePayment', {
  value: 99.99,
  currency: 'USD',
  order_id: 'ORDER_12345'
});

Verification Steps

1. Check Installation

Browser Console:

// Check if ttq exists
if (typeof ttq !== 'undefined') {
  console.log('✓ TikTok Pixel loaded');
  console.log('Pixel IDs:', Object.keys(ttq._i));
} else {
  console.error('✗ TikTok Pixel not found');
}

2. Use TikTok Pixel Helper

  1. Install extension from Chrome Web Store
  2. Navigate to your website
  3. Click Pixel Helper icon
  4. Verify green checkmark and pixel ID
  5. Check PageView event fired

3. Test Events in Events Manager

  1. Events Manager > Select Pixel
  2. Click Test Events
  3. Enter your website URL
  4. Navigate site and trigger events
  5. Verify events appear in real-time

4. Check Network Requests

  1. Open browser DevTools (F12)
  2. Go to Network tab
  3. Filter by "tiktok"
  4. Look for requests to analytics.tiktok.com
  5. Verify 200 status codes

Troubleshooting Installation

Pixel Not Loading

Issue Solution
ttq is not defined Ensure pixel code loads before event code
No network requests Check if ad blocker is active
404 on events.js Verify pixel ID is correct
Mixed content error Ensure site uses HTTPS

GTM Issues

Issue Solution
Tag not firing Check trigger configuration
Wrong order Set tag sequencing (base before events)
Variables undefined Verify dataLayer variable names

Mobile SDK Issues

Issue Solution
Build errors Check SDK version compatibility
Events not tracking Verify access token and app ID
Crashes on init Ensure initialization in Application class

Best Practices

  1. Load pixel in <head> for earliest initialization
  2. Use async loading (included in base code)
  3. Single pixel per site unless multiple business units
  4. Test in staging before production deployment
  5. Use environment variables for pixel IDs
  6. Monitor Events Manager after installation
  7. Document your implementation for team reference
  8. Keep SDK updated for mobile apps

Next Steps

After installation:

  1. Implement event tracking - Event Tracking Guide
  2. Set up data layer - Data Layer Setup
  3. Test thoroughly - Use Pixel Helper and Test Events
  4. Monitor performance - Check Events Manager regularly
Back to top