at backyard

Color my life with the chaos of trouble.

Next.jsで作ったアプリでgoogle analyticsの設定を5分で行う

Next.jsで書いたアプリにgoogle analyticsの設定を行うことにした。

google analyticsの設定方法については、ここで書くまでもないかもしれないが、下記の公式ドキュメントを参考にしている。

https://developers.google.com/analytics/devguides/collection/gtagjs/?hl=ja

Next.js(React)で設定する場合、react-gaを使う方法や、自前で設定する方法などあるが、何故かどれもうまく出来なかった。
5分ぐらいで設定を終わらせるはずが、色々と試行錯誤していたら1時間もたっていてかなりショックを受けた。

そんなこんなでどうしたものかと悩んでいたときに下記のコメントを見つけた。

Adding GA script tag? · Issue #160 · zeit/next.js · GitHub

上で書かれているサンプルを参考にして、 Next.js内で<head>を設定しているcomponent内に下記の2行を追加した。

<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。