More than 3 years have passed since last update.

nuxt.jsで作ったアプリケーションにGoogle Analytics仕込むときのベース手順

Posted at 2021-09-15

対象者

nuxtで作ったアプリケーションにアナリティクス設定したい人
Googleのドキュメントが複雑すぎて（自分には）簡単にまとめたいと思ってメモ書き

１
インストール

yarn add @nuxtjs/google-gtag

２
下記記述

 // nuxt.config.js

{
  modules: [
    '@nuxtjs/google-gtag',
}

3
.envファイルでID定義


GOOGLE_ANALYTICS_ID = G-XXXXXXXXXX

4
下記記述


// nuxt.config.js

'google-gtag': {
  id: process.env.GOOGLE_ANALYTICS_ID,
  debug: true,
}

5
デバッグ

アナリティクスの「リアルタイム」で確認（これはたまに反応しないようなので非推奨）
対象サイトで、開発者ツール => 「ネットワーク」 => query string parameters の tid に GOOGLE_ANALYTICS_IDが確認できる
Tag Assistant Legacy (by Google)　で確認。ちゃんとカウントされる ( https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja )

これだけだった…
アナリティクス、趣味で触ってた時とはなんか進化してて別だったのと
headにコード埋め込んで繋ぐ、みたいな先入観が邪魔してど詰まったので2度と忘れないために。。
と、いうかデバッグ方法わからず、ずっと「リアルタイム」みてて、違うことしてたんだとおもう…

というかまだ「カスタムディメンション」してトラッキング分けるという続きがあるけどいったん終わり。

正直headに埋め込む風な、こっちの方がしっくりきました