skills.rest
MattSenter
MattSenterCOMMUNITY
Explore all skills by this author →
Website𝕏@MattSenterGitHub

senternet-site-ahrefs-web-analytics

Integrates Ahrefs Web Analytics into Vite and Next.js sites with build-time env gating and lazy loading.

Updated May 8, 2026
Search Tags:#next.js#csp#lazy loading#vite#web analytics#ahrefs#env gating
One-click install
npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-ahrefs-web-analytics-mattsenter
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senternet-site-ahrefs-web-analytics
Source: https://github.com/MattSenter/senternet-site-skills/tree/main/.claude/skills/senternet-site-ahrefs-web-analytics
Command: npx skills add https://github.com/MattSenter/senternet-site-skills --skill senternet-site-ahrefs-web-analytics-mattsenter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding analytics to a marketing site often means render-blocking scripts, leaked tracking in dev builds, and manual wiring across HTML, bundler config, CI secrets, and CSP headers. This Skill automates the full integration of Ahrefs Web Analytics so the snippet loads lazily, only in production, without conflicting with Google Analytics. ## Core Features & Use Cases - Build-time env gating: A Vite htmlPlugin transform substitutes or strips the Ahrefs block based on VITE_AHREFS_ANALYTICS_KEY, keeping dev and staging builds analytics-free. - Lazy, non-blocking loading: The script injects after window.load (or via next/script with lazyOnload on Next.js), so it never blocks FCP or LCP. - Full pipeline wiring: Covers GitHub Actions secrets, prerender script stripping, and CSP allowlisting for analytics.ahrefs.com. - Use Case: You have a Vite + React marketing site already using GA4 and want privacy-friendly, cookieless analytics alongside it. Run this Skill with your Ahrefs data-key and it updates index.html, vite.config.ts, env files, CI secrets, prerender logic, and CSP in one pass. ## Quick Start Add Ahrefs Web Analytics to my site using the tracking key a1b2c3d4-5678-90ab-cdef-1234567890ab.

Frequently Asked Questions about senternet-site-ahrefs-web-analytics

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

FAQPage Schema
How do I add Ahrefs Web Analytics to a Vite React site?▼

Insert the Ahrefs script block between HTML comment markers in index.html, then extend the Vite htmlPlugin to substitute the data-key from VITE_AHREFS_ANALYTICS_KEY at build time. The script loads after window.load so it never blocks rendering, and dev builds strip the block entirely.

Can I use Ahrefs Web Analytics together with Google Analytics?▼

Yes, Ahrefs Web Analytics and Google Analytics do not conflict and can run side by side. The Vite plugin handles the Ahrefs block alongside the existing GA branch, and both scripts load independently.

Does Ahrefs Web Analytics work with Next.js?▼

Yes, on Next.js the script loads via next/script in app/layout.tsx with strategy lazyOnload, gated on NEXT_PUBLIC_AHREFKS_KEY being set. The env var must also be listed in apphosting.yaml with BUILD availability, and no prerender stripping is needed.

Why is my Ahrefs analytics script blocked after adding a CSP?▼

A default Content Security Policy with script-src 'self' blocks the Ahrefs script and connect-src 'self' blocks its data beacons. Add https://analytics.ahrefs.com to both script-src and connect-src in firebase.json, then verify no CSP violations appear in DevTools.

Why is analytics missing from my production build deployed via GitHub Actions?▼

The .env.production file is not committed, so CI builds have no key unless VITE_AHREFS_ANALYTICS_KEY is added to the workflow's env block and created as a repo secret with gh secret set. Without both edits, the build silently strips the analytics block.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

vite-agents-project-scaffolder

Generate Vite project scaffolds with configuration and starter files.

Official
Advanced
firebasefirebase
402

firebase-hosting-basics

Deploys web apps and services to Firebase Hosting with integrated CDN and SSL.

Official
Intermediate
Sir-chawakornSir-chawakorn
9

configure-security-headers-csp

Configure HTTP security headers and strict nonce-based Content-Security-Policy directives.

Community
Advanced
OpenClaudiaOpenClaudia
674

ahrefs-python

Query Ahrefs SEO data in Python using the typed ahrefs-python SDK.

Official
Intermediate