---
name: enable-analytics
description: Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
---
# Enable Analytics
The current storefront includes Vercel Analytics and Vercel Speed Insights by default. This skill adds the same default wiring to older storefronts 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?
- **Keep both** — current template default: 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** — remove or skip both Vercel packages
### 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
Skip this section if the user selected neither.
### A1. Install dependencies
Install only the packages the user selected:
```bash
# Both (current template default)
pnpm add @vercel/analytics @vercel/speed-insights
# Analytics only
pnpm add @vercel/analytics
# Speed Insights only
pnpm add @vercel/speed-insights
```
### A2. Create `components/analytics.tsx`
Create a component that renders the selected analytics components. Each library handles its own client-side behavior internally, so this can be a server component:
```tsx
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
export function AnalyticsComponents() {
return (
<>
);
}
```
If only one was selected, remove the other import and component.
---
## 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`
If the file was already created in Part A, add GTM to it. If Part A was skipped, create the file now.
With both Vercel Analytics and GTM:
```tsx
import { GoogleTagManager } from "@next/third-parties/google";
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
export function AnalyticsComponents() {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
return (
<>
{gtmId ? : null}
);
}
```
With GTM only (no Vercel Analytics or Speed Insights):
```tsx
import { GoogleTagManager } from "@next/third-parties/google";
export function AnalyticsComponents() {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
if (!gtmId) return null;
return ;
}
```
---
## Part C: Root layout integration
### C1. Update `app/layout.tsx`
Import the component and render it inside ``, after the `` closing tag:
```tsx
import { AnalyticsComponents } from "@/components/analytics";
```
```tsx
...
{/* ... existing layout content ... */}
```
Place `` as a sibling after `NextIntlClientProvider`, not inside it. Analytics components do not need i18n context.
## Guardrails
- All analytics components live in a single `components/analytics.tsx` file. Do not scatter them across the layout.
- The GTM container ID must come from `NEXT_PUBLIC_GTM_ID`, never hardcoded. The component renders nothing if the env var is missing.
- Use `@next/third-parties/google` for GTM, not a manual `