シングルページアプリケーション（SPA）で実験を実行するときに、VWOが摩擦のない訪問者エクスペリエンスを作成する方法

動的なWebサイトに対するVWOのネイティブサポートにより、訪問者にシームレスなエクスペリエンスを構築する際の実験が容易になる方法を深く掘り下げます。

多くのWebサイトは、従来の静的Webサイトに比べて重要な利点がほとんどないため、シングルページアプリケーション（SPA）として構築されています。動的Webサイトは高速で、コンパクトで、応答性があります。 このようなWebサイトを使用すると、ユーザーに表示されるコンテンツを最適化して、魅力的でユニークなエクスペリエンスを作成できます。 開発チームから、WebサイトがReact、Vue、AngularJS、Ember、またはBackboneを使用して構築されていると聞いた場合は、おそらくSPAを使用しており、この記事はあなたに関連しています。

この記事では、VWOで、動的Webサイトでの実験を効果的かつ簡単にし、SPAテストのサポートを組み込んで、Webサイトエクスペリエンスの最適化の取り組みのみに集中できるようにする方法について説明します。

しかし、最初に、最初にここにあなたをもたらした問題について話しましょう。

動的Webサイトで実験を実行する際の課題

SPAでテストを実行しているときに、ランディングページに加えた変更はエンドユーザーには表示されないため、おそらくここにいます。 その結果、あなたはあなたが望むほど速くあなたのアイデアをテストして検証することができず、これはあなたを苛立たせます。

まず、SPAは従来のWebサイトとは異なることを理解しましょう。 誰かが従来のWebサイトにアクセスするたびに、Webページ全体が読み込まれます。 ただし、SPAでは、ページの一部のセクションのみが更新されます。 これは、SPAでは、Webページのルックアンドフィールを構築するHTML、CSS、スクリプトなどのリソースが1回だけロードされるためです。

ユーザーがWebページのさまざまな部分をどのように操作するかに基づいて、ページの特定のセクションに表示される内容は、ユーザーのアクションに応じて動的に変化します。 たとえば、ユーザーがボタンをクリックすると、ポップアップが開きます。 このポップアップは、パフォーマンスに影響を与えることなく、ユーザーの操作に従ってフレームワークによって行われる動的な変更です。 SPAに動的な変更があるその他の例は、次のとおりです。

• 詳細を表示するために展開できる検索結果リストのアイテム。
• フォームでは、訪問者がドロップダウンから事前定義された値を選択した場合にのみ、一部のフィールドがページに表示されます。
• Webサイトでは、カレンダーやカラーピッカーなど、ユーザーが使用するたびに再読み込みされるコンポーネントを使用しています。

これはユーザーエクスペリエンスには適していますが、Webページでこれらの動的要素（検索結果リスト、ドロップダウン、ウィジェット、ポップアップ、バナーなど）のいずれかに変更を加えたテストキャンペーンを実行することは困難になります。 これは、Webサイトで何かが動的に変更されるたびに、コンポーネントに加えられた変更を適用する必要があるためです。

このように考えてください-あなたはウェブページでテストを実行しています。 Webページが（ユーザーがページにアクセスして）ロードするか、ページが上記のように動的要素を作成するたびに、SPAフレームワークは元の状態を表示します（テストの一部として表示するバリエーションとは異なります）。

必要なのは、テストバリエーションが元のビューに置き換わり、ユーザーに見たいバリエーションが表示されるようにする実験プラットフォームです。 したがって、SPAでテストを設定している間（たとえば、ポップアップボックス内のコンテンツをテストしている場合）、テストコントロールとバリエーションは次のようになります。

ただし、SPAのサポートがない場合、バリエーションに加えられた変更は制御に戻り、両方が同じように見えます。 かなりこのように：

これは、起こっていることの単純化されたバージョンです。 画面の背後で何が起こっているかを技術的に理解することに興味がある場合は、先読みを続けてください。そうでない場合は、記事の次のセクションにスキップできます。

GatsbyJS、Next.js、ReactJSなどの一部のWebサイトフレームワークは、サーバー側のレンダリングを使用し、元のWebページのスナップショットをロード時に保存します。 したがって、テスト目的でページ上の要素を変更すると、フレームワークは変更を「問題」として検出し、保存されたスナップショットに表示される元の状態にページを戻します。 これにより、A/Bテストが妨げられます。

次に、React、Gatsby、Next.js、Vue.js、Angularなどの最新のフレームワークは、状態ベースのレンダリングの概念を使用しています。 たとえば、Reactでは、A / Bテストのバリエーションが原因でいずれかの状態に変更が実装されると、Webサイトのインターフェイスが自動的に元のフォームに再ロードされるため、ユーザーにはバリエーションが表示されません。 これにより、Webサイトの訪問者にとって最適ではないエクスペリエンスが作成されます。

VWOがシングルページアプリケーションの実験を簡単にする方法

問題について説明したので、解決策について話しましょう。 VWOテストの一部であるビジュアルエディターでのVWOの高度なネイティブSPAサポートにより、実験で行われた変更がSPAに適用され、キャンペーンの信頼性が確保され、訪問者に摩擦のないエクスペリエンスが提供されます。

1.Webサイトで動的要素をテストする

