magazine off

テクノロジー・マガジン OFFです!コラム ✖️ 最新ニュースをほぼ毎日お届けしています。

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タグを出力してくれたりします。
参考

コメントを残す