デプロイなしで簡単！A/Bテスト【Googleオプティマイズで出来ること】

こちらは『LITALICO Advent Calendar 2021』13日目の記事になります。

マーケティング✕エンジニアリング領域に携わるようになり、早1年。
日々A/Bテストを行う中で「さてはGoogleオプティマイズ、めちゃめちゃ有能では！？」となったので、エンジニア視点からオプティマイズの使い勝手の良さを語っていこうと思います。

※オプティマイズを推したい熱量のあまりスクショ画像盛り盛りになったので、通信制限にお気を付けください。

前提

• この記事のターゲット
  • オプティマイズ初心者（全然触ったことない or ﾁｮｯﾄ触った）
  • 実装者（職種を問わず、コーディングする人とする）
• この記事を読むと……
  • オプティマイズのA/Bテストで扱える機能がざっくりわかる👏
  • 実際オプティマイズに触ってみたくなる…！？👀💥

Googleオプティマイズとは

Googleオプティマイズとは、Googleが提供している、無料のA/Bテストツールです。
Googleが提供しているサービスということもあり、Googleアナリティクス/Google広告を使っている場合、連携が容易に行えます。

テスト用に、レイアウトやボタンの形・色・文言などを、ブラウザ上で直感的に編集することが可能。
その上、レポート画面がグラフィカルで見やすいので、非エンジニアでも比較的苦手意識を持たずに扱うことができます。

さらに、HTML/CSS/JavaScriptが分かる人間であれば、その辺りのコードをいい感じに書き換えることも可能です。（こちらは後ほど詳細を記述いたします。）

実施できるテストの種類

Googleオプティマイズでは主に以下の3タイプのテストが行えます。

• A/Bテスト
  • ページ内で、複数のパターンをテストする。 A/B/nテストとも呼ばれる。
• 多変量テスト
  • 複数の異なるセクションを含むパターンをテストする。
• リダイレクトテスト
  • 異なるURLまたはパスで識別される個別のウェブページをテストする。

こちらは公式サイトの説明がとても丁寧なので、詳細はそちらに任せようと思います！見てください！
（オプティマイズに関わらず、Googleのサービスは公式の説明が充足していますよね！好きです。）

今回はタイトルにある通りA/Bテストに絞って説明します。
ただ、基本的な仕組みはすべて同じなため、A/Bテストに手を出した方はだんだん他のテストも試してみたくなる病にかかると思います。楽しみです。

テストの設定内容(パターンやターゲット)

1つのテストにつき、以下のことが設定できます。

• パターン
  • テスト画面のこと。「パターンを追加する」みたいな言い方をする。
  • A/Bテストと称しながらも3つ以上パターン登録が可能（なのでA/B/nテストとも呼ばれる）。
• ページターゲティング
  • テストを実行するページのこと。正規表現を利用して、複数ページに適用することも可能。
• オーディエンスターゲティング
  • テストを実行するユーザーの範囲。本記事では割愛気味。
• 目標
  • 計測したい目標。Googleアナリティクスで確認できる数値はだいたい設定できるはず。

オーディエンスターゲティングや目標の設定は、Googleアナリティクスと結び付いていくことがほとんどなため、マーケターとの連携が必要になってくるかもしれません。

ただ、パターンやページターゲティングは、実装者が把握しておくと、テストで行える範囲がぐっと広がります。後述の「GoogleオプティマイズでA/Bテストを設定する」の章で、この辺りを詳しく説明していこうと思います。

オプティマイズと相性が良い/悪いサイト

オプティマイズで実施するテストは、雑に書くと以下のような仕組みになっています。

察しが良い方はお気付きかもしれませんが、JavaScriptによってDOMの書き換えをすることが多いサイトでは競合が起きる可能性があるため、オプティマイズは不向きかもしれません。

逆に、多くが静的ページで構成されていたり同一の構造を持っていたりする、サービスサイトやオウンドメディア、LPといったwebサイトとは、非常に相性が良いと言えます。

また、競合する可能性があるとは言え、アコーディオンやハンバーガーメニューのように、display: show/hideを切り替えるのみであれば、内側のHTMLのみオプティマイズで上書きする〜といったことも可能です。Vue.jsでmountedの際に生成した要素を変更することもできました。
実際どれくらいカスタマイズできるかは、触って確認した方が早いかもしれません。

では、どのように画面を編集出来るのか、実画面を見ていきましょう。

GoogleオプティマイズでA/Bテストを設定する

1. テストパターンの作成

まず、テストを作成しようとすると、以下の画面が現れます。ここの「パターンを追加」をクリックします。

1-1. ノーコードで編集する

オプティマイズでは、ブラウザ上でビジュアルエディタを用いてテストパターンを作成することが可能です。

