Nuxt.jsのアプリケーションにVWOのA/Bテストツールを導入する

サイト運営において、ユーザー体験の向上は欠かせない要素となっていますが、改善策を直感的に判断して実施するだけでは、その効果を正確に評価することは難しいと実感しています。

ユーザーの反応を正確に把握し、データに基づいた改善を行うためにも、A/Bテストを導入することにしました。

今回、VWO（Visual Website Optimizer）を利用してA/Bテストを実施する方法などについて説明します。

A/Bテストツールの導入でユーザー体験を向上させたい

運用しているサイトにおいて、改善する際にどうしても直感的に頼るところが出てきてしまい、改善した結果が本当に良い影響を与えているかどうかを確証できずにいました。

そこで、実際に改善した結果を元にユーザーフィードバックを収集できるA/Bテストを導入してみることにしました。

A/Bテストを導入することで、ユーザーが最も快適に感じるUI/UXやデザインを特定することができ、サイト全体の使いやすさやエンゲージメント率を高めることができます。

A/Bテストツールの導入にあたり、広く使われていたGoogleオプティマイズを利用しようとしましたが、調べてみると2023年9月30日をもって廃止されていました。

Googleがこれらのツールが顧客のニーズに対応できていないと判断したためのようで、より包括的なテスト機能を提供するために、Google Analytics 4に注力することを決定したようです。

そのため、別のA/Bテストツールを探し、今回はVWOのA/Bテストツールを導入しました。理由としては、無料で利用できること、使いやすいUIであること、A/Bテストの他にヒートマップやパーソナライゼーションなど利用できるため、選定しました。

実際に導入してみます。まずは以下からVWOのアカウントを作成します。

VWO offers a free plan for VWO Testing t…

vwo.com

ヘッダーの「Start Free Trial」からアカウント作成していきます。

メールアドレスを入力して、「StartNow」を押します。メールアドレスに確認用のメールが届いているので、そこのURLにアクセスし、必要な情報を埋めたら登録完了です。

アカウント登録が完了したら、自分のサイトにVWOのスクリプトを導入します。WordpressなどのCMSを利用している場合は、プラグインなどで導入できるみたいです。

今回はNuxt3のアプリケーションなので、HTMLコードを<head>の中に追加しました。正しく追加されると、緑枠のようにdetectedになります。

ダッシュボードからA/B Testsを選択します。右上の「Create」から新しいキャンペーンを作成します。

PagesからA/BテストしたいURLを入力します。URLのマッチパターンもいくつかあったり、除外したいページなども設定できます。

Variationタブでテストパターンを追加できます。また、Traffic spritでどのパターンにどのくらいの割合を流入させたいかの設定ができます。

テストパターンはEditから設定できます。GUIでテストパターンが作れるので、ノーコードでテスト設定ができます。

他にもMetricsでどの指標を基準にテストの成功を評価するかを指定したり、Audience and Trafficでどのユーザーにテストを表示するかや、トラフィックの何%にテストを適用するかを設定することができます。

最後に「Start test」のボタンを押したら、A/Bテストが開始されます。

ちなみにアプリケーションのレンダリング方法がSSGの場合、A/Bテスト導入したのにテストパターンが反映されないなど、うまくいかない場合があります。

SSGの場合事前にビルドして静的ファイルとして生成しているので、サーバーサイドでデータを書き換えることができないかと思います。

その場合は、plugins配下にvwo.client.tsのようなファイルを作成し、クライアントサイドでスクリプトを実行することになるかなと思います。

クライアントサイドで実行するので、オリジナルではないテストパターンの時は値やUIの更新などに少しラグが生じますが、一応導入することは可能です。

A/Bテストツールの導入で、特に、直感に頼るだけでは得られない具体的なデータに基づく改善が可能になりました。

VWOのA/Bテストの設定は直感的でわかりやすく、今のところすごく使いやすいと感じています。

これからもA/Bテストを活用して、データに基づく継続的な改善を行い、ユーザーにとって快適で使いやすいサイト作りを目指していきたいです。