Skip to content

web-vitals & google-analytics

  • 简单来说就是通过vite插件的transformIndexHtml方法动态插入script代码块,让gtag.js最先加载,这样window对象上就有需要的dataLayer
  • 然后就是项目入口处引用setupGoogleAnalytics,还是通过动态加载script标签的方式(这回是vueuse的useScriptTag)加载web-vitals,然后就是上报指标了
mermaid
graph LR
A[Vite启动构建] --> B[执行createGoogleAnalyticsPlugin插件]
B --> C{是否配置GA_ID?}
C -->|否| D[跳过脚本注入]
C -->|是| E[在index.html的</head>前插入GA初始化脚本]
E --> F[生成包含GA基础脚本的index.html]

基于 MIT 许可发布