はじめに

Google Analyticsを使えば、ユーザーがサイトのどのボタンをタップしたか、どのフローで離脱したかの分析を簡単にすることができます。

しかし、サイトの規模が大きくなるにつれ、GAにイベントを送る処理をそれぞれのコンポーネントに実装してしまって現在どのようなイベントをどのタイミングで送っているかを把握しづらくなってしまう方も多いと思います。

今回は、Vueで構築されたサイトにGAのイベントを設定する時に、管理しやすい方法の一例をご紹介します。

環境

• macOS Mojave 10.14.5
• @vue/cli@3.7.0
• vue-analytics@5.17.2

まずはライブラリの導入

今回は、vue-analytics を導入しました。

タイトルの通り、VueプロジェクトでGoogle Analyticsを扱うことができます。

npm install vue-analytics でプロジェクトにインストールします。

あとは main.js で vue-analytics をimportして、Vue.use() で読み込めば使えるようになります。

import VueAnalytics from 'vue-analytics';
 
Vue.use(VueAnalytics, {
  id: 'UA-XXXXXX-X',
});

ちなみに、vue-router を使用している場合は Vue.use() で vue-router を一緒に読み込むようにすると、ページの切り替え時に自動的にページトラッキングを送ってくれます。

import router from './router';
import VueAnalytics from 'vue-analytics';
 
Vue.use(VueAnalytics, {
  id: 'UA-XXXXXX-X',
  router,
});

手動で vue-router のナビゲーションガードなどに実装する必要がないのでかなり助かる。。

念のためイベントトラッキングを送る方法

イベントトラッキングを送るのはとても簡単です。

this.$ga.event(‘category’, ‘action’, ‘label’, 123) で送ることができます。

引数それぞれが、GA上の項目に対応しています。

そして個人的なイベントのまとめ方

ここまででライブラリ導入とイベントの送り方はわかりましたが、いざイベントを送る処理を追加していくと知らない間に処理が分散してしまいます。

コンポーネントを分割してそれぞれにGAに送る処理が書かれていると、規模が大きくなるにつれて私は把握できなくなりました。

そこで、把握できるような状態かつ可読性を意識した方法を紹介します！

1. イベントを1つのファイルにまとめる

GAに送る処理を1つのファイルにまとめてモジュール化します。

可読性を高めるため、GAに送るデータを引数で渡すのではなくハードコーディングしてしまいます。

'use strict';
 
module.exports = {
  loginPage: {
    login: function(ga) {
      ga.event('ログインページ', 'ログイン', '', 1);
    },
    terms: function(ga) {
      ga.event('ログインページ', '利用規約', '', 1);
    },
    privacy: function(ga) {
      ga.event('ログインページ', 'プライバシーポリシー', '', 1);
    },
  },
  sideMenu: {
    terms: function(ga) {
      ga.event('サイドメニュー', '利用規約', '', 1);
    },
    privacy: function(ga) {
      ga.event('サイドメニュー', 'プライバシーポリシー', '', 1);
    },
    settings: function(ga) {
      ga.event('サイドメニュー', '設定', '', 1);
    },
    logout: function(ga) {
      ga.event('サイドメニュー', 'ログアウト', '', 1);
    },
  },
};

非常に見やすくなりました！

階層を分けることで、「ログインページ」や「サイドメニュー」といったジャンルに分けて、より見やすくなるようにしました。

ポイントは、このファイルから $ga を呼び出すことはできないので、引数に Vue で読み込んだライブラリを渡してあげます。

2. 各コンポーネントから呼び出す

あとはイベントを送るコンポーネントから呼び出せば、問題なく動作します。

<script>
// まとめたモジュールを読み込む
import ga from './ga';
 
export default {
  methods: {
    login: function() {
      // GAイベントを送る
      ga.loginPage.login(this.$ga);
 
      // 実際の処理
    },
  },
};
</script>

まとめ

今回は、Vueで構築されたサイトにGAのイベントを設定する時に、管理しやすい方法をご紹介しました。

1つのファイルにイベントをまとめることで、自分が設定しているイベントをまとめて確認できて、可読性も保つことができました。

よければ自分のプロジェクトに導入する際の参考にしていください。