
Nuxt.jsのプロジェクトでGoogleアナリティクスを導入する方法まとめ
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-modulecategories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)