Nuxt.jsにGoogle Analyticsを設定する
【概要】Nuxt.jsにGoogle Analyticsを設定する方法をまとめます。【Google Analyticsの設定】下記のソースをpluginsディレクトリの中に作成して下さい。・Nuxt-APP/plugins/ga.js/* eslint-disable */export default ({ app }) {/*** クライアントサイドかつプロダクションモードでのみ実行*/if (process.env.NODE_ENV ! 'production') return/*** Google アナリティクスのスクリプトをインクルード*/(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']r;i[r]i[r]||function(){(i[r].qi[r].q||[]).push(arguments)},i[r].l1*new Date();as.createElement(o),ms.getElementsByTagName(o)[0];a.async1;a.srcg;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');/*** 現在のページをセット*/ga('create', 'lt;トラッキング ID', 'auto')/*** ルートが変更されるたびに毎回実行(初期化も実行される)*/app.router.afterEach((to, from) {/*** Google アナリティクスにページビューが追加されたことを伝える*/ga('set', 'page', to.fullPath)ga('send', 'pageview') })}※ 「lt;トラッキング ID」について下記の「lt;トラッキング ID」の文言はGoogle Analyticsの管理ページにあるプロパティ設定にあります。その値を代入して下さい。・Google Analyticsの「lt;トラッキング ID」表示画面個人情報は隠させてもらっていますが、赤枠を参考に遷移すればトラッキング ID があるページまで行けます。【nuxt.config.jsの設定】Nuxt-APP/nuxt.config.js のpluginsに下記の設定をして上記のga.jsを読み込みます。・Nuxt-APP/nuxt.config.js......plugins: [ { src: '~plugins/ga.js', mode: 'client' }],......これでサーバーにデプロイしたNuxt.jsにGoogle Analyticsを設定できます。