こんばんは。estieでフロントエンドを開発しているt-poyoです。
estie Advent Calendar 17日目の記事になります。17は素数です。良い数字ですね。

今回は、ABテストを最速で実装する方法について書いていこうと思います。

TL;DR

nuxt.jsの中小規模プロダクトのABテストは、
@nuxtjs/google-gtag と @nuxtjs/google-tag-manager の併用で最速実現！

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

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

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

を作りたいと考えました。
そして、考え抜いた2通りの登録フォームを比較し、より登録率が高い方を採用するため、ABテストの実施を決めました。

ABテストツールの選定

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

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

Google Optimizeの導入

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

実装としては大きくわけて下記2つが必要になります。

Google Analyticsでのコンバーションやサイト内回遊の計測
Google Optimizeによるコンポーネントの操作やリダイレクト

1. Google Analyticsでのコンバーションやサイト内回遊の計測

@nuxtjs/google-gtagを利用します。

$ npm install @nuxtjs/google-gtag

nuxt.config.js

    [
      '@nuxtjs/google-gtag',
      {
        id: 'XX-123456789-0',
        debug: false, // 本番環境以外でもGAを有効にしたい場合はtrue
      },
    ],

XX-123456789-0 の部分には、Google Analyticsのプロパティ設定から確認できる アナリティクス ID を記載します。
この設定で、基本的なページビューはGoogle Analyticsで取得できるようになります。

また、以下のような記述で簡単にカスタムイベントを発火し、集計することができます。

hogehoge.js

      this.$gtag('event', 'your_custom_event_name', {
        'event_category': 'hogehoge',
        'event_label': 'hugahuga',
      });

もちろん .vue 内のjs記述部分でもイベントを計測できます。

Tips

nuxt.config.jsでdebug: falseにしていても、ビルドの方法によってはローカルでの起動時やテスト環境でのイベントを本番同様に集計してしまうことがあります。

これらを未然に防ぐ為、Google Analytics側でホスト名による集計の制限をおこなうのがおすすめです。

2. Google OptimizeとWebサイトの接続

@nuxtjs/google-tag-managerを利用します。

$ npm install @nuxtjs/google-tag-manager

nuxt.config.js

    [
      '@nuxtjs/google-tag-manager',
      {
        id: 'GTM-FOOFOO',
        pageTracking: false, // pageViewのトラッキングは @nuxtjs/google-gtag がおこなう為
      },
    ],

GTM-FOOFOOの部分には、Google Tag ManagerのGTM IDを追加します。
この pageTracking: false は、ページビューの計測が@nuxtjs/google-gtag と重複するのを防ぐ為、必ず記載してください。

ABテストの開始

なんと、上記2プラグインのインストールと簡単な設定だけで、ABテストをおこなう準備ができてしまいました。
ここから先は余談になりますが、実際におこなったABテストの手法について説明します。

Google Optimizeではおおまかに、3種類のテスト方式が提案されています。

ABテスト
リダイレクトテスト
多変量テスト

今回は、登録フォームのABテストにあたり、

違うコンポーネントを出し分ける
コンポーネントによって異なるAPIを叩く必要がある

という要件があったため、（少し手がかかりますが）リダイレクトテストを採用しました。

リダイレクトテストの実施

リダイレクトテストで、ランディングページにきたユーザーの50%を別URLへリダイレクト
別URLを踏んだユーザーに対して、通常とは違う登録用コンポーネントを描画

という方法でABテストを進めました。
結果、片方の登録フォームで有意に登録率が上昇し、2週間程度で結果を出すことができました。

おわりに

estieでは、共に最適なUXをつくるフロントエンドエンジニアを随時募集しています！
よろしくお願いいたします！！

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