前のセクションで動的要素を定義しましたが、具体的な例を使用してそれらを詳しく見ていきましょう。 あなたがeコマースのウェブサイトを持っていると考えてください。 「カートページ」の「X」（閉じる）ボタンをクリックすると、アラートがポップアップとして表示されます。 ここで、アクションボックスでコピーの変更をテストして、アクション可能なメッセージと召喚状により、ユーザーがカートページを閉じないようにすることができるかどうかを確認します。 警告ボックスは、最初はWebサイトのコードには表示されませんが、訪問者が[X]（閉じる）ボタンをクリックすると、SPAフレームワークによって追加されます。 ここでは、テストを実行しているポップアップを開くボタンをターゲット要素と呼びます。

VWOは、テストする変更がロードされるとすぐにポップアップに適用されることを確認します。 ボタンをクリックするだけで設定を有効にすることができます。 この設定の詳細については、ナレッジベースの記事を参照してください。

VWOは、変更が正しく適用されていることをどのように確認しますか？

簡単。

VWOは、ページ要素（ビデオ、画像、表、セクションなど）に加えられた変更を、任意の時点で監視します。 したがって、ターゲット要素（上記の例では[閉じる]'X'ボタン）が読み込まれると、VWOはそれを検出し、バリエーションで行った変更を適用します。 これは、Webページがリロードされていない場合でも発生しますが、ユーザーはWebサイトのセクションを操作するだけです。

少し技術的になって、さらに詳しく見ていきましょう。 技術的な詳細が気に入らない場合は、これをスキップして次のポイントに進むことができます。

動的なWebサイトでは、ユーザーの行動に基づいて、要素が追加、削除、または変更されます。 DOMツリーは、すべてのWebサイトコンポーネント（ボタン、バナー、ポップアップ、ウィジェットなど）のリポジトリのようなものであり、Webサイトの現在の状態のスナップショットを保持します。

VWOのライブラリは、VWOがSPAのDOMツリーの変更を監視できるようにするブラウザインターフェイスであるMutationObserverを使用します。 これは、ページで追加、削除、または変更された新しい要素を検出するのに役立ちます。 このような場合、VWOは要素に変更を自動的に適用します。 したがって、要素が動的にロードされるたびに、変更は訪問者に表示される前に適用されます。 これにより、キャンペーンの信頼性が向上し、バリエーションの変更が完全に適用されます。

VWOは、フレームワークのレンダリングによって妨げられた変更をどのように管理しますか？

VWOは、フレームワークのレンダリングが完了するまで、CTAボタンを非表示のままにします。 VWOは、レンダリングが完了したかどうかを繰り返しチェックします。 フレームワークのレンダリングが完了すると、VWOキャンペーンの実行が開始されます。

これらの設定の詳細については、ナレッジベースの記事を参照してください。

2.Webサイト上の他のページ要素をテストします

ページが読み込まれると、最新のSPAフレームワークは、Webサイトが読み込まれるたびに、変更された要素を元の状態に戻します。 したがって、ページをテストしている場合、すべての変更は元に戻されます。 動的要素だけでなく、ページ上のすべての要素について、VWOは、SPAフレームワークを使用したテストの課題に取り組むために行った変更を追跡します。 これらの変更をWebページに適用している間、VWOはテストによってページに加えられたすべての変更（DOMノードの挿入、削除、および変更）を検出し、それらを再適用してユーザーエクスペリエンスの規則性を確保します。

VWOでこの改善を可能にするために、明示的なアクションは必要ありません。 これは、Webサイトが構築されているフレームワークに関係なく、ビジュアルエディターで構築されたすべてのVWOキャンペーンで使用できる組み込み機能です。

VWOビジュアルエディターが処理する変更のいくつかのユースケースの例を見てみましょう。

1. eコマースWebサイトからセカンダリCTAボタン（「ウィッシュリストに追加」など）を削除して、この変更がプライマリCTAのクリック数（「カートに追加」など）に影響するかどうかをテストするとします。 これは、Webサイト上の要素を削除するテストのユースケースです。 ボタンを削除しても、Reactなどのフレームワークによって作成された仮想DOMに保持され、Webサイトの読み込み時にエラーがスローされます。

2.ここで、eコマースWebサイトに、[今すぐ送信]ボタンのほかに訪問者の電子メールアドレスをキャプチャするためのテキスト入力ボックスを表示する登録フローがあると想像してください。 テキスト入力ボックスのルックアンドフィールを変更すると、それに関連付けられているWebサイトのスタイルコンポーネントが変更されます。 VWOのビジュアルエディターは、最新の適用された変更がユーザーに表示されるものであることを保証します。 SPAのフォームフィールドに変更を加える方法を確認し、バリエーションをサンプリングした訪問者が、コントロールではなく、それらの変更を確認できるようにします。

シングルページアプリケーションにVWOを使用するにはどうすればよいですか？

SPAにVWOを使用するには、WebサイトのヘッドセクションにVWO SmartCodeを追加するだけで、SPAWebサイトのデフォルトのサポートを利用できます。

このように簡単な統合で、すぐに始めることができます。 無料トライアルにサインアップするか、VWOの機能を調べるか、製品の専門家にデモをリクエストしてください。 また、最新のエキサイティングな製品アップデートについても学ぶことができます。