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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-1a2

前置き

分析に役立つ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です💫☝️

npm install @nuxtjs/google-gtag

nuxt.config.jsに
モジュール追加と
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.
 },
}

まとめ

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1a2