How to use

bash

/vercel-shop:enable-analytics

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 (
    <>
      <Analytics />
      <SpeedInsights />
    </>
  );
}

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 (
    <>
      <Analytics />
      <SpeedInsights />
      {gtmId ? <GoogleTagManager gtmId={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 <GoogleTagManager gtmId={gtmId} />;
}

Part C: Root layout integration

C1. Update `app/layout.tsx`

Import the component and render it inside <body>, after the </NextIntlClientProvider> closing tag:

tsx

import { AnalyticsComponents } from "@/components/analytics";

tsx

<body ...>
  <a href="#main-content" ...>...</a>
  <SiteSchema locale={locale} />
  <NextIntlClientProvider locale={locale} messages={messages}>
    {/* ... existing layout content ... */}
  </NextIntlClientProvider>
  <AnalyticsComponents />
</body>

Place <AnalyticsComponents /> 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 <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.

How to use

Enable Analytics

Before you start

1. Do you need to add or change Vercel Analytics and/or Vercel Speed Insights?

2. Do you want Google Tag Manager?

Part A: Vercel Analytics and Speed Insights

A1. Install dependencies

A2. Create components/analytics.tsx

Part B: Google Tag Manager

B1. Install dependency

B2. Add environment variable

B3. Add GTM to components/analytics.tsx

Part C: Root layout integration

C1. Update app/layout.tsx

Guardrails

Chat

A2. Create `components/analytics.tsx`

B3. Add GTM to `components/analytics.tsx`

C1. Update `app/layout.tsx`