用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/vercel/shop --skill enable-analytics命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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 lib/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 lib/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: {
shopify: { consentMode: "default-banner", isEnabled: false },
speedInsights: { isEnabled: false },
vercel: { isEnabled: false },
},
The shopify gate is separate: it controls Shopify storefront analytics, which the storefront already ships. Leave it alone unless the user asked about Shopify analytics, and see Part D.
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 lib/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 { shopConfig } from "@/lib/config";
export function AnalyticsComponents() {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID;
return (
<>
{shopConfig.analytics.vercel.isEnabled ? <Analytics /> : null}
{shopConfig.analytics.speedInsights.isEnabled ? <SpeedInsights /> : null}
{gtmId ? <GoogleTagManager gtmId={gtmId} /> : null}
</>
);
}
Remove imports for integrations the storefront does not support.
app/layout.tsxRender the root analytics component near the end of <body>, without changing the storefront's translation-provider boundaries:
import { AnalyticsComponents } from "@/components/analytics";
<body ...>
{/* ... existing layout content and scoped providers ... */}
<Suspense>
<AnalyticsComponents locale={locale} />
</Suspense>
</body>
Do not pass the complete message catalog to a root NextIntlClientProvider for analytics. 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.
Only make changes here if the user asked about Shopify analytics.
The storefront sends page, product, collection, search, cart-view, and confirmed cart-change events through Hydrogen's analytics bus. It is disabled by default and requires no credentials beyond the Storefront API variables the storefront already needs. To turn Shopify's built-in analytics destination on, set analytics.shopify.isEnabled to true in lib/config.ts.
Consent mode is set by analytics.shopify.consentMode in lib/config.ts and defaults to default-banner, which renders Shopify's hosted privacy banner for visitors in regions that require consent. Use custom-banner when the storefront supplies its own consent UI. Do not ship no-banner in production unless consent is handled elsewhere, because visitors in those regions can never grant consent and their events are dropped.
Third-party analytics can subscribe through the same destination API, so consent gating and buffered replay remain centralized. Register destinations with addAnalyticsDestination() from lib/analytics/client.ts; do not publish cart-change events manually.
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.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.
Enable Shopify Markets with regional locales, localized Storefront API context, and next-intl routing. Supports locale-prefixed, invisible cookie-based, and per-domain routing without a separate market URL segment or market mapping.
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.
