From vercel-shop
Adds Vercel Analytics, Speed Insights, and Google Tag Manager to Next.js storefronts via interactive prompts, dependency installation, and component creation.
npx claudepluginhub vercel/shop --plugin vercel-shopThis skill uses the workspace's default tool permissions.
By default, the storefront has no analytics or performance monitoring. This skill adds Vercel Analytics, Vercel Speed Insights, and/or Google Tag Manager using their recommended integrations.
Sets up Sentry error tracking in NestJS backends and Next.js apps, plus Google Analytics in Next.js for user behavior tracking. Use for production monitoring and analytics configuration.
Optimizes Vercel deployments with edge caching, bundle analysis, cold start reduction, and Core Web Vitals improvements for faster page loads and lower latency.
Deploys projects to Vercel or Netlify, configures analytics and health checks. Activates when users mention deployment, Vercel, Netlify, analytics, or health checks.
Share bugs, ideas, or general feedback.
By default, the storefront has no analytics or performance monitoring. This skill adds Vercel Analytics, Vercel Speed Insights, and/or Google Tag Manager using their recommended integrations.
Ask the user two questions in order:
@vercel/analytics@vercel/speed-insightsIf 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.
Skip this section if the user selected neither.
Install only the packages the user selected:
# Both (recommended)
pnpm add @vercel/analytics @vercel/speed-insights
# Analytics only
pnpm add @vercel/analytics
# Speed Insights only
pnpm add @vercel/speed-insights
components/analytics.tsxCreate a component that renders the selected analytics components. Each library handles its own client-side behavior internally, so this can be a server component:
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.
Skip this section if the user did not want GTM.
pnpm add @next/third-parties
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.
components/analytics.tsxIf 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:
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):
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} />;
}
app/layout.tsxImport the component and render it inside <body>, after the </NextIntlClientProvider> closing tag:
import { AnalyticsComponents } from "@/components/analytics";
<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.
components/analytics.tsx file. Do not scatter them across the layout.NEXT_PUBLIC_GTM_ID, never hardcoded. The component renders nothing if the env var is missing.@next/third-parties/google for GTM, not a manual <script> tag. The Next.js component handles script loading and performance optimization.@vercel/analytics/next and @vercel/speed-insights/next (the /next subpath), not the root package exports.NEXT_PUBLIC_GTM_ID to .env.example with a placeholder value so other developers know the variable exists.