SuperAPI AI 工具集

enable-analytics

数据与分析

查看项目

更新于 10-16 03:03

技能介绍

用途:在 Vercel 的 Shopify 商店前台(vercel/shop)中启用或新增 Vercel Web Analytics、Vercel Speed Insights 与 Google Tag Manager。这些集成在 lib/config/index.ts 中默认禁用,本技能负责打开或添加。

使用前需按顺序向用户确认两件事:一是需要哪些集成(两者都开、仅 Analytics、仅 Speed Insights、都不开);二是是否需要 Google Tag Manager,若需要则收集 GTM 容器 ID(如 GTM-XXXXXX)。得到答复后再执行。

主要能力与用法:

  • Vercel 集成:按选择安装依赖,如 pnpm add @vercel/analytics @vercel/speed-insights,或在 lib/config/index.ts 中只启用所选项。
  • GTM:安装 pnpm add @next/third-parties,把 NEXT_PUBLIC_GTM_ID 加入 .env.example(保持字母序),并加入 turbo.json 的 globalEnv;在组件中读取该变量,仅当存在时渲染 <GoogleTagManager gtmId={gtmId} />。
  • 根组件:更新 components/analytics/index.tsx,按配置门控渲染 Analytics、SpeedInsights、GoogleTagManager,并保留 Shopify 脚本门控。不要新建 components/analytics.tsx 以免遮蔽目录导入。
  • 布局:在 app/layout.tsx 的 <body> 末尾用 Suspense 渲染 <AnalyticsComponents />,即使所有提供方关闭也要保持挂载。不要为分析添加 next-intl 或根消息目录。

Shopify 分析:仅当用户询问时才改动。启用 Shopify 脚本后前台经 Hydrogen 分析总线发送页面、商品、集合、搜索、购物车查看与购物车变更事件。需在构建前设置数值型 NEXT_PUBLIC_SHOPIFY_SHOP_ID。通过 analytics.shopify.isEnabled 启用其分析目标与同意集成;通过 consent.isEnabled 单独加载同意;consent.mode 默认 default-banner,自带同意 UI 时可用 custom-banner;生产环境不要使用 no-banner,除非同意已在别处处理。第三方分析可用 addAnalyticsDestination() 订阅同一目标 API,不要手动发布购物车变更事件。

限制与约束:GTM 容器 ID 必须来自 NEXT_PUBLIC_GTM_ID,不得硬编码;GTM 使用 @next/third-parties/google 而非手写 script;导入路径用 @vercel/analytics/next 与 @vercel/speed-insights/next;不支持的分析集成应移除相应导入。具体版本与价格等细节资料未提供。