Next.jsで作ったアプリでgoogle analyticsの設定を５分で行う
追記: Google analyticsに関するコードは"pages/_document.js"内に書いたほうが良いかもしれない
以前書いたこちらの記事だが、本文のとおりにやればGoogle Analytics側では正常に認識されるものの(Google Search Consoleでの確認も完了できる)、
どうやら正常にトラッキングできないケースが有ることが判明した。
実際に最近作成した自身のNext.jsでこの問題が発生したため、こちらのポストにも追記した次第である。
結論から書くと、下記のexampleのコードを参考にして、pages/_document.jsを作成し、設定することで正常にトラッキングできた。
https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
自身が実際に実装したコードも、ほぼほぼこれに倣っているような感じなので、ここにはコードは載せないが、 以上のような形となる。
そのため、以下の本文はもう参照しないでも良さそう。
一応何を書いたかは残しておく。
追記2: 一応自分が書いたコードも下記に貼っておくことにした。だいたいこんな感じ。
本文
Next.jsで書いたアプリにgoogle analyticsの設定を行うことにした。
google analyticsの設定方法については、ここで書くまでもないかもしれないが、下記の公式ドキュメントを参考にしている。
https://developers.google.com/analytics/devguides/collection/gtagjs/?hl=ja
Next.js(React)で設定する場合、react-gaを使う方法や、自前で設定する方法などあるが、何故かどれもうまく出来なかった。
５分ぐらいで設定を終わらせるはずが、色々と試行錯誤していたら１時間もたっていてかなりショックを受けた。
そんなこんなでどうしたものかと悩んでいたときに下記のコメントを見つけた。
Adding GA script tag? · Issue #160 · vercel/next.js · GitHub
上で書かれているサンプルを参考にして、 Next.js内で<head>を設定しているcomponent内に下記の２行を追加した。
<script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`} ></script> <script dangerouslySetInnerHTML={{ __html: `(function(){ window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${trackingId}');})` }} />
trackingIdという変数にgoogle analyticsで設定するトラッキングIDを格納しておけばOK。