ノーコードで修正する場合は、「修正したい要素を直接カーソルで選択」→「エディタパレットで値をいじっていく」ことになります。
うまく要素を選択できない場合は、アプリバーの「要素セレクタ」や「パンくずリスト」を併用すると良いです。

ブラウザサイズも、iPhone系など主要な端末に切り替えることができます。また、自分で直接ブラウザサイズを数値指定できる「レスポンシブ」パターンもあります。この辺りは、GoogleChromeのデベロッパーツールと感覚が近いです。
PC/スマホの両画面（あるいはタブレットも含めた3画面）を確認することも多いかと思うので、最初からレスポンシブ表示にして操作すると良いかもしれません。

さて、エディタパレットで編集した内容は、具体的にどんな感じでコードとして読み込まれているのでしょうか。

1つ以上変更を加えると、アプリバーの右上に「n件の変更」と表示されるので、そこをクリックしていくと変更内容の詳細が確認できます。（どこ編集したっけ？と忘れてしまった場合にも有効です。）

編集内容を具体的なソースコードで見ると、オプティマイズがやっていることが分かってきましたね！「重要」をチェックすると、例の!importantが適用されるんだなって気分になってきました！

1-2. 直接HTMLを編集する

それでは早速HTMLを直接書き換えてみましょう。
オプティマイズでは、選択した要素に関して「HTMLを編集」することが可能です。

今回は分かりやすい例として、自分のフォロワーをいじっていこうと思います。（※A/Bテストでこういった改変を行うことはないと思います。あくまで例です。）

フォロワーが2名だったのを、100名に書き換えてみました。

1-1と同様、オプティマイズでどのように行われているのか変更内容を見てみます。

ちょっとずつ仕組みが分かってきましたね！
そうです。要素セレクタの div.css-86h3r5>a:nth-of-type(3) の nth-of-type を 2 に変えると、フォロー数の要素が「100フォロワー」に変更されます。

実際やっていることは単純な上書きなんです。この調子でどんどんいきましょう。

1-3. 直接CSSを編集する

CSSの変更は、1-1のように「要素を選択」→「エディタパレットで値を指定」でも行えますし、特定のidやclassに一括で指定することも可能です。今回は後者のやり方を見てみましょう。

アプリバーの右側にある < > アイコンをクリック→「CSS」　を選択すると、モーダルウィンドウが出現します。

とりあえずここに下記を入力して、aタグをすべて赤線で囲ってみます。

a { border: 1px solid red !important; }

上書きされました。変更内容を見るとこんな感じです。

1-4. 直接JavaScriptを編集する

JavaScriptもCSSと同様、以下の2通りの方法で修正が可能です。

• 要素を選択→エディタパレット「要素を編集」→「JavaScript を実行」
  
• アプリバー右側 < > アイコン→「グローバル JavaScript」
  

自由度が……高い…………！！

1-5. (番外編)隠れている要素を指定して編集する

ここまでで、要素を指定して何某かを修正する方法は分かってきたかと思います。

ただ、webサイトっていつも表示されている要素ばかりではありませんよね……。冒頭で伝えた通り、たとえばアコーディオンやハンバーガーメニューのように、何らかのイベントによって表示の切り替えを行っている場合もあるかと思います。

その場合、パンくずリストの「body > もっと見る」から、要素をたどっていくこともできますし、アプリバーの「要素の選択」で直接要素を指定することも可能です。

そして、なんと！「まどろっこしい！目で見ながら要素を選択したい！」というわがままにも、オプティマイズはお応えできます！！
アプリバー右側にある ウィンドウ+カーソル アイコンをクリックすると「インタラクティブモード」に変化します。

この画面では、オプティマイズで設定した内容を保持したまま、挙動を確認することができます。リンクをクリックすると画面遷移しますし、onClickイベントを仕込んでいる場合、イベントが発火します。

そして画面右上の「終了」ボタンを押すと、今開いている画面のまま再びビジュアルエディタの画面に戻ります。この機能を利用して、隠されていた要素をカーソルで選択することが可能になります。

ただ、onFocusなどはおそらく状態を保持できないので、諦めて直接指定するかパンくずリストを深掘ってみてください。

2. 実施するページの指定

ここまでで、どのくらい画面を操作できるかざっくり把握できたかと思います。続いて、適用するページの指定に移ります。

オプティマイズでは、上記のように、1つ1つURLを指定することでターゲティングすることもできますし、正規表現を使用することも可能です。

• URL
  • document.location のこと。
• ホスト
  • 「ドメイン」または「ドメイン名」のこと。
• パス
  • URLで、host/domain 名に続く部分。クエリパラメータは含まれない。
  • ※クエリパラメータは、次節の「オーディエンスターゲティング」にて指定可能。
