【Nuxt.js】API：GoogleAnalyticsを導入しよう

前置き

分析に役立つ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などを追加

export default {
  modules: [
    '@nuxtjs/google-gtag',
  ],
  'google-gtag': { idなどのオプション },
}

export default {

modules: [

'@nuxtjs/google-gtag',

'google-gtag': { idなどのオプション },

}

debag: trueにしておくと
開発環境でも有効になります。

export default {
  modules: [
    '@nuxtjs/google-gtag',
  ],
  'google-gtag': {
    id: '測定id',
    debug: true, // Enable to track in dev mode.
  },
}

export default {

modules: [

'@nuxtjs/google-gtag',

'google-gtag': {

id: '測定id',

debug: true, // Enable to track in dev mode.

}

まとめ

パッケージの追加で
簡単に実装できるのは嬉しいですね✨

トラッキングIDという呼び方が
懐かしいです🤔💭