こんにちは、SINAPの塩入です。
私が所属するグロースチームでは日々ABテストを用いてサイト改善を行っています。

今回は、ABテストを行う際に必須のツールであるABテストツールについてお話します。
「ABテスト」や「ABテストツール」と検索すると、「ABテストツール　おすすめ◯選」「ABテストツール　比較◯選」などの検索結果が出てくるかと思います。これらの記事を読んだ後に、「結局どのツールが良いのか？どれも同じでは？」と疑問に思うこともあるでしょう。

そこで、実際に業務で使用しているABテストツールを、導入からテスト実施に至る使用感を踏まえて、シリーズ形式でご紹介します。
それでは、第1回として、VWOについてご紹介させていただきます！

VWOとは

VWO（Visual Website Optimizer）は、インドのデリーにあるIT企業Wingifyによって開発されたABテストツールです。150カ国以上で利用されており、日本でもいくつかの代理店が存在するため、安心して使用できます。

利用できる基本的な機能としてABテスト・多変量テスト・スプリットテストの3種類のテストが可能です。また、プランによっては、ABテストツール以外にもヒートマップ機能やセッションリプレイ(サイトに来訪したユーザーの画面を録画し、後から視聴出来る機能)が付帯しており、サイト改善に大いに役立ちます。

使用感としては、「ノーコードツール」としても「本格的な実装ツール」としても優れています。ノーコードでの利用では、専門的な知識がなくても直感的にウェブサイトの画面を編集し、施策を作成してテストを実施できます。

また、複雑なテストが必要な場面では、本格的な実装を行うツールとしても機能し、使いやすいエディターがエンジニアからの評価も高いです。

VWOは無料で使えるの?

VWOは2023年1月22日に無料プランを公開しました。このプランでは、月間5万人まで無料で利用できます。

これは、グーグル オプティマイズ(Google Optimize)が2023年9月30日にサービスを終了した経緯があり、これまで有料でしか利用できなかったVWOが無料で使えるようになったのは嬉しい点ですね。(気軽に試せるABテストツールは少ないので、、、「ちょっと触ってみてください！のように提案がしにくいという個人的な意見)

無料プランでは月間アクセス数の上限や機能が制限されている為、サイトの規模によっては十分なテストができない可能性があります。その場合はVWOの有料プランとして「Testing Growth / Pro / Enterprise」が提供されています。なので、まずは無料で気軽に試してみて必要に応じてプランを変更すると良いと思います。

なお、料金プランの詳細については、以下のプランページをご確認ください。


https://vwo.com/pricing/

VWOの導入方法

1.アカウント登録

下記のサイトにアクセスして「Try VWO for Free」をクリックし、アカウントを作成します。途中でプランの選択が出るのでお好みのプランを選択してください。(無料で利用したい場合は30日のトライアル期間後に無料のStarterプランに切り替えます。)

2.タグをサイトに埋め込み

アカウント登録が完了したら、VWOを動かすためのタグ(SmartCode)をサイトに埋め込みます。

• 「Configurations」の中にある「ウェブサイトとアプリ」を選択します。

• 該当のWebサイトを選択して表示されたSmartCodeを</head> タグの前に追加します。

※VWOはGTM(Googleタグマネージャー)からのタグ追加は非推奨となっています。GTM経由でタグを追加するとVWO コードを非同期的にロードするため、ページがちらつく可能性があります。

ちなみに、非推奨の方法でタグを追加すると、下記のようなエラーメッセージで教えてくれます。
こういった機能はABテストツールに慣れていない人が導入を行う場合に嬉しい機能です。

• タグの設置が完了したら、最後に正しく動作するかを確認できるチェッカーで確認します。

VWOのABテスト設置方法

1.ABテストの基本設定

• 「テスト」タブの中にある「A/B」を選択し「+作成」を選択

• ABテストの施策と対象ページの設定を行います。
  • ①に施策名を入力します。
  • ②にテスト対象のページを入力します。

※SINAPではお客様との連絡などをBacklogで行っており、施策名にはBacklogのチケット番号とチケット名を用いて管理しています。

2.ABテストのテストパターンを作成し、配信割合を設定

• バリエーションのタブを開き「+Add variation」をクリックし、ABテストに必要なテストパターンの数だけ「variation」を作成します。
  • ①テストパターン名を入力します。
  • ②配信比率を設定します。

VWOの配信比率変更は自動で100%に調整してくれるのでとても便利です。
(複数のABテストツールを使っていると、実は配信比率を手動で計算して100%しないといけないツールもあるので、地味に嬉しい機能です。)

3.テスト実装

• テストを実装するには「編集」ボタンをクリックします。

• テスト対象ページが読み込まれ、編集画面(ビジュアルエディタ)が開きます。この画面からABテストを実装していきます。

ノーコードでABテストを実施したい場合

• ABテストの対象としたい要素をクリックすると、編集画面が表示されます。

