用途:这是一个面向前端工程的分析标识规范化技能,负责把代码中杂乱、不一致的元素 id 和 class 整理成统一命名,让 GTM/GA4 追踪更可靠、可扩展。
主要能力:使用固定命名约定。id 采用 {category}{location}{descriptor} 形式,类别含 cta、nav、form、video、audio、download、outbound;class 采用 js-track js-{category} js-{action} js-{location},其中 js-track 为必需基础类,类别含 cta、nav、form、pricing、auth、demo、outbound、media,动作含 click、submit、open、close、play、pause、download、expand,位置含 hero、header、footer、sidebar、modal、navbar、pricing。
使用方式:先分析代码库,检测 React/Next.js/Vue 框架与组件模式;再扫描 layout、导航、页面与共享组件中的 button、a、Link、form、onClick 元素及 video/audio;随后按类别归类元素,遇到歧义按决策树处理(如“Learn More”主 CTA 归 cta,次要导航归 nav)。实施时只追加分析类,绝不删除或替换原有视觉类;React/Next.js 用 className,Vue 用 :class,并保留原有事件处理与框架特有 props。最后做视觉与一致性校验并输出总结报告。
适用场景:网站需要统一追踪标识、准备接入 GTM dataLayer、或先规划再实现追踪策略的前置整理阶段。
限制:仅规范自有代码(app/、components/、pages/、src/),不修改 node_modules 等第三方代码;不会自动添加 dataLayer 事件,后续需配合 gtm-strategy 与 gtm-implementation。具体要求、收费与平台信息暂未提供。