初めに
以前vue-cliを利用してSPAを作ってリリースをしたのですが、Google Analyticsを入れてないことに気づきました。
静的なサイトにはGoogle Analyticsを入れたことはあったのですが、SPAのような動的にURLが変わるサイトに入れたことはなかったので、入れ方を書いていきます。
トラッキング方法はanalytics.jsではなく、gtag.jsになります。
サイトについて
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更新後に実行される関数を用意してあったので、簡単に実装できました。