Menu
Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Integrate Shopify-validated Storefront or Customer Account GraphQL into Vercel Shop. Use after Shopify AI Toolkit has supplied and validated an API operation, or when adapting existing GraphQL to the template's operation placement, fragments, domain transforms, locale flow, cache role, invalidation, and route architecture.
Update an existing Vercel Shop storefront with newer template changes. Use when the user wants to check drift, plan an upgrade, or apply template updates to a project scaffolded from Vercel Shop.
Build or adapt a Shopify storefront with Vercel Shop source-backed patterns. Use when creating, redesigning, refactoring, or reviewing storefront routes, commerce data, rendering, caching, streaming, navigation, cart, account, mutations, product cards, media, loading states, or when applying Vercel Shop outside the template.
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.
Initialize a new Vercel Shop storefront with the official create-vercel-shop CLI. Use when the user wants to create, scaffold, start, or initialize a Vercel Shop project from a coding agent.
| name | enable-analytics |
| description | Add Vercel Analytics, Vercel Speed Insights, and Google Tag Manager to the storefront. |
The current storefront includes support for Vercel Web Analytics and Vercel Speed Insights, with each integration disabled by default in shop.config.ts. This skill enables or adds those integrations 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.
If the storefront has analytics configuration in shop.config.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: {
speedInsights: { enabled: false },
vercel: { enabled: false },
},
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
For older storefronts, create or update the root analytics component described below. Each library handles its own client-side behavior internally.
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.tsxImport GoogleTagManager from @next/third-parties/google. Read NEXT_PUBLIC_GTM_ID in the analytics component and render <GoogleTagManager gtmId={gtmId} /> only when the value exists. If the storefront extends shop.config.ts with a GTM integration gate, apply that gate inside the same component.
components/analytics.tsxCompose the selected providers in the root analytics component and apply each integration gate there:
import { GoogleTagManager } from "@next/third-parties/google";
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { analytics } from "@/lib/config";
export function AnalyticsComponents() {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
return (
<>
{analytics.vercel.enabled ? <Analytics /> : null}
{analytics.speedInsights.enabled ? <SpeedInsights /> : null}
{gtmId ? <GoogleTagManager gtmId={gtmId} /> : null}
</>
);
}
Remove imports for integrations the storefront does not support.
app/layout.tsxAlways render the root analytics component 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>
The root component remains mounted as the extension point for current and future analytics providers. Provider gates stay inside it so disabled integrations are not mounted.
components/analytics.tsx.<AnalyticsComponents /> from the root layout, even when every provider is disabled.NEXT_PUBLIC_GTM_ID, never hardcoded. The provider 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.