[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"content:\u002Fja\u002Ffiddling\u002Fastro-google-tag-manager":3,"surround:\u002Fja\u002Ffiddling\u002Fastro-google-tag-manager":174},{"id":4,"title":5,"authorship":6,"body":7,"categories":142,"date":144,"description":145,"draft":146,"extension":147,"image":148,"meta":149,"navigation":151,"path":152,"permalink":153,"published":153,"readingTime":154,"recommend":153,"references":153,"seo":159,"seoDescription":160,"seoTitle":153,"sitemap":161,"stem":165,"tags":166,"type":172,"__hash__":173},"content_ja\u002Fposts\u002Ffiddling\u002Fastro-google-tag-manager.md","AstroにGoogle Analyticsを導入する（Tag Manager編）","human-only",{"type":8,"value":9,"toc":136},"minimark",[10,14,18,21,28,31,37,40,43,46,57,60,68,74,83,86,108,119,127,133],[11,12,13],"h3",{"id":13},"はじめに",[15,16,17],"p",{},"前置きが不要な方は、解決方法の節まで飛ばしてください。",[15,19,20],{},"以前からGoogle Analyticsでブログのアクセス数やreferrerなどを見ていました。HexoやHugoといった静的ブログなら、headタグにJavaScriptを追加するだけで簡単に導入できます。先日ブログをAstroに移したのですが、従来どおりheadでJavaScriptを実行してイベントを送信すると、性能が落ちます。ご存じのとおり、Astroはフロントエンドの性能を追求し、JavaScriptの実行をできるだけゼロに抑える方針です。イベント送信のためにJavaScriptを動かすと、その分だけ性能を損なってしまいます。",[15,22,23],{},[24,25],"img",{"alt":26,"src":27},"パフォーマンス満点！","https:\u002F\u002Fblog-img.774352199.xyz\u002F2025\u002Fe1e778992ea6b393ed763a8642db3770.png",[15,29,30],{},"調べてみると、多くの解説がpartytownでスクリプトをメインスレッドの外に移し、読み込みをブロックせず性能を保つ方法を紹介していました。サンプルコードもあったので、それをもとにブログへ組み込んだ結果がこちらです。",[15,32,33],{},[24,34],{"alt":35,"src":36},"","https:\u002F\u002Fblog-img.774352199.xyz\u002F2025\u002Fe5005b9f2321f6946761eef52156e777.png",[15,38,39],{},"計測数が見事にゼロになりました。",[15,41,42],{},"さすがに笑えません。長い調査が始まりましたが、原因はどうしても見つかりませんでした。ネット上の関連サンプルはどれも私と同じやり方です。解説を書いた人たちは自分で試していないのでしょうか。まったく動かないんですが。",[15,44,45],{},"仕方なく2か月ほど放置し、その間は一時的にumamiで計測していました。",[15,47,48,49,56],{},"ここ数日でまた思い出し、気になって仕方がなくなったので、再び延々と検索しました。ようやくGitHubの",[50,51,55],"a",{"href":52,"rel":53},"https:\u002F\u002Fgithub.com\u002FQwikDev\u002Fpartytown\u002Fissues\u002F382#issuecomment-1667675238",[54],"nofollow","片隅","で解決策を見つけました。",[11,58,59],{"id":59},"解決方法",[15,61,62,63,67],{},"パッケージマネージャーで",[64,65,66],"code",{"code":66},"@astrojs\u002Fpartytown","をインストールします。",[15,69,70,73],{},[64,71,72],{"code":72},"\u003Chead>","タグに次のコードを追加します。",[75,76,81],"pre",{"className":77,"code":79,"language":80,"meta":35},[78],"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",[64,82,79],{"__ignoreMap":35},[15,84,85],{},"注意点は次のとおりです。",[87,88,89,96,102],"ul",{},[90,91,92,95],"li",{},[64,93,94],{"code":94},"is:inline","はスクリプトをクライアント側で実行する指定です。",[90,97,98,101],{},[64,99,100],{"code":100},"type=\"text\u002Fpartytown\"","は、メインスレッドではなくpartytownで実行する指定です。",[90,103,104,107],{},[64,105,106],{"code":106},"gtag","は関数宣言ではなく、windowオブジェクトの変数に関数を代入する形で定義する必要があります。妙な話ですが。",[15,109,110,111,114,115,118],{},"Astroの設定ファイル（通常は",[64,112,113],{"code":113},"astro.config.ts","や",[64,116,117],{"code":117},"astro.config.mjs","）に次の設定を追加します。",[75,120,125],{"className":121,"code":123,"language":124,"meta":35},[122],"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",[64,126,123],{"__ignoreMap":35},[15,128,129,130,132],{},"ほとんどの解説には、forward配列に",[64,131,106],{"code":106},"も追加する必要があることが書かれていません。",[15,134,135],{},"これで完了です！ コミットしてデプロイすると、Google Analyticsに正常にデータが送られるようになります。",{"title":35,"searchDepth":137,"depth":137,"links":138},4,[139,141],{"id":13,"depth":140,"text":13},3,{"id":59,"depth":140,"text":59},[143],"fiddling","2025-05-28 22:09:00","ブログをAstroに移行したところ、従来のGoogle Analytics導入方法では性能面が気になるようになりました。headタグにJavaScriptを直接追加してイベントを送ることはできますが、ページの性能に影響します。そこでpartytownでスクリプトをメインスレッドから切り離し、読み込みを妨げないようにしました。サンプルコードに手を加えることでGoogle Analyticsの導入に成功し、性能とアクセス解析を両立できました。",false,"md","https:\u002F\u002Fblog-img.774352199.xyz\u002FQ0w4RN.webp",{"slots":150},{},true,"\u002Ffiddling\u002Fastro-google-tag-manager",null,{"text":155,"minutes":156,"time":157,"words":158},"4 min read",3.455,207300,691,{"title":5,"description":145},"AstroとPartytownでGoogle Analyticsへの送信が止まった問題を調査。window.gtagの定義、スクリプト属性、forward配列の設定で計測を復旧した手順です。",{"loc":152,"images":162},[163,164],{"loc":27},{"loc":36},"posts\u002Ffiddling\u002Fastro-google-tag-manager",[167,168,169,170,171],"Astro","Google Analytics","Google Tag Manager","Partytown","アクセス解析","tech","utlnYNnll0qRfH8q3hQLZFzTSUqfNGdnfJs15An_ko8",[175,180],{"title":176,"path":177,"stem":178,"date":179,"type":172,"children":-1},"上海と杭州の自宅ネットワークをつなぐ","\u002Ffiddling\u002Fcross-city-network-setup","posts\u002Ffiddling\u002Fcross-city-network-setup","2025-04-18 16:43:12",{"title":181,"path":182,"stem":183,"date":184,"type":172,"children":-1},"Androidに乗り換えて1か月","\u002Ffiddling\u002Fone-month-using-android","posts\u002Ffiddling\u002Fone-month-using-android","2025-06-05 23:26:00",1789914057010]