前置き
分析に役立つGoogleAnalytics💕
Nuxt.jsで導入してみましょう!
Googleアカウント作成や
アナリティクスの登録自体は
公式や既に解説記事が
たくさん出ているので
ググっていただければと思います…!🔎
参考:
Nuxt.jsにGoogle Analyticsを導入する
測定IDを取得
プロパティを作成

プロパティの作成をします。
これらを入力します。
あとから管理画面で編集が可能です🍀
✍️プロパティの設定
✍️ビジネスの概要

データストリームの設定
プロパティが作成されたら
そのままデータストリームを設定します。
プラットフォームを選択してから…

データストリームの設定をします。

ストリームが作成されると
測定IDが表示されます👀
サンプルとして
このサイトのURLを入れていますが
WordPressで使用する方法は
別にあります…!
WordPressでGoogleアナリティクスを導入する3つの方法【かんたん5分】

パッケージの追加
GoogleAnalyticsの公式を見ると
2種類のjsファイルがあります💡
gtag.jsとanalytics.jsです。
https://developers.google.com/analytics/devguides/collection
gtag.jsが新しい仕様で
analytics.jsが古い仕様です。
gtag.jsを使用するための
nuxt用パッケージが@nuxtjs/google-gtag
https://github.com/nuxt-community/google-gtag-module
ということで
これをインストールして
設定をすればOKです💫☝️
terminal
npm install @nuxtjs/google-gtag
nuxt.config.jsに
モジュール追加と
google-gtagで測定idなどを追加
1 2 3 4 5 6 |
export default { modules: [ '@nuxtjs/google-gtag', ], 'google-gtag': { idなどのオプション }, } |
debag: true
にしておくと
開発環境でも有効になります。
1 2 3 4 5 6 7 8 9 |
export default { modules: [ '@nuxtjs/google-gtag', ], 'google-gtag': { id: '測定id', debug: true, // Enable to track in dev mode. }, } |

まとめ
パッケージの追加で
簡単に実装できるのは嬉しいですね✨
トラッキングIDという呼び方が
懐かしいです🤔💭