// Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Enable next-intl-based i18n in the shop template — locale-prefixed URLs, per-locale message catalogs, and a locale switcher. Use when the user wants "locale URLs", "multi-language", or "i18n" without Shopify Markets integration. For full Shopify Markets multi-region commerce (region-aware pricing, inventory, payments), use `enable-shopify-markets` instead — this skill is the routing/i18n layer only.
Wire Shopify metaobjects as the CMS for homepage and marketing page content. Adds GraphQL queries for cms_homepage and cms_page metaobject types and transforms them into domain types.
Replace the hardcoded nav and footer menus with Shopify-powered menus.
Reference Vercel Shop GraphQL patterns, fragments, cache conventions, and transforms for any Shopify GraphQL work in the template.
Enable Shopify Markets with multi-locale routing using next-intl. Use when the user wants to add internationalization, multi-locale support, locale-prefixed URLs, or Shopify Markets. Supports sub-path and per-domain routing strategies.
Use Shopify AI Toolkit to inspect live Storefront and Customer Account GraphQL schemas for Vercel Shop work.
| name | enable-analytics |
| description | Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront. |
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.
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 (current template default)
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.