senternet-site-ads-reddit-pixel

Installs the Reddit Ads conversion pixel in React and Next.js sites with build-time gating.

Updated May 8, 2026
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-ads-reddit-pixel-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-ads-reddit-pixel
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-ads-reddit-pixel
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-ads-reddit-pixel-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Marketing sites running Reddit ad campaigns need conversion tracking, but wiring the Reddit pixel incorrectly causes double-loading in prerendered HTML, crashes before hydration, or fires test events from development environments. ## Core Features & Use Cases - Build-time gating: The pixel only loads when VITE_REDDIT_PIXEL_ID (or NEXT_PUBLIC_REDDIT_PIXEL_ID on Next.js) is set, so development builds never send test events. - Hydration-safe bootstrap: A stub in index.html initializes the window.rdt queue before React hydrates, so onClick tracking calls never throw. - Prerender stripping: Marker comments let the prerender script remove the pixel from static HTML snapshots to prevent double-loading. - Use Case: You launch a Reddit ad campaign for an app landing page and need PageVisit events on every load plus a Lead event when visitors click the App Store link. ## Quick Start Ask the AI to install the Reddit conversion pixel on the site using pixel ID t2_XXXXXXXX and track a Lead event on the App Store button click.

Frequently Asked Questions about senternet-site-ads-reddit-pixel

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add the Reddit pixel to a React site?▼

Add a bootstrap stub to index.html that initializes window.rdt, create a RedditPixel component that loads pixel.js and calls init with your pixel ID, and mount it in the app root. Gate everything on the VITE_REDDIT_PIXEL_ID environment variable.

How do I track Reddit conversion events like Lead or Purchase?▼

Call trackRedditEvent with the event name, such as trackRedditEvent('Lead'), inside the relevant handler like an App Store link onClick. Supported event names include PageVisit, ViewContent, Lead, AddToCart, Purchase, and SignUp.

Does the Reddit pixel work with Next.js App Router?▼

Yes, but use NEXT_PUBLIC_REDDIT_PIXEL_ID listed in apphosting.yaml with BUILD availability, load scripts via next/script with lazyOnload in app/layout.tsx, and make the tracking component a client component keyed off usePathname for client-side navigation.

Why does the Reddit pixel fire twice on prerendered pages?▼

The pixel script gets baked into the static HTML snapshot and then loads again when React hydrates. Strip it in the prerender script with a regex replacement and use comment markers around the bootstrap stub so it can be removed.

How do I prevent Reddit pixel events from firing in development?▼

Leave VITE_REDDIT_PIXEL_ID empty in .env.development and set it only in .env.production. The component checks the variable before loading pixel.js or calling init, so no events fire when it is unset.