[{"data":1,"prerenderedAt":179},["ShallowReactive",2],{"content:\u002Ffiddling\u002Fastro-google-tag-manager":3,"surround:\u002Ffiddling\u002Fastro-google-tag-manager":168},{"id":4,"title":5,"body":6,"categories":141,"date":143,"description":144,"draft":145,"extension":146,"image":147,"meta":148,"navigation":150,"path":151,"permalink":147,"published":147,"readingTime":152,"recommend":147,"references":147,"seo":157,"sitemap":158,"stem":159,"tags":160,"type":166,"__hash__":167},"content\u002Fposts\u002Ffiddling\u002Fastro-google-tag-manager.md","Astro 接入 Google Analytics (Tag Manager)",{"type":7,"value":8,"toc":135},"minimark",[9,13,17,20,27,30,36,39,42,45,56,59,67,73,82,85,107,118,126,132],[10,11,12],"h3",{"id":12},"前言",[14,15,16],"p",{},"不想看废话可直接跳转解决方案一节",[14,18,19],{},"此前一直在 Google Analytics 上看博客的访问量，分析各种 referer 等信息。使用 hexo 和 hugo 等静态博客框架，都可以很容易的接入 Google Analytics，直接在 head 标签中添加 js 代码即可。前些日子将博客迁移到了 Astro 框架，诚然可以用老办法，直接在 head 执行 js 代码上报事件，但是就会造成性能下降。众所周知，Astro 追求极致前端性能、尽量 0 JS 执行。一旦使用 js 上报事件，就会造成性能损失",[14,21,22],{},[23,24],"img",{"alt":25,"src":26},"性能满昏！","https:\u002F\u002Fblog-img.774352199.xyz\u002F2025\u002Fe1e778992ea6b393ed763a8642db3770.png",[14,28,29],{},"于是网上冲浪了一番，搜到的大部分教程是使用 partytown 来将脚本剥离主线程执行，不阻塞主线程加载，以保证性能，并都给出了 demo 代码。于是在给出的 demo 基础上，我将其嵌入了我的博客。于是就得到了以下结果：",[14,31,32],{},[23,33],{"alt":34,"src":35},"","https:\u002F\u002Fblog-img.774352199.xyz\u002F2025\u002Fe5005b9f2321f6946761eef52156e777.png",[14,37,38],{},"上报直接掉零了",[14,40,41],{},"很难绷，于是开始了漫长的排查，始终没能找到问题所在。网上找到的所有相关例子都和我的方式相同。都有些奇怪，这些人写完教程都不自己测试一下吗，完全不可用啊",[14,43,44],{},"只得将其搁置了俩月，期间临时改用了 umami 统计数据",[14,46,47,48,55],{},"这两天又想了起来，如芒在背如鲠在喉，于是又开始了漫长的搜索。最终在 GitHub 的一个 ",[49,50,54],"a",{"href":51,"rel":52},"https:\u002F\u002Fgithub.com\u002FQwikDev\u002Fpartytown\u002Fissues\u002F382#issuecomment-1667675238",[53],"nofollow","角落"," 中找到了解决方案",[10,57,58],{"id":58},"解决方案",[14,60,61,62,66],{},"安装 ",[63,64,65],"code",{"code":65},"@astrojs\u002Fpartytown","，直接使用你的包管理器安装即可",[14,68,69,72],{},[63,70,71],{"code":71},"\u003Chead>"," 标签中添加以下代码",[74,75,80],"pre",{"className":76,"code":78,"language":79,"meta":34},[77],"language-html","\u003Cscript is:inline src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-XXXXXXXXX\" type=\"text\u002Fpartytown\">\u003C\u002Fscript>\n\u003Cscript is:inline type=\"text\u002Fpartytown\">\n  window.dataLayer = window.dataLayer || [];\n  window.gtag = function () {\n        dataLayer.push(arguments);\n    };\n  window.gtag('js', new Date());\n  window.gtag('config', 'G-XXXXXXXXX');\n\u003C\u002Fscript>\n","html",[63,81,78],{"__ignoreMap":34},[14,83,84],{},"有以下几个注意点：",[86,87,88,95,101],"ul",{},[89,90,91,94],"li",{},[63,92,93],{"code":93},"is:inline"," 指示脚本在客户端执行",[89,96,97,100],{},[63,98,99],{"code":99},"type=\"text\u002Fpartytown\""," 指示脚本由 partytown 执行，而不在主线程执行",[89,102,103,106],{},[63,104,105],{"code":105},"gtag"," 函数必须定义为 window 对象的一个函数变量，不能定义为一个函数声明（很奇怪）",[14,108,109,110,113,114,117],{},"在 astro 的配置文件（形如是 ",[63,111,112],{"code":112},"astro.config.ts"," 或 ",[63,115,116],{"code":116},"astro.config.mjs","）中添加以下配置",[74,119,124],{"className":120,"code":122,"language":123,"meta":34},[121],"language-js","import partytown from '@astrojs\u002Fpartytown'\n\nexport default defineConfig({\n  \u002F\u002F ...\n  integrations: [partytown({ config: { forward: ['dataLayer.push', 'gtag'] } })],\n});\n","js",[63,125,122],{"__ignoreMap":34},[14,127,128,129,131],{},"大部分教程都没有提到还需要将 ",[63,130,105],{"code":105}," 加入 forward 数组",[14,133,134],{},"完成！提交部署后，Google Analytics 的统计数据就可以正常上报了",{"title":34,"searchDepth":136,"depth":136,"links":137},4,[138,140],{"id":12,"depth":139,"text":12},3,{"id":58,"depth":139,"text":58},[142],"折腾","2025-05-28 22:09:00","在将博客迁移至 Astro 框架后，常规的 Google Analytics 接入方法因性能因素而不再适用。尽管可以在 head 标签中直接添加 js 代码进行事件上报，这会影响页面性能。为了保持 Astro 的高效表现，采用了 partytown 技术，将脚本从主线程中剥离，确保加载过程不受影响。在此基础上，结合 demo 代码成功实现了 Google Analytics 的无缝接入，达成了性能与数据分析的平衡。",false,"md",null,{"slots":149},{},true,"\u002Ffiddling\u002Fastro-google-tag-manager",{"text":153,"minutes":154,"time":155,"words":156},"3 min read",2.9,174000,580,{"title":5,"description":144},{"loc":151},"posts\u002Ffiddling\u002Fastro-google-tag-manager",[142,161,162,163,164,165],"Astro","Google Tag Manager","Google Analytics","GTM","partytown","tech","-_VYqGIi6JBSAgx_VFWcicYLIyNyv_2iCcCX_1Xw3L0",[169,174],{"title":170,"path":171,"stem":172,"date":173,"type":166,"children":-1},"上海杭州异地组网记录","\u002Ffiddling\u002Fcross-city-network-setup","posts\u002Ffiddling\u002Fcross-city-network-setup","2025-04-18 16:43:12",{"title":175,"path":176,"stem":177,"date":178,"type":166,"children":-1},"迁移安卓一月谈","\u002Ffiddling\u002Fone-month-using-android","posts\u002Ffiddling\u002Fone-month-using-android","2025-06-05 23:26:00",1787554444099]