Nuxt.jsのプロジェクトでGoogleアナリティクスを導入する方法まとめ
最終更新日: Update!!
Vue.jsのアプリケーションでGoogleアナリティクスを導入するまでの流れについては、過去記事「Vue CLIとVue Routerで構築したSPAにグーグルアナリティクスを導入する」にて紹介しておりましたが、今回はNuxt.jsのプロジェクトにおいてGoogleアナリティクスを導入する方法を見ていきます。
Vue-cliのプロジェクトの時と同じく、専用のモジュールである「@nuxtjs/google-analytics」が用意されているのでそれを使うと簡単に導入することができます。yarnもしくはnpmでモジュールをnode_modulesにインストールします。
$ cd プロジェクトディレクトリ $ yarn add @nuxtjs/google-analytics or $ npm install --save @nuxtjs/google-analyticsインストールが完了すると、package.jsonにモジュールが追加されたことが確認できました。 【package.json】※一部省略
{ "dependencies": { ....... "@nuxtjs/google-analytics": "^2.2.0", ....... }, }このモジュールを使えるようにするために「nuxt.config.js」に設定していきます。modulesの項目に追加し、さらに「googleAnalytics」とキーを追加し、その中で下記のようにアナリティクスのトラッキングIDを入力します。 【nuxt.config.js】※一部省略
{ modules: [ '@nuxtjs/google-analytics' ], googleAnalytics: { id: 'UA-***********' } }たったこれだけで、Nuxt.jsのプロジェクトにGoogleアナリティクスを導入することができます。ウェブサイトの場合ですとアクセス解析を行う要望も多いと思いますので、ぜひ覚えておきたいですね。 (参考にさせて頂いたサイト) GitHub nuxt-community/analytics-module
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories