shop: Skill for Claude Code

Enable Analytics

The current storefront includes support for Vercel Web Analytics and Vercel Speed Insights, with each integration disabled by default in lib/config/index.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/index.ts, enable only the selected integrations. If the user selected neither, keep both integration gates disabled and skip the remaining steps in this section.

analytics: {
  shopify: {
    consent: { isEnabled: false, mode: "default-banner" },
    isEnabled: false,
  },
  speedInsights: { isEnabled: false },
  vercel: { isEnabled: false },
},

The shopify gate is separate: it controls Shopify storefront analytics and its consent integration. Standalone consent can be enabled separately through shopify.consent.isEnabled. Leave these settings alone unless the user asked about Shopify analytics or consent, and see Part D.

A1. Install dependencies

For older storefronts without the integrations, install only the packages the user selected:

# Both
pnpm add @vercel/analytics @vercel/speed-insights

# Analytics only
pnpm add @vercel/analytics

# Speed Insights only
pnpm add @vercel/speed-insights