Reddit Pixel

Reddit Pixel helps you track conversions and build audiences for your Reddit advertising campaigns.

Nuxt Scripts provides a registry script composable useScriptRedditPixel to easily integrate Reddit Pixel in your Nuxt app.

Nuxt Config Setup

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

If you don't plan to send custom events you can use the Environment overrides to disable the script in development.

export default defineNuxtConfig({
  scripts: {
    registry: {
      redditPixel: {
        id: 'YOUR_ID'
      }
    }
  }
})

export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        redditPixel: {
          id: 'YOUR_ID',
        }
      }
    }
  }
})

With Environment Variables

If you prefer to configure your id using environment variables.

export default defineNuxtConfig({
  scripts: {
    registry: {
      redditPixel: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        redditPixel: {
          id: '', // NUXT_PUBLIC_SCRIPTS_REDDIT_PIXEL_ID
        },
      },
    },
  },
})

NUXT_PUBLIC_SCRIPTS_REDDIT_PIXEL_ID=<YOUR_ID>

useScriptRedditPixel

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

const { proxy } = useScriptRedditPixel({
  id: 'YOUR_ID'
})
// example
proxy.rdt('track', 'Lead')

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

RedditPixelApi

export interface RedditPixelApi {
  rdt: RdtFns & {
    sendEvent: (rdt: RedditPixelApi['rdt'], args: unknown[]) => void
    callQueue: unknown[]
  }
}
type RdtFns
  = & ((event: 'init', id: string) => void)
    & ((event: 'track', eventName: string) => void)

Config Schema

You must provide the options when setting up the script for the first time.

export const RedditPixelOptions = object({
  id: string(),
})

Example

Using Reddit Pixel only in production while using rdt to send a tracking event.

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

// noop in development, ssr
// just works in production, client
function trackConversion() {
  proxy.rdt('track', 'Lead')
}
</script>

<template>
  <div>
    <button @click="trackConversion">
      Track Conversion
    </button>
  </div>
</template>