skills.rest
nayounghye
nayounghyeCOMMUNITY
Explore all skills by this author →
GitHub

tracking

Installs advertising and analytics tracking pixels into Next.js, Nuxt, or vanilla HTML projects.

Updated Jun 4, 2026
Search Tags:#next.js#csp#tracking#google analytics#meta pixel#analytics events#tag installation
One-click install
npx skills add https://github.com/nayounghye/my-claude-skills --skill tracking-nayounghye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tracking
Source: https://github.com/nayounghye/my-claude-skills/tree/main/tracking
Command: npx skills add https://github.com/nayounghye/my-claude-skills --skill tracking-nayounghye

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up marketing tracking codes (Meta Pixel, Google Ads/GA4, TikTok, Clarity, etc.) in a new project is repetitive and error-prone, especially when scripts must be hardcoded into the <head> rather than loaded via environment variables, which causes initialization timing failures. ## Core Features & Use Cases - Framework Auto-Detection: Detects Next.js, Nuxt, or vanilla/Vite projects and injects scripts using the correct mechanism (dangerouslySetInnerHTML, app.head.script, or direct <script> tags). - Event Wrapper Generation: Creates lib/analytics/ wrapper files per platform plus a unified trackEvent() hub with an AnalyticsEvent discriminated union type. - CSP Whitelist Updates: Adds each platform's required domains to Content Security Policy rules in middleware. - Use Case: A marketer hands you Meta Pixel and Google Ads snippets for a new Next.js landing page; run the skill to inject both into app/layout.tsx, generate typed event wrappers, and update CSP in one pass. ## Quick Start Run /tracking meta google clarity and paste each platform's snippet when prompted to install all tracking codes into the project.

Frequently Asked Questions about tracking

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

FAQPage Schema
How do I install Meta Pixel and Google Ads tracking in a Next.js app?▼

Paste the official snippets from each platform dashboard, then inject them into app/layout.tsx using script tags with dangerouslySetInnerHTML. Hardcode the tracking IDs directly rather than using NEXT_PUBLIC environment variables to avoid initialization timing issues.

How to add tracking scripts to Nuxt or vanilla HTML projects?▼

For Nuxt, add scripts to the app.head.script array in nuxt.config.ts. For vanilla or Vite projects, insert the script tags directly into the head section of index.html.

Why should tracking IDs not use environment variables?▼

DOM load timing and environment variable hydration timing differ, so tracking SDKs fail to recognize the ID at initialization when loaded via process.env. Hardcoding the snippet inline in the head guarantees the SDK reads the ID on first load.

Does installing tracking pixels require CSP changes?▼

Yes. Each platform requires its domains whitelisted in script-src, connect-src, and img-src directives, for example connect.facebook.net for Meta and *.clarity.ms for Microsoft Clarity. The skill updates middleware CSP configuration automatically.

How do I fire conversion events after installing tracking pixels?▼

Use the generated trackEvent function from lib/analytics/index.ts, which dispatches a typed AnalyticsEvent to all installed platforms in parallel. Call it at conversion points such as successful payments, extending the union type with project-specific events.

Related Skills

Explore More Software Engineering Skills→
Partners-in-BizPartners-in-Biz

ads-tiktok

Analyze TikTok Ads campaigns for creative quality, tracking, bidding, and structure.

Community
Advanced
ulpi-ioulpi-io
4

launch-analytics

Configures analytics tracking and attribution for product launches and campaigns.

Official
Advanced
jhillbhtjhillbht

gtm-debug-agent

Automate GTM debugging by validating tag firing, dataLayer events, and consent mode.

Community
Advanced
omeraltnomeraltn

agency-tracking-measurement-specialist

Audit paid-media conversion tracking and tag management architectures across GA4, GTM, and Meta CAPI.

Community
Advanced