Next.jsにGA4とGTMを簡単に導入する方法 _document.js編
Next.jsには、GA4とGTMを導入する方法がいくつかあると思うのだが、 _document.jsに書くのが一番簡単なのでは？と思っているので、そのやり方を紹介する。
とは言っても簡単です、まじで。
dangerouslySetInnerHTMLの中の__htmlにそのままコードを埋め込めばいいです。そうすると、HTMLとして出力される。
JSファイルの中に、そのままHTMLを埋め込めないので、これをやればいい。もしかしたら、他にもやりようが、いくつもあるかもしれん。
例えば、GA4を導入するとき、下記のようなコードが元々ありますよね？
一番上のscript async のところは、そのまま埋め込めるけど、
その下のscriptのところは、普通に埋め込めない。だから、
__html:`の中に、scriptの中だけ埋め込む、そうすると、実行できるようになります。
タグマネージャーの中も同じです。下記の画像を参考にやってみてください。
ちなみにですが、_document.tsxに関する説明は、下記のURLなどを参考にお願いします。
Headの中とかに、<title>タグを書くと、全てのページで共通のtitleタグを出力してくれたりします。
参考
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！