• 要素の変更をクリックすると、HTMLやCSSなどの知識がなくてもフォントサイズ・文字色・背景色・大きさなど様々な変更が可能となっています。

• テキストの差し替えを行いたい場合も、対象のテキストを選択して「Edut HTML」をクリックすると簡単に既存のテキストを編集することが可能です。

• 特定の要素を削除したい場合も対象を選択して「Remove」を選択するだけで、簡単に要素の非表示テストが行えます。

• テストしたい施策の実装が終わったら「SAVE AND CONTINUE」をクリックして編集画面(ビジュアルエディタ)を終了させます。　

HTML・CSS・jsを記述してテストを実装したい場合

「code」をクリックするとHTML・CSS・jsを記述出来るエディターが表示されます。
このエディターに記述することでテストの実装が可能です。

エディターに記述して、「Done」をクリックするとすぐに実装内容が反映されるので、実装確認も簡単に出来ます。

テストしたい施策の実装が終わったら「SAVE AND CONTINUE」をクリックして編集画面(ビジュアルエディタ)を終了させます。　

クリック計測の設定

VWOはクリック計測を簡単に仕込むことが可能です！
これはABテストをするうえでとても嬉しい機能で、テストの勝敗を決める際に役立ちます！
この機能が無いとGA4と連携させたりする手間が増えるので、実装工数やレポートの工数が増加傾向になるので、1つのツールで完結出来るのはとてもありがたいです。

• 対象の要素をクリックして、「Track Clicks」を選択します。

• 指標名を記入して「Done」を押すと指標が追加されます。

各デバイスごとの実装確認

VWOでは編集画面(ビジュアルエディタ)で各デバイスごとのプレビューを見ることが出来ます。

SINAPでは実機確認はテスト開始前に必ず行いますが、実装中に簡単に各デバイスのプレビューができるのは作業の効率化につながるため、嬉しい機能です。

• ディスクトップ

• モバイル

4.ABテストの勝ち負けを決めるゴールの設定

ABテストの施策を実装出来たら最後に勝敗を決める為の指標を設定していきます。

• Primary metric（主要指標）:テスト結果に直接影響するメインゴール(コンバージョン)となる指標を設定します。
• Secondary metrics（二次指標）: Primary metricとは別のサブで追っていきたい指標を設定します。(複数設定可能)

今回は

• Primary metric（主要指標)：問い合わせフォームの完了ページ閲覧
• Secondary metrics（二次指標）：「問い合わせフォームのページ閲覧」「クリック計測で設定したMVのボタンクリック」

を設定しました。

5.テスト対象者の設定(任意)

実施するABテストの施策によっては、テスト対象となるユーザーやセッション等を絞り込む必要になる場合があります。
そういった場合は「対象者とトラフィック」を選択すると、ランディングページを指定したり、デバイスを指定したりする訪問者の属性を絞り込むセグメントの機能があります。

これを利用して、行う施策にマッチするテスト対象者の設定をおこないます。

6.ABテストを開始する

ここまで設定したら、最後に各テスト案をプレビュー機能を利用して実際の画面で最終確認します。

「Review」タブからライブプレビューを選択し、対象ページのURLを入力してから「Preview in a new tab」をクリックしてテストが正しく実装されているかを確認します。

上記のプレビューが問題なければ「Start test」をクリックしてABテストを開始します。

ABテスト結果の確認方法

テスト開始後は「Report」タグからテスト結果を確認することが出来ます。
「Metrics」には「4.ABテストの勝ち負けを決めるゴールの設定」で設定した指標名が表示されます。この中から計測した指標名をクリックすると各テスト案ごとのコンバージョン数やCVRなどのテスト結果を確認することができます。

ただ、個人的にはテスト結果の解析ツールとしては、情報が少ないので、GA4との連携はおこなって相互でデータを見たほうが良いと思いました。

まとめ

以上がVWOを使用してABテストを行う方法と、実際に使用した際に良いと感じた部分です。

競合ツールとしてoptimizely・KARTE Blocks(KARTE)・AB Tastyなどが有ると思いますが、個人的にはビジュアルエディタが使いやすくていい感じでした。
まずは無料でABテストをやってみたい！ページの最適化を行いたいけど、リニューアルするには費用とリスクがかかるから、まずは無料で部分的に検証を行ってみたい。という方には最適なツールかもしれません。

VWOは本格的なABテスト機能を備えており、月間5万ユーザーまで無料で利用可能です。そのため、低コストでABテストを試みたい方に特におすすめできます。ぜひこのツールを使ってサイト改善に取り組んでみてください！



シナップではABテストツールの導入支援から運用代行、内製化支援まで幅広く取り扱っております。「ABテストのやり方を教えてほしい。」「ABテストツールの導入と使い方だけ教えてほしい。」「ABテストツールを導入してみたけどうまく活用できなかったから代わりに運用してほしい。」などお困り事がございましたら是非お気軽にお問い合わせください。