enable-analytics
Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Works with
---
name: enable-analytics
description: Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
license: MIT
---
# Enable Analytics
The current storefront includes support for Vercel Web Analytics and Vercel Speed Insights, with each integration disabled by default in `lib/config.ts`. This skill enables or adds those integrations and can also add Google Tag Manager using the recommended integration.
## Before you start
Ask the user two questions in order:
### 1. Do you need to add or change Vercel Analytics and/or Vercel Speed Insights?
- **Enable both** — page views, custom events, and Core Web Vitals
- **Analytics only** — page view and custom event tracking via `@vercel/analytics`
- **Speed Insights only** — Core Web Vitals monitoring via `@vercel/speed-insights`
- **Neither** — keep both integrations disabled
### 2. Do you want Google Tag Manager?
If yes, ask for the GTM container ID (e.g. `GTM-XXXXXX`). This will be stored in the `NEXT_PUBLIC_GTM_ID` environment variable.
Wait for the user to answer both questions before proceeding.
---
## Part A: Vercel Analytics and Speed Insights
If the storefront has `analytics` configuration in `lib/config.ts`, enable only the selected integrations. If the user selected neither, keep both integration gates disabled and skip the remaining steps in this section.
```ts
analytics: {
shopify: { consentMode: "default-banner", isEnabled: false },
speedInsights: { isEnabled: false },
vercel: { isEnabled: false },
},
```
The `shopify` gate is separate: it controls Shopify storefront analytics, which the storefront already ships. Leave it alone unless the user asked about Shopify analytics, and see Part D.
### A1. Install dependencies
For older storefronts without the integrations, install only the packages the user selected:
```bash
# Both
pnpm add @vercel/analytics @vercel/speed-insights
# Analytics only
pnpm add @vercel/analytics
# Speed Insights only
pnpm add @vercel/speed-insights
```
For older storefronts, create or update the root analytics component described below. Each library handles its own client-side behavior internally.
---
## Part B: Google Tag Manager
Skip this section if the user did not want GTM.
### B1. Install dependency
```bash
pnpm add @next/third-parties
```
### B2. Add environment variable
Add to `.env.example`:
```
# Google Tag Manager (optional)
NEXT_PUBLIC_GTM_ID="GTM-XXXXXX"
```
Set the actual value in `.env.local` or in the Vercel dashboard under Environment Variables.
### B3. Add GTM to `components/analytics.tsx`
Import `GoogleTagManager` from `@next/third-parties/google`. Read `NEXT_PUBLIC_GTM_ID` in the analytics component and render `<GoogleTagManager gtmId={gtmId} />` only when the value exists. If the storefront extends `lib/config.ts` with a GTM integration gate, apply that gate inside the same component.
---
## Part C: Root analytics integration
### C1. Create or update `components/analytics.tsx`
Compose the selected providers in the root analytics component and apply each integration gate there:
```tsx
import { GoogleTagManager } from "@next/third-parties/google";
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { shopConfig } from "@/lib/config";
export function AnalyticsComponents() {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
return (
<>
{shopConfig.analytics.vercel.isEnabled ? <Analytics /> : null}
{shopConfig.analytics.speedInsights.isEnabled ? <SpeedInsights /> : null}
{gtmId ? <GoogleTagManager gtmId={gtmId} /> : null}
</>
);
}
```
Remove imports for integrations the storefront does not support.
### C2. Update `app/layout.tsx`
Render the root analytics component near the end of `<body>`, without changing the storefront's translation-provider boundaries:
```tsx
import { AnalyticsComponents } from "@/components/analytics";
```
```tsx
<body ...>
{/* ... existing layout content and scoped providers ... */}
<Suspense>
<AnalyticsComponents locale={locale} />
</Suspense>
</body>
```
Do not pass the complete message catalog to a root `NextIntlClientProvider` for analytics. The root component remains mounted as the extension point for current and future analytics providers. Provider gates stay inside it so disabled integrations are not mounted.
## Part D: Shopify storefront analytics
Only make changes here if the user asked about Shopify analytics.
The storefront sends page, product, collection, search, cart-view, and confirmed cart-change events through Hydrogen's analytics bus. It is disabled by default and requires no credentials beyond the Storefront API variables the storefront already needs. To turn Shopify's built-in analytics destination on, set `analytics.shopify.isEnabled` to `true` in `lib/config.ts`.
Consent mode is set by `analytics.shopify.consentMode` in `lib/config.ts` and defaults to `default-banner`, which renders Shopify's hosted privacy banner for visitors in regions that require consent. Use `custom-banner` when the storefront supplies its own consent UI. Do not ship `no-banner` in production unless consent is handled elsewhere, because visitors in those regions can never grant consent and their events are dropped.
Third-party analytics can subscribe through the same destination API, so consent gating and buffered replay remain centralized. Register destinations with `addAnalyticsDestination()` from `lib/analytics/client.ts`; do not publish cart-change events manually.
## Guardrails
- Keep root analytics providers and their gates in `components/analytics.tsx`.
- Always mount `<AnalyticsComponents />` from the root layout, even when every provider is disabled.
- The GTM container ID must come from `NEXT_PUBLIC_GTM_ID`, never hardcoded. The provider renders nothing if the env var is missing.
- Use `@next/third-parties/google` for GTM, not a manual `<script>` tag. The Next.js component handles script loading and performance optimization.
- Import paths: use `@vercel/analytics/next` and `@vercel/speed-insights/next` (the `/next` subpath), not the root package exports.
- Add `NEXT_PUBLIC_GTM_ID` to `.env.example` with a placeholder value so other developers know the variable exists.More SEO & Marketing skills
ai-video-generation
skills-101/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
skills-101/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image
ai-avatar-video
skills-101/superpowers
Create AI avatar and talking head videos via inference.sh CLI. Recommended: P-Video-Avatar (fastest, cheapest, built-in TTS). Also: OmniHuman, Fabric, PixVerse. Audio: Inworld TTS-2 (100+ languages, emotion steering for characters), ElevenLabs, Kokoro. Capabilities: audio-driven avatars, text-to-avatar, lipsync videos, talking head generation, virtual presenters, UGC content. Use for: AI presenters, explainer videos, virtual influencers, dubbing, marketing videos, UGC ads, gaming avatars, NPC dialogue. Triggers: ai avatar, talking head, lipsync, avatar video, virtual presenter, ai spokesperson, audio driven video, heygen alternative, synthesia alternative, talking avatar, lip sync, video avatar, ai presenter, digital human, ugc, ugc video, ugc ad, avatar ugc
