From 1754194ce707f8f414104db744fb2ba8a7a246db Mon Sep 17 00:00:00 2001 From: Dennis Date: Tue, 1 Oct 2024 10:20:28 +0200 Subject: [PATCH 1/2] feat: add Reddit pixel --- playground/nuxt.config.ts | 2 +- playground/pages/index.vue | 4 ++ .../third-parties/reddit-pixel/default.vue | 22 +++++++ .../reddit-pixel/nuxt-scripts.vue | 27 +++++++++ src/registry.ts | 10 ++++ src/runtime/registry/reddit-pixel.ts | 57 +++++++++++++++++++ 6 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 playground/pages/third-parties/reddit-pixel/default.vue create mode 100644 playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue create mode 100644 src/runtime/registry/reddit-pixel.ts 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..5d2f1a58 --- /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..ac5c7c3e --- /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) +} From c0b73761a4c201e6e069350e1111041d5f322607 Mon Sep 17 00:00:00 2001 From: Dennis Date: Tue, 1 Oct 2024 10:23:38 +0200 Subject: [PATCH 2/2] fix: remove private pixel id --- playground/pages/third-parties/reddit-pixel/default.vue | 2 +- playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/playground/pages/third-parties/reddit-pixel/default.vue b/playground/pages/third-parties/reddit-pixel/default.vue index 5d2f1a58..e2be96cf 100644 --- a/playground/pages/third-parties/reddit-pixel/default.vue +++ b/playground/pages/third-parties/reddit-pixel/default.vue @@ -8,7 +8,7 @@ useHead({ }) function triggerEvent() { - window.rdt('init', 'a2_fr1pptiy8tay') + window.rdt('init', '') window.rdt('track', 'PageVisit') } diff --git a/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue b/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue index ac5c7c3e..dd17beb6 100644 --- a/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue +++ b/playground/pages/third-parties/reddit-pixel/nuxt-scripts.vue @@ -6,7 +6,7 @@ useHead({ }) // composables return the underlying api as a proxy object and the script state -const { status, rdt } = useScriptRedditPixel({ id: 'a2_fr1pptiy8tay' }) +const { status, rdt } = useScriptRedditPixel({ id: '' }) // this will be triggered once the script is ready async function triggerEvent() { rdt('track', 'PageVisit')