nuxt.jsの小〜中規模プロダクトで、最速でABテストと計測をおこなう

こんにちは。estieでフロントエンドを開発しているt-poyoです。
今回は、最速で小〜中規模のwebサービスにABテストを実装する方法について書いていこうと思います。

TL;DR

nuxt.jsの中小規模プロダクトのABテストと計測は、@nuxtjs/gtm + Google Optimizeでやるのがおすすめ

ABテストで、オフィスを探しやすいUIを開発したい

弊社では、「オフィス移転」という体験をよりシンプルに、簡単にするためのestieというプロダクトを開発しています。
よりよいオフィス探し体験のためにまず、

「移転を検討している人に、スムーズに登録してもらう登録フォーム」

を作りたいと考えました。
そして、考え抜いた2通りの登録フォームをABテストで比較し、より登録していただけた割合が高い方を採用することにしました。

今回は、ABテストをおこなうための準備と、ユーザーの行動分析のためのGAの導入を一緒に解説したいと思います。

ABテストツールの選定

ABテストをおこなうにあたり、ツールは**Google Optimize**を導入することにしました。
理由としてはざっくり以下の3点になります。

基本無料で試すことができる
実装のコストが低い
（弊社では）すでに使用していたGoogle Analyticsとのシナジーがある

Google Optimizeの使用開始のためには、Google Tag manager(以下GTM)の導入が必要なのですが、
GTMを導入していると下記のような利点もあります。

各種広告運用サービスが大抵GTMに対応しており、コンバージョン計測等の設定が容易
顧客の動きを可視化するサービス(ヒートマップ等)も大抵GTMに対応している

実装と設定方法

Google Analytics, Google Optimizeの導入

事前準備として下記2つの設定をおこないます。

Google Analyticsのアカウント作成

https://support.google.com/analytics/answer/1008015?hl=ja&ref_topic=3544906

上記アカウントに紐付けた、Google Tag ManagerでWebサイト用コンテナを作成

https://support.google.com/tagmanager/answer/6103696?hl=ja&ref_topic=3441530

ソースコード内の実装

@nuxtjs/gtm は、Nuxt.jsのアプリケーションにGoogle Tag managerを組み込むためのプラグインです。
以前は@nuxtjs/google-tag-managerという同じくnuxt-community内のプラグインがあったのですが、数ヶ月前に@nuxtjs/gtmへの移行が推奨され、
弊社でもプラグインのリプレイスをおこないました。

インストール方法はreadmeに書いてあります。npm or yarnでのインストールです。
https://github.com/nuxt-community/gtm-module https://github.com/nuxt-community/gtm-module/blob/master/README.md

次に、nuxt.config.jsにモジュール設定を追加します。

    [
      '@nuxtjs/gtm',
      {
        id: 'GTM-xxxxxxx',
        pageTracking: true,
      },
    ],

'GTM-xxxxxxx' の部分には、GTMの「タグマネージャーアカウント＞コンテナ一覧」から確認できるコンテナのIDを記載します。
これで、指定したコンテナIDを持つGTMコンテナに向けて各種イベントが発火できるようになります。

ページビューはまだ計測できない

実はこの状態では落とし穴があります。
SPAで動作させるアプリケーションの場合、ページビューイベントがサーバアクセス時しか計測されません。

そこで、通常のページビューイベントとは別に、SPAでのページ遷移イベントをGTM側で拾う必要があります。
アプリケーションのソースコード側での変更は必要ありませんが、GTM側の設定は後述します。

詳しくはこちらのブログに詳しく書いてありますので、気になる方はご一読をおすすめいたします。
tech.actindi.net

GAでの計測のための設定

ここからはGTMの設定に移ります。
先程作成したコンテナ内で、nuxt.jsアプリケーションに仕込んだ@nuxtjs/gtmが発火したイベントを拾うための設定をおこないます。

おおまかな流れとしては下記です。

@nuxtjs/gtmがイベントを発火
コンテナ内の「トリガー」でイベント名を指定し、イベントの発火を検知する
カスタム変数を作成し、イベントに含まれるデータ(閲覧対象のURL情報など)を収集する
Google Analyticsにイベント情報を送るための「タグ」を、上記で設定したトリガーで発火させる

コンテナ内の「トリガー」でイベント名を指定し、イベントの発火を検知する

nuxtRouteというイベント名でnuxtが処理するルーティングの情報が送られてくる為、そのイベント名を指定し、コンテナが検知できるようにします。

カスタム変数を作成し、イベントに含まれるデータ(閲覧対象のURL情報など)を収集する

「データレイヤーの変数」を指定することで、"pageUrl"などバイネームでイベントに含まれるデータを拾うことができます。
拾うことのできる変数は、ソースコードを読むとわかります。

function startPageTracking(ctx) {
  ctx.app.router.afterEach((to) => {
    setTimeout(() => {
      ctx.$gtm.push(to.gtm || {
        routeName: to.name,
        pageType: 'PageView',
        pageUrl: '<%= options.routerBase %>' + to.fullPath,
        pageTitle: (typeof document !== 'undefined' && document.title) || '',
        event: '<%= options.pageViewEventName %>'
      })
    }, 250)
  })
}

github.com

Google Analyticsにイベント情報を送るための「タグ」を、上記で設定したトリガーで発火させる

新規タグを作成し、Google Analyticsへ送るデータを設定していきます。
"SPA Tracking ID"は別途設定した変数で、送信先となるGoogle AnalyticsのトラッキングIDを入力しています("UA-xxxxxxxxx-x"などの文字列)。
また、下部のフィールドの設定で、先程設定したカスタム変数を、ページビューイベントに含まれる値として、フィールド名とともに設定しています。