Vue.jsで構築したSPAにGoogle Analyticsを導入する

Vue.js Google Analytics Google Tag Manager

　下記の記事で、Vue.js で構築したサイトをS3にホスティングし、Route 53で公開するまでの流れを整理しました。

www.ketancho.net

今回は、このサイトに Google Analytics （以下、GA）を導入します。厳密に言うと、Google Tag Manager（以下、GTM）を導入し、その上で GA を管理します。大きく分けて、

  • タグを追加するだけパターン
  • 環境に応じて GA の飛ばし先を変えたいパターン

というふたつの方法があり、前者は設定は簡単ですが、開発環境へのアクセスもトラッキングしてしまいます。要は、開発中の自分のリクエストもカウントされてしまうということです。これを避けるのが後者のパターンになります。では、見ていきます。

タグを追加するだけパターン

GA と GTM の初期設定を行う

　まず、Google 側のセットアップをします。こちらについては、下記の記事で紹介していますのでこの記事では割愛したいと思います。先ほどふたつの方法があると書きましたが、「環境に応じて GA の飛ばし先を変えたいパターン」を行う場合は、環境数分だけセットアップを行い、ID を控えておいてください。 　 www.ketancho.net

Vue.js 側にタグを埋め込む

　続いて、プロジェクトディレクトリのルートにある index.html に、先ほど取得した GTM のスクリプトを追加します。 head 要素のなるべく上に GTM のスクリプトを追加します。

<!DOCTYPE html>
<html>
  <head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>arbitraweb</title>
    <link rel="shortcut icon" type="image/png" href="./static/favicon.ico"/>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

「タグを追加するだけパターン」の場合は、これだけでトラッキングできるようになっているはずです。GA のリアルタイム画面で確認してください。

環境に応じて GA の飛ばし先を変えたいパターン

　続いて、環境に応じて飛ばし先を変えたいパターンを見ていきます。今回紹介する方法では、 script タグの内容（GTM の ID 部分）を環境に応じて変更する方式を採用しています。上で設定した script タグはいったんコメントアウトしておいてください。

config ファイルの修正

　config ディレクトリの下にある設定ファイルに GTM の ID を追加します。例えば、 dev.env.js を

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  GTM_ID: '"GTM-XXXXXXX"'
})

のように修正します。変数の値は、シングルクオテーションとダブルクオテーションで囲む必要があるので注意してください。これを環境ごとに設定します。

main.js で script タグの挿入を行う

　上で設定した値は process.env.GTM_ID のように取得することができます。これを使って script タグの GTM ID 部分だけを設定ファイルから取得するようにし、

document.write("\
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\
})(window,document,'script','dataLayer','" + process.env.GTM_ID + "');</script>\
")

のように書くことで、環境ごとに異なる飛ばし先でトラッキングを行うことができるようになります。

まとめ

　Vue.js で構築したサイトに GA, GTM を導入できました。元々やりたかった「本番環境と開発環境は分けてトラッキングしたい」という要件は満たせているはずです。ただ、書いていて思ったのですが、「本番環境のみトラッキングしたい」という要件であれば、簡単な「タグを追加するだけパターン」の方で導入しつつ、GA や GTM の機能で、本番ドメインへの接続のみトラッキングするという設定ができるのではないかなーという気もしてきました。（試していませんー。）

　他に、下記のような Vue.js 関連の記事を書いています。良ければご参照いただければと思います。

www.ketancho.net

www.ketancho.net