見出し画像

Railsでgem splitを使って AB テストの基盤を開発した話

ma6netic

はじめに

こんにちは、くふう AI スタジオの 長嶺 です。
普段はサーバーサイドエンジニアとして、 「R+house ネットワーク」や加盟店向けの Web サイト構築サービス「R+house Web」の開発を行なっています。

Web 開発を進める中で、多くのエンジニアが直面する課題の一つに「コンバージョン率（CV）の向上」があります。私たちのチームも例外ではなく、いかにして訪問者にアクション（例：問い合わせフォームの送信や資料請求など）を起こしてもらうか悩んでいました。そこで、私たちは AB テストの導入を決意しました。

AB テストを実施することで、異なるバージョンのページや要素（例えば、ボタンの色や文言）を比較することができ、それぞれがどの程度の効果を発揮するかをデータに基づいて評価できます。結果として、ユーザー体験の向上やコンバージョン率の最適化を実現することが可能です。

実は、AB テストの実装は私にとって初めての挑戦でした。どんなツールが最適なのか？ どのように実装すれば効果的なのか？ これらの疑問を解消するためにチーム全員で試行錯誤しました。その過程で得た知見や教訓を、この記事を通じてみなさんと共有したいと思います。

AB テストの基盤実装準備

まずは、AB テストツールの選定から始めます。現在は多くの AB テスト手法が存在し、大きく分けて JavaScript（JS）ベースのツールを用いて AB テストの出しわけから計測までを一貫して行う方法と、AB テストの出しわけは Gem などのライブラリを使って独自実装したのち、別の計測ツールを利用する方法の 2 種類があります。それぞれに特徴があり、プロジェクトの要件や規模に応じて適切なツールを選びます。

JSベースのツール

代表例: Optimizely、ABTasty、Dejam
特長：フロントエンドで動作するため、デザイナーやマーケターが簡単に使用できます。変更をリアルタイムで確認でき、デザインやコンテンツ変更をすぐにテストすることが可能です。
適用例：デザイナーがデザインを作ってどんどんテストを回していきたい場合や、大規模なテストを迅速に行いたい場合。

Gem などのライブラリを使って独自実装する方法

代表例: Gem split
特長：Ruby on Rails などのバックエンドで動作するため、サーバサイドでのテストが容易に実施できます。
適用例：シンプルなテストを開発者主体で行いたい場合や、小規模のテストを行いたい場合。

私たちのプロジェクトでは、Gem split で AB テストの表示出しわけ部分を実装し、Google Tag Manager(GTM)での管理、さらに Google Analytics(GA)で計測を行う方法を選択しました。

今回は小規模なテストを行うことが求められていたため、シンプルなツールが必要でした。また、基本的には無料で利用できることと、Google Tag Manager や Google Analytics は既にプロジェクトに組み込まれており、導入が容易であることも決め手の一つとなりました。

AB テスト環境の構築

次に、AB テストの環境構築について説明します。前提として、split はデータストアとして Redis を利用するため、Redis の導入を事前に行なっておく必要があります。

Gem のインストール
Gemfile に以下の行を追加し、`bundle install`を実行します。

gem 'split'

初期設定
初期化ファイル(config/initialize/split.rb)を作成し、設定を行います。開発環境とそのほかの環境での Redis の設定に加え、並行して二つのテストケースを利用することを想定して以下のように設定を行なっています。

Split.redis = if Rails.env.staging? || Rails.env.production?
                Redis.new(url: ENV['REDIS_URL'])
              else
                Redis.new(host: 'redis', port: 6379, db: 1)
              end

Split.configure do |config|
  config.allow_multiple_experiments = true
end

テストケースの設定
コントローラーや view で実際にテストを設定します。例えば、コントローラーでは以下のように使用します。

def index
  @button_color = ab_test(:button_color_test)
end

view では以下のように表示します。

<%= button_to 'Sign Up', sign_up_path, style: "background-color: #{@button_color};" %>

GTM タグのインストール
作成した GTM のタグを取得し、サイトの全ページに埋め込みます。通常、head タグ内に次のようなコードを追加します。
'GTM-xxxxxxx'の部分には作成した GTM のコンテナ ID が入ります。

<!-- 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 -->

データレイヤーへの値追加
続いて、データレイヤーへ値を追加します。データレイヤーとは、GTM のためにデータを一時的に格納する箱のようなもので、WEB ページと GTM との間に存在します。
このデータレイヤーの箱の中にはページのクリック情報やスクロール情報などが追加されていきます.
GTM はこの箱の中からデータを取り出してタグや変数として利用しています。

データレイヤーに値を追加するには、変数名と値をセットで追加します。
今回のようにテストのキーとテスト結果を追加する場合、JavaScript を用いて以下のようなコードを記述します。テストは複数並行で走ることも考慮して、値の部分は「テスト名 yymm_テスト結果(A/B)」のような形で入るようにしました。

dataLayer.push({
  ABTest: `◯◯Test2406_${◯◯TestType}`,
})

これで AB テストの基盤環境が整いました。次は実際のテスト実施とデータ収集に進みます。

テストケースの設定

AB テストを行うにあたって、何のためにテストを行うのか、何を対象にテストをするのかを決めておくことも必要です。ここでは、一般的なテストケースの作り方、重要な変数や指標、そしてターゲットの指定について説明します。

AB テストの目的設定
まずはじめに、AB テストの目的の設定を行います。何をテストするのか、その目的を明確にします。
例えば、フォームの入力率を向上のため。のように具体的な目的を決めておきます。
要素の選定
次に、要素の選定を行います。ここでは、どの要素を対象にテストを行うかを選びます。

  • デザインの変更

    • ボタンの色

    • ページのレイアウト

  • テキストの変更

    • 見出し

  • 機能面の変更

    • フォームの入力数

    • ステップ数

