diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts index db980ebb..edf3e63f 100644 --- a/playground/nuxt.config.ts +++ b/playground/nuxt.config.ts @@ -16,4 +16,4 @@ export default defineNuxtConfig({ failOnError: false, }, }, -}) +}) \ No newline at end of file diff --git a/playground/pages/index.vue b/playground/pages/index.vue index 18dbd0b0..8715ca6f 100644 --- a/playground/pages/index.vue +++ b/playground/pages/index.vue @@ -26,6 +26,10 @@ const thirdParties = [ name: 'X Pixel', path: '/third-parties/x-pixel/nuxt-scripts', }, + { + name: 'Reddit Pixel', + path: '/third-parties/reddit-pixel/nuxt-scripts', + }, { name: 'Google Adsense', path: '/third-parties/google-adsense/nuxt-scripts', diff --git a/playground/pages/third-parties/reddit-pixel/default.vue b/playground/pages/third-parties/reddit-pixel/default.vue new file mode 100644 index 00000000..e2be96cf --- /dev/null +++ b/playground/pages/third-parties/reddit-pixel/default.vue @@ -0,0 +1,22 @@ + + + diff --git a/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue b/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue new file mode 100644 index 00000000..dd17beb6 --- /dev/null +++ b/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/registry.ts b/src/registry.ts index 16ebea4d..1f21467b 100644 --- a/src/registry.ts +++ b/src/registry.ts @@ -96,6 +96,16 @@ export const registry: (resolve?: (s: string) => string) => RegistryScripts = (r from: resolve('./runtime/registry/x-pixel'), }, }, + { + label: 'Reddit Pixel', + src: 'https://www.redditstatic.com/ads/pixel.js', + category: 'tracking', + logo: ` `, + import: { + name: 'useScriptRedditPixel', + from: resolve('./runtime/registry/reddit-pixel'), + }, + }, // ads { label: 'Google Adsense', diff --git a/src/runtime/registry/reddit-pixel.ts b/src/runtime/registry/reddit-pixel.ts new file mode 100644 index 00000000..3618a169 --- /dev/null +++ b/src/runtime/registry/reddit-pixel.ts @@ -0,0 +1,57 @@ +import type { UseScriptInput } from '@unhead/vue' +import { useRegistryScript } from '../utils' +import { object, string } from '#nuxt-scripts-validator' +import type { RegistryScriptInput } from '#nuxt-scripts' + +type RdtFns = + & ((event: 'init', id: string) => void) + & ((event: 'track', eventName: string) => void) + +export interface RedditPixelApi { + rdt: RdtFns & { + sendEvent: any + callQueue: any + } +} + +declare global { + interface Window extends RedditPixelApi {} +} + +export const RedditPixelOptions = object({ + id: string(), +}) +export type RedditPixelInput = RegistryScriptInput + +export function useScriptRedditPixel(_options?: RedditPixelInput) { + return useRegistryScript('redditPixel', (options) => { + return ({ + scriptInput: { + src: 'https://www.redditstatic.com/ads/pixel.js', + async: true, + } as UseScriptInput, + clientInit: import.meta.server + ? undefined + : () => { + // @ts-expect-error untyped + const rdt: RedditPixelApi['rdt'] = window.rdt = function (...args) { + if (rdt.sendEvent) { + rdt.sendEvent(rdt, args) + } + else { + rdt.callQueue.push(args) + } + } + rdt.callQueue = [] + rdt('init', options?.id) + rdt('track', 'PageVisit') + }, + // No schema needed as script doesn't require specific configuration + scriptOptions: { + use() { + return { rdt: window.rdt } + }, + }, + }) + }, _options) +}