Snapchat Pixel

View source

Nuxt Config Setup

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

export default defineNuxtConfig({
  scripts: {
    registry: {
      snapchatPixel: {
        id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
      }
    }
  }
})

useScriptSnapchatPixel()

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

const { proxy } = useScriptSnapchatPixel()

proxy.snaptr('track', 'PURCHASE', { price: 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 routes all traffic through your domain for improved privacy and ad blocker bypass.

export default defineNuxtConfig({
  scripts: {
    firstParty: true,
    registry: {
      snapchatPixel: { id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'}
    }
  }
})

Example

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

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

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

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