GTMを使ってNextjsにGoogleAnalyticsを導入してみた

はじめに

NextjsのアプリケーションにGoogleAnalyticsを導入するのに少し苦労したので備忘録としてまとめます

前提

• firebase hostingでホスティングしていること

導入手順

GTMの設定

1. GoogleTagManager公式へ飛んでfirebaseと同じアカウントでログインする

2. 画面に沿ってアカウント・コンテナの作成を行う

   コンテナ名
   URLが https://example.com の場合、example.comにするとわかりやすい

   ターゲットプラットフォームはwebを選択する。

3. タグを追加する
   以下のように設定する
   

   タグIDの設定方法
   GTMのサイトの左上にある矢印マークからホームに戻る
   Googleタグというタブがあるのでそれをクリックすると、自分のfirebaseプロジェクトと同じ名前があるはず。そこのIDをコピーして貼り付け
   2つIDが存在している場合、どっちか一つだけ貼り付ける

Nextjs側の設定

こちらの公式ドキュメントを見れば一発で設定できるかと思います。

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

僕の場合カスタムイベントを設定しなかったので、GoogleTagManagerコンポーネントを追加すればそれで基本的な設定は完了です。

確認方法

GTMのワークスペース(タグの設定をした画面)の右上に、Previewボタンがあるのでそれをクリックします。

終わりに

参考にしていたサイトが少し情報が古かったようですが、公式ドキュメントを見ればなんとかなってよかったです。

About Me

• X(Twitter)

https://twitter.com/shunii_hack