バリエーションの作成
次に、テストケースのバリエーションを作成します。通常、A（元のバージョン）と B（変更を加えたバージョン）を作成します。

指標の選定
何をもとにテストの評価や判断を行うのかを決めておきます。

  • クリック率

    • ボタンやリンクなどのクリック数を計測します。

  • コンバージョン率

    • フォームの入力送信数や購入完了数など、最終的な目的の達成率を測定します。

  • 滞在時間

    • 特定のページでのユーザーの滞在時間を測定します。

  • バウンス率

    • ユーザーがサイトを訪れてすぐに離脱する割合を測定します。

ターゲットの指定
どのユーザー層を対象にするのかを決めておきます。

  • 新規訪問者

  • 際訪問者

  • 特定の行動をしたユーザー

ここまでが、AB テストを開始するまでに必要な準備となります。結構多いですね。。。
準備が完了した上でテストを実施し、データを収集・分析して最適なパターンを特定します。

今回私が行なった AB テストのケースでは、以下のように設定を行いました。

  1. AB テストの目的: コンバージョン率向上のため

  2. 要素の選定: 対象の入力フォームへの導線

  3. バリエーションの作成

    • A(元のバージョン)

    • B(変更を加えたバージョン)

      • Bの変更点

        • 見出しのテキスト変更

        • フォーム入力後の流れの説明を追加

  4. 指標: クリック率、コンバージョン率、フォームへの流入数

  5. ターゲットの指定:すべてのユーザー

実施とデータ収集

AB テストの準備が整ったあとは、実際にテストを実行します。
今回は、AB テストの基盤は gem split を用いて実装しているため、本番環境に反映すると AB の表示の出しわけが即座に展開されます。
そのため、ステージング環境などで、テストの設定がうまく GA で取得できているか、表示のバリエーションがうまく出し分けられているか、指標が正しく取得できているかはチーム内で確認を行いました。

テスト期間は、通常 1~2 週間ほどが一般的ですが、ユーザー数やページのトラフィックに応じて期間を延長することも考慮します。今回はページのトラフィックが想定よりも少なく、有効なデータ量に達していなかったため、3 週間ほどテストを行いました。

計測は GA の探索ページで行います。データレイヤーには ABTest というキーで、「〇〇 Test2406_A」「〇〇 Test2406_B」のような値が追加されているので、それらをセグメントとして設定できます。
それらをもとに、「フォームの流入」「フォームの閲覧」「フォームの達成ステップ」のようにステップを定義して、それぞれのパターンを表示したときにユーザーがどれほどフォームの入力を完了したのかを計測していました。

また、テスト期間中は定期的に GA の探索ページを見にいき、計測がうまく行われているか、エラーや不具合が発生していないかをこまめに確認していました。不具合が発生した場合は迅速に対応を行う必要があります。

データ分析と結果の解釈・今後の改善

AB テストが完了した後は、収集したデータを分析して結果を解釈する必要があります。今回、カイ二乗検定を用いてデータの統計的有意性を検証しました。具体的な検定内容についてはボリュームが多いため、詳細は割愛します。

結果として、B パターンの方がクリック数も多く、統計的にも有意であることが確認されました。
フォームへの遷移導線の文言を変更しても、遷移率には大きな数値変化は見られませんでした。しかし、フォームの項目をクリックするユーザー数は B パターンで有意に多くなりました。
入力後の流れを先に説明することで、ユーザーのフォーム入力への期待を高める効果があると見られます。

これらの結果をもとに、B パターンでの 100%公開を行いました。

まとめ

この記事では、AB テストを始めるにあたってどんなことを決めておく必要があるのか、ツールの選定方法や実装の流れについて説明しました。
はじめての実装も多く、調査をしながら進めましたが、gem split は非常にシンプルで比較的短時間で実装を完了することができました。

AB テストのツール選定は、要件やプロジェクトの規模、コストによって大きく異なるため、事前にしっかりとチームでコミュニケーションをとっておくことが重要です。

また、統計の部分においては PM 主導で進められましたが、私自身も今後は統計の知識を深めていきたいと感じました。。今後チームでは施策の分析力強化を図るため、施策単位の分析・評価を持ち回りで行なっていくことに決定しました。

AB テストを行うことで、施策がユーザーにどのような影響を与えたのかをデータに基づいて判断することができます。今後も、ユーザーがより快適にサービスを利用できるよう、継続的な改善を行っていきます。

くふう AI スタジオでは、採用活動を行っています。

当社は「AX で 暮らしに ひらめきを」をビジョンに、2023 年 7 月に設立されました。
（AX ＝ AI eXperience（UI/UX における AI/AX）と AI Transformation（DX における AX）の意味を持つ当社が唱えた造語）
くふうカンパニーグループのサービスの企画開発運用を主な事業とし、非エンジニアさえも当たり前に AI を使いこなせるよう、積極的な AI 利活用を推進しています。
（サービスの一例：累計 DL 数 1,000 万以上の家計簿アプリ「Zaim」、月間利用者数 1,600 万人のチラシアプリ「トクバイ」等）
AX を活用した未来を一緒に作っていく仲間を募集中です。
ご興味がございましたら、以下からカジュアル面談のお申込みやご応募等お気軽にお問合せください。
https://open.talentio.com/r/1/c/kufu-ai-studio/homes/3849


この記事が気に入ったらサポートをしてみませんか？