【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などを追加

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


まとめ

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

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

-
-,

© 2024 aLiz Nuxt