JavaScript
GoogleAnalytics
Vue.js
SinglePageApplication
vue-cli

vue-routerを利用したSPAにGoogle Analyticsを仕込む方法

More than 1 year has passed since last update.


初めに

以前vue-cliを利用してSPAを作ってリリースをしたのですが、Google Analyticsを入れてないことに気づきました。

静的なサイトにはGoogle Analyticsを入れたことはあったのですが、SPAのような動的にURLが変わるサイトに入れたことはなかったので、入れ方を書いていきます。

トラッキング方法はanalytics.jsではなく、gtag.jsになります。


サイトについて

holy-place-photo.com

SPAはvue-cliを利用して実装しました。


静的なサイト場合

静的なサイトの場合は下記コードをトラッキングしたい全てのページのheadタグ内に埋め込みます。

※UA-XXXXXXX-XはトラッキングID

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-XXXXXXX-X');
</script>


SPAの場合

SPAの場合は一度読み込んだ後は、新しいページのコンテンツをダウンロードしURLを更新するため、トラッキングが初めの読み込みしか行われません。

そのためSPAをトラッキングする場合はURLが更新される度に、手動でトラッキングする必要があります。

手動トラッキングは下記コードで実現できます。(/new-page.htmlにURLを更新した場合)

gtag('config', 'UA-XXXXXXX-X', {'page_path': '/new-page.html'});

今回vue-cliを利用しているので、URLが更新された後に上記コードを実行したいためvue-cliのafterEachを利用します。

const router = new Router({

routes: [
{
path: '/',
component: top,
},
{
path: '/hoge',
component: hoge,
},
],
});

router.afterEach((to, from) => {
gtag('config', 'UA-XXXXXXX-X', {'page_path': to.path});
})


終わりに

vue-cliがURL更新後に実行される関数を用意してあったので、簡単に実装できました。


参考サイト

gtag.js を使用した単一ページ アプリケーションのトラッキング

ナビゲーションガード