Scripts

TikTok Pixel

Copy for LLMs

TikTok Pixel lets you measure, optimize and build audiences for your TikTok ad campaigns.

Nuxt Scripts provides a registry script composable useScriptTikTokPixel() to easily integrate TikTok Pixel in your Nuxt app.

TikTok Pixel

View source

Nuxt Config Setup

The simplest way to load TikTok Pixel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptTikTokPixel composable. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      tiktokPixel: {
        id: 'CXXXXXXXXXXXXXX'
      }
    }
  }
})

useScriptTikTokPixel()

The useScriptTikTokPixel composable lets you have fine-grain control over when and how TikTok Pixel is loaded on your site. 

const { proxy } = useScriptTikTokPixel()

proxy.ttq.track('CompletePayment', { value: 1, currency: 'USD' })

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode

This script supports First-Party Mode which is auto-enabled, routing all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      tiktokPixel: {
        id: 'CXXXXXXXXXXXXXX'
      }
    }
  }
})

Example

Using TikTok Pixel only in production while using the proxy to send events. 

<script setup lang="ts">
const { proxy } = useScriptTikTokPixel()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.ttq.track('CompletePayment', { value: 1, currency: 'USD' })
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Identifying Users

You can identify users for advanced matching:

const { proxy } = useScriptTikTokPixel()

proxy.ttq('identify', {
  email: '[email protected]',
  phone_number: '+1234567890'
})

Disabling Auto Page View

By default, TikTok Pixel tracks page views automatically. To disable:

export default defineNuxtConfig({
  scripts: {
    registry: {
      tiktokPixel: {
        id: 'YOUR_PIXEL_ID',
        trackPageView: false
      }
    }
  }
})
idstring required

Your TikTok Pixel ID.

trackPageViewboolean = true

Whether to automatically track a page view on initialization.

Edit this page
Markdown For LLMs

Stripe

Use Stripe in your Nuxt app.

Umami Analytics

Use Umami Analytics in your Nuxt app.