• URLフラグメント
  • 「#」以降に続く文字列

やっぱり色々な指定ができそうです。
試しに「Qiitaのわたし自身の投稿記事すべて」を指定するとしましょう。

ちょっと雑に設定してみましたが、正規表現の指定が合っているかも、以下のようにオプティマイズの画面上で直接確認ができます。

「正規表現が合ってるか分からないから不安……」という方にも優しい設計です！

3. ターゲットユーザーの指定

これはやろうと思うといろいろ出来すぎちゃうので今回は省略します。
ざっくりとこれくらいの設定ができるので、使い倒そうとすると本当にいろいろ出来ちゃうことが分かります。

※オプティマイズ360とは、オプティマイズの有償版です。無償の範囲でも十分いろいろなことができますが、さらに使い倒したい方向けのサービスになります。

4. 目標の設定

ご紹介する機能としては大詰めの「目標」の設定になります。基本的に、内容は以下の2通りに分かれます。どちらもGoogleアナリティクスとリンクさせる必要があります。

• リストから選択 > Googleアナリティクスの「目標」と連動させる
• カスタム目標を作成 > Googleアナリティクスの「イベント」「ページビュー数」で指定する

目標は、「メインの目標」が1つ、「副目標」が2つの、合計3つまで設定が可能です。
私が所属するプロジェクトでは、メインの目標を「申し込み完了」、副目標を「CVボタンのクリック数」などにしてA/Bテストを行うことが多いです。

この辺りは「そもそもどこの数値を改善することが目的でテストを実施するか」によるため、マーケターと相談しながら設定するのが良いかもしれません。

とりあえずGoogleオプティマイズに触ってみる

どうですか？オプティマイズを触ってみたい気持ちが芽生えてきませんか？
でもいきなり仕事のプロジェクトに導入したり、本番環境に投入するのは、いろいろな承認を通さなきゃいけないし、失敗したら怖いし……と様々な障壁を感じますよね。

そんな方でも安心！オプティマイズは、個人のアカウントで雑に触ってみることも可能です！
既にお気付きの方もいらっしゃるかもしれませんが、私は上記でオプティマイズの機能紹介の時に、Qiitaのプロフィールページを例に挙げていますよね。

実際にテストを走らせるつもりはなく「オプティマイズの編集機能などを触ってみたい！」程度であれば、アナリティクスの連動や、オプティマイズのタグを導入する必要はありません。
オプティマイズの「利用を開始」ボタンひとつ押せば、上記で伝えてきた機能すべてを扱うことが可能なのです。

※実運用で導入したい場合も、公式のチュートリアルが優秀なので、言われたことに沿って登録を進めるとさっくり導入することができます。

Googleオプティマイズをチームで運用する

ここまでオプティマイズでできるA/Bテストの幅について説明してきましたが、実運用ではチームメンバーとのコラボレートが欠かせません。
特に時折伝えていた「マーケターと相談しながら」って、実際オプティマイズでできるの？という部分に関して、補足いたします。

オプティマイズは基本的に「開始」ボタンを押すまでは、下書き状態で保存されます。
下書きは、オプティマイズの画面上から確認することもできますし、個別にURLが発行されているため、URLで共有することも可能です。

そのため、以下のような運用で設定内容を確認し、相談しながら公開することが可能になります。

• テストそれぞれでURLが発行されているので、「このテスト設定しました〜」とURLで共有できる。
• 「開始」ボタンを押すまで公開されないので、安心して 設定→公開 まで持っていける。

終わりに

メンバーと膝を突き合わせて、あるいは一人で競合他社のサービスなどを調査しながら「この機能/UI良いかも！」と改修しても、実際に良いかどうかを計測するには、実数値の比較が必要になってきます。

webでは気軽に数値を計測できる反面、時期要因など、改修内容以外の要因に影響されることも多くあります。そのため、なるべくすべての条件を合わせた状態で実施できるA/Bテストは欠かせません。

とはいえ、有料のテストツールが導入しづらい状態にあったり、フロントエンドのみで解決しなければいけなかったりと、さまざまな事情があると思います。
そういった制限がある、もしくは「フレームワーク側のプラグインを利用して実施しているけど、もっと気軽にA/Bテストをしたい！」といった方々に、少しでも足しになればな〜と思い、本記事を綴ってみました。

もちろんそんな事情がなくても、Googleオプティマイズくんつよつよなので、ぜひ触ってみてください！！💪✨✨＜ｵﾅｼｬｽ!!

明日は同僚の @tatsuya-fujii-LITALICO の「独自コレクションクラスのすゝめ」になります！乞うご期待！！