シングルページアプリケーション（SPA）でA/Bテストを実行するためのベストプラクティス

この記事は、シングルページアプリケーションシリーズのA/Bテストのパート2です。

第1部では、シングルページアプリケーション（SPA）の概念を紹介し、その人気が高まっている理由を示し、シングルページアプリで使用できる最高のA/Bテストプラットフォームの10を紹介しました。

ただし、SPAでA / Bテストを実行することは、SPAが機能する方法のために少し注意が必要な場合があります。 この記事では、SPAで実験を実行する方法と、従うべきいくつかのベストプラクティスについて実践的なアドバイスを提供します。

SPAフレームワークの進化

SPAは新しい概念ではありません。

2002年の特許には、SPAの最新バージョンに類似したテクノロジーが記載されています。

ただし、2006年からネットワーク標準として使用されているAJAX技術により、実装が容易になりました。 これは、さまざまなクライアント側テクノロジを使用して非同期Webアプリケーションを作成するための一連の戦略です。 ソフトウェアは、AJAXのおかげで、ページの現在の状態やコンテンツの表示モードを変更することなく、ユーザーエクスペリエンスを妨げることなく、バックグラウンドでサーバーとデータを送受信できます。

一方、AJAXの導入は、SPAの採用における分水嶺の瞬間ではありませんでした。

SPAの人気の高まりは、フロントエンドの急速な成長と近年のUXの関連性の高まりに後押しされた、より大きなトレンドの一部です。

SPAは、最初にJavaアプレットまたはFlashプログラム、および「純粋な」JavaScriptまたはjQueryライブラリを使用して作成されました。

ただし、Angular.js、React.js、Vue.jsなどのフロントエンドフレームワーク（これらはすべて比較的新しいJavaScriptフレームワーク）が開発を支援しています。

SPAアーキテクチャの背後にあるテクノロジーは何ですか？

SPAは基本的に、HTML5とCSS3をサポートするJavaScriptフレームワークです。

ただし、これらのコンポーネントを使用すると、いくつかの異なるライブラリとフレームワークが出現し、開発の世界で採用されました。

1.角度

Googleによって開発されたAngularは、3つのフレームワークの中で最も成熟していて最も古いものであり、使用する詳細なドキュメントがありますが、学習曲線は急です。

オリジナルのModelViewController（MVC）アーキテクチャが組み込まれていますが、ほとんどの場合、複数の開発者が同じアプリセクションで別々に作業できるMVVM（Model-View-ViewModel）を使用しています。 新しいバージョンへの更新にはいくつかの移行の問題がある可能性がありますが、Angularはスケールアップ時に最も信頼性が高く、大規模で複雑なプロジェクトに最適です。

TypeScriptのおかげで、Angularは開発者の大規模なチームにとって素晴らしい選択であり、一部の企業はすでに他の製品でこのテクノロジーを採用しています。

GitHubでは、これは確立された成熟したフレームワークであり、多数の貢献者がいます。

GoogleとGoogleドライブやGmailなどの製品、およびWixは、AngularforSPAのユーザーの1つです。

2. React.js

ReactはFacebookによって開発され、オープンソースになりました。 これは主にユーザーインターフェイス（Facebook、WhatsApp、Instagram）の作成に使用されました。

コードサイズが軽量で、他のフレームワークとシームレスに統合できるため、非常に人気があります。 また、バージョン間を移行するための簡単な方法もあります。 （通常、ワンクリック移行）。

これは、アプリケーションコンポーネントの状態を管理するためにReduxと組み合わせて頻繁に使用されます。 Uberは、製品にReact.jsテクノロジーも利用しています。

Reactは、JavaScriptフロントエンドフレームワークを使い始めたばかりの人だけでなく、新興企業やアジャイル開発者にも最適です。 さらに、このJavaScriptライブラリは、他のさまざまなフレームワークやテクノロジーとの貴重な統合オプションを提供します。これは、大規模な環境でプロジェクトを処理する場合に非常に役立ちます。 すべてのSPAフレームワークの中で、ReactはGitHubに最も貢献しており、開発者が潜在的な問題のトラブルシューティングを行うのに役立ちます。

3つのフレームワークの中で最も簡単な学習曲線があり、多くのスケーラビリティを必要とする期限の短いプロジェクトに最適です。

3. Vue.js

Vue.jsは、FacebookやGoogleなどの大手企業が所有しているわけではありませんが、特にアジアでは、依然として新規ユーザーのペースを上げています。 これは、上記のSPAフレームワークの最新のものであり、Googleの元従業員であるEvanYouによって2014年に設立されました。 多くのドキュメントは通常中国語ですが、トレーニングソースはまだあります。

フレームワークは非常に軽量で、高性能アプリケーションを簡単に作成するために使用できます。

ほとんどの開発者にとって、これらのフレームワークのいずれかで作成することに大きな問題はありません。決定は、実際にはそれぞれの主要な機能に帰着します。

Vue.jsは現在、Baidu、GitLab、Alibabaなどの企業でニーズに応じて使用されています。

シングルページアプリのしくみ

SPAの設計は単純です。 クライアント側とサーバー側の両方のレンダリングテクノロジが使用されます。

非SPAWebサイトでは、ブラウザーにURLを入力すると、ブラウザーはサーバーに要求を送信し、それに応じてHTMLページを受信します。

SPA Webサイトでは、サーバーは最初のリクエストでHTMLドキュメントを配信し、後続のリクエストでJSONデータのみを配信します。 これは、SPAがWebサイト全体をリロードするのではなく、現在のページのコンテンツを書き換えることを示しています。

一言で言えば、SPAは次のように機能します。

1. クライアントは最初にサーバーとの接続を確立し、ページコンテンツを取得します。これは、主にHTMLコード、CSS、およびアプリケーションロジックの実行に必要なすべてのスクリプトを含むJavaScriptバンドルで構成されます。
2. ユーザーのアクションにより、関連するJavaScriptの実行がアクティブ化され、JavaScriptがサーバーにAJAXリクエストを送信します。 データは通常JSON形式であり、Webページを完全に更新する必要はありません。

ブラウザが完全に新しいページを起動する通常の手法の代わりに、シングルページアプリケーションは、既存のWebページをWebサーバーからの新しいデータで強制的に変更することによってユーザーと対話します。 ブラウザは、必要なHTML、JavaScript、CSSコード、またはその他の適切なリソースを取得し、必要に応じてそれらをページに追加します。

HTML5履歴APIまたはロケーションハッシュを使用して、Webアプリケーション内のさまざまな論理ページのナビゲート可能性と認識を提供できますが、ページは手順中にいつでも再ロードされず、制御を別のページに移しません。

シングルページアプリケーションの動作例をご覧になりたい場合は、このリンクにアクセスして、メインページ、最新のコースのリスト、およびトップメニューをクリックしてください。 これを行うと、ページが完全にリロードされないことに気付くでしょう。ユーザーがアプリケーション内を移動すると、新しいデータのみがネットワーク経由で送信されます。

これはSPAの例です。

SPAは誰に最も適していますか？

SPAの利点により、SPAは現在多くの状況で推奨されるソリューションです。

彼らは、パフォーマンスと快適なユーザーエクスペリエンスがコンテンツよりも重要である、さまざまなWebテクノロジーを含むプロジェクトで優れています。

SPAを使用する多くの大手企業があります。 Facebook、Gmail、Googleマップ、Netflix、およびPaypalは、このタイプのテクノロジーの最も顕著な例の一部です（以下を参照）。

SPAでA/Bテストが難しいのはなぜですか？

3つのフレームワーク（React.js、Angular.js、Vue.js）はすべて、より優れたユーザーエクスペリエンスとより高いコンバージョン率を生み出す洗練されたユーザーインターフェイスの開発を可能にするため、JavaScript開発者の間で非常に人気があります。

それらは開発者にとって非常に望ましいものです。

• ページを更新する必要はありません
• ページの読み込み速度が速い
• 相互作用は豊かで流動的です
• データ転送が削減されます
• 再利用可能な部品により、開発が迅速化されます
• 開発者コミュニティは確立されています

また、新しいSPAを開始する人にとっても頼りになるリソースです。

ただし、大きな欠点が1つあります。これらのフレームワークがどのように機能するかにより、クライアント側のA/Bテストツールが適切に機能するのに苦労します。

誰かがSPAでWebページを閲覧しても、URLを含むページは更新されません。 ページのステータスは、ユーザーの操作ごとに異なります（たとえば、画面に表示されるさまざまな要素）。

A / Bテストツールは通常、最初のページの読み込み中に1回だけ調整を行うため、これらの後続の相互作用は考慮されません。

一般的なシナリオは次の2つです。

1. SPAでページビューが有効になっている場合、誰かがURLにアクセスするとページビューが表示されますが、ページビューが有効になっている別のページを閲覧した場合は2番目のページビューは表示されません。 これは、マテリアルが新しいページではなく現在のページに読み込まれているためです。
2. イベントを特定のURLに制限しようとすると、同じ問題が発生します。 A / Bテストツールは、ユーザーが別のページにいると思っていても、最初にロードされたのと同じページにとどまると「信じる」でしょう。 ピースはサイトに出入りするため、クリックやその他のイベントの監視が困難になる場合があります。

エクスペリエンスをレンダリングするために、クライアント側のA/Bテストソフトウェアとパーソナライズプラットフォームは完全なページの読み込みに依存しています。

React、Angular、VueなどのSPAフレームワークを使用する場合、この概念は存在しないため、新しいコンテンツがページに追加されたか、既存のコンテンツのステータスが変更されたか、さらに重要なことに、カスタマイズされたコンテンツをいつ挿入するかを判断することはより困難になります。

したがって、A / Bテストツールは、訪問者が製品リスト、詳細、またはカートページに到達したかどうか、どの時点で新鮮な材料を提供する必要があるかなど、訪問者のコンテキストを認識できる必要があります。

つまり、技術チームは、モジュール化されたReactSPAまたはAngularSPAコンポーネントの変更を常に把握し、それらのコンポーネントに影響を与えるエクスペリエンスをリアルタイムで更新する必要があります。

たとえば、React.jsでユーザーが操作するたびに、1つ以上のUI要素が更新され、A/Bテストソリューションによって行われた変更がすべて削除されます。

SPAでのクライアント側テストとサーバー側テスト

SPAでのA/Bテストに関しては、次の2つのオプションがあります。

1. テストするアプリケーションのさまざまな「状態」を分離し、各「状態」が表示されたときにAPIが呼び出されて適切な変更が行われるように設定します。 これは条件付きアクティベーションと呼ばれ、クライアント側で実行されます。

「状態」の例としては、サブスクリプションフォームの表示、検索結果のリストの読み込みなどがあります。

2. サーバー側での変更のハードコーディング、または新しいエクスペリエンスごとのカスタム展開。

これらのオプションは両方とも、使用されているSPAフレームワークの影響を受けます。 ですから、ご想像のとおり、うまく機能し続けるには、技術チームとマーケターの間で多くの協力が必要です。

それでは、これらのオプションの両方を調べて、成功するためにチームが何をしなければならないかを見てみましょう。

クライアント側での条件付きアクティベーション

それでもSPAアプリケーションでクライアント側のテストを実行する必要がある場合は、回避策があります。

アプリケーションが目的の状態に達したときにのみテストスクリプトが実行されるようにするために、Web開発者は条件付きアクティベーションモードと呼ばれる機能を使用できます。

条件付きアクティベーションに慣れていない場合は、理解するのが簡単な概念です。

条件付きアクティブ化は、基本的に、ページの更新時にアクティブ化する標準的な方法以外の方法で、実験をアクティブ化するタイミングを定義する機能を提供します。

これは、JavaScriptを少し書くことで実現できます。 これを行うには2つの方法があります。

1.ポーリング機能

ポーリング機能は、条件付きアクティベーションを使用するための最も基本的な方法です。 この関数は、指定された要素が表示されるまで50ミリ秒ごとにページをスキャンします。これは、モーダル、div、またはページ全体の場合もあります。

要素が表示されたときに実験が始まります。

A / Bテストプラットフォームは、ポーリング関数で検索する要素に応じて変更できるJavaScriptを数行生成します。

関数がTRUEと評価されると、実験がアクティブになります。

2.コールバック関数

コールバック関数の実行はポーリング関数の実行と似ていますが、ある程度の柔軟性があります。

この関数を使用すると、必要なJavaScript条件を入力し、それがTRUEと評価された場合は、実験を開始できます。

ポーリング関数は常にページにpingを実行して、指定された要素が存在するかどうかを確認しますが、コールバック関数はより受動的であり、イベントハンドラーに依存します。

サーバー側のテスト

サーバー側のテストを実行する場合、ブラウザーレベルでの変更は行われません。 むしろ、実験のバリエーションパラメータ（「ユーザー1はバリエーションAを見る」）はサーバーレベルで決定され、サービスプロバイダーを介してJavaScriptアプリケーションに直接フックされるため、静的な境界を超えた、より複雑で動的なコンテンツのテストが容易になります。 Webサイトのユーザーインターフェイス。

たとえば、ほとんどがSPAであるソーシャルメディアアプリを考えてみましょう。 フロントエンドのクライアント側のテストを使用してこれらを試すことができますが、動的なコンテンツが含まれるため、はるかに複雑です。したがって、サーバー側のテストに切り替えると、プロセスがはるかに簡単になります。

SPAでのA/Bテストの例

遭遇する可能性のあるシングルページアプリケーションでのA/Bテストの実際のインスタンスは何ですか？

ランディングページの画像を変更する

特定のページにアクセスしたオーディエンスの50％に動的な画像を表示するには、SPAで実験を設定する必要があるとします。 この例で使用されているSPAフレームワークはReact.jsです。これは、ページが変更され、画像が定期的に置き換えられていることを意味します。

バリアント画像を表示すると、ちらつきの問題が発生する可能性があります。つまり、元の画像-バリアント画像-元の画像のシーケンスが観察されます。

この問題は、特定のランディングページが読み込まれたときにポーリングをトリガーすることで完全に回避できます。

CTAの下の追加コピーのテスト

Angular.jsで構築されたSPAサイトでの別の実験では、メインCTAの下にターゲットオーディエンスの30％に追加のコピー行を表示することが含まれる場合があります。

この例では、バージョンAはメインCTAの下に追加のコピー行を表示しますが、バージョンBは表示しません。 トラフィックの30％をバージョンAに送信し、70％をバージョンBに送信してから、結果を比較して、コンバージョン率に大きな違いがあるかどうかを確認します。

WebサイトはAngular.jsで構築されているため、要素は定期的に変更されます。 ここでのコールバックイベントは、バリアントへの変更を表示するのに役立ちます。

ギフト券の表示

この例では、ユーザーがプレミアムブランドの商品をバスケットに追加するときに、専用のギフト券を表示したいとします。 ユーザーがプレミアム商品をバスケットから取り出すと、バウチャーがページからスワイプされます。

1. ここで行う必要があるのは、ユーザーが必要なアクションを実行したときに、手動のアクティブ化イベントを送信する必要があるということです。 このイベントの結果として、実験がアクティブになります。
2. ユーザーがプレミアム製品をバスケットから取り出して実験を非アクティブ化すると、アクティブ化イベントが発生する必要があります。
3. 消費者がプレミアム製品を再度追加した場合にプレミアム製品を表示するには、実験を再アクティブ化する必要があります。

「今すぐ購入」CTAの下にタグラインを表示

[今すぐ購入]CTAボタンの下に一意のタグラインを表示する場合は、履歴の変更時にアクティブ化イベントを押すと、テストをアクティブ化できます。

これは、[今すぐ購入]CTAボタンを含むページが最初は読み込まれないためです。

ConvertがSPAでのテストの問題をどのように回避したか

SPAでの実験は、他の実験とは異なる方法で処理する必要があります。 Convertスクリプトは、Webサイトの訪問者がナビゲートしているURLを読み取ることができないため、標準的な方法でテストをトリガーすることはできません。

代わりに、これがどのように行われるかです。

この記事の説明に従って、Convertトラッキングコードをインストールすることから始めます。

次に、以下の3つの方法のいずれかを適用します。

1.ポーリングのトリガー

前述のように、ポーリングは、エクスペリエンス条件をテストして、そのエクスペリエンスをトリガーする必要があるかどうかを判断するプロセスです。

これには、訪問者のURL、オーディエンス条件、またはJavaScript条件を監視してテストを実行することが含まれます。

ポーリングは通常、新しいページが読み込まれたときにConvertによってトリガーされます。 SPAでは、通常、新しいページはWebアプリに読み込まれません。

その場合、ポーリングを開始するには次のコードが必要になります。

 window._conv_q = _conv_q || [];
window._conv_q.push（["run"、 "true"]）;

上記のコードをトリガーするために、SPAで最適なイベントを決定する必要があります。 [プロジェクト設定]>[グローバルプロジェクトJavaScript]セクションに追加する必要のあるサンプルコード。

 console.log（'SPA /グローバルプロジェクトJavascriptのコード変換が実行されました'）;
if（！window.globalExecutedTs）{
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = function（data）{
試す {
setTimeout（function（）{
oldPushState.apply（this、arguments）;を返します。
console.log（'pushstateからアクティブ化された変換'）;
window._conv_q = _conv_q || [];
window._conv_q.push（["run"、 "true"]）;
}、0）;
} catch（e）{
console.log（e）;
}
};
window.onpopstate = function（event）{
setTimeout（function（）{
console.log（'popstateからアクティブ化された変換'）;
window._conv_q = _conv_q || [];
window._conv_q.push（["run"、 "true"]）;
}、0）;
};
}

2.サイトエリアでJavaScript条件を使用する

ConvertスクリプトはSPAのURL変更を読み取ることができないため、実験をトリガーするには、URL一致条件の代わりにJavaScript条件を使用する必要があります。

次の記事でこれを行う方法の詳細な説明を見つけてください。

3.実験を手動でアクティブ化する

特定のフローが発生したことを確認した後、手動で実験をトリガーできます。 この方法を使用すると、コードを使用してポーリングをトリガーした後も、サイトエリアとオーディエンス条件がテストされます。 実験を手動でアクティブ化する方法の詳細については、この記事を確認してください。

上記の3つの方法を使用すると、SPAアプリで適切なタイミングでテストをトリガーできるはずです。

ConvertはSPAのちらつきのリスクを高めますか？

短い答え、いいえ。

すべてのSPAフレームワークは、Convertのアンチフリッカーテクノロジーと互換性があります。 Convertは、舞台裏でSmartInsert ^TMテクノロジーを活用して、動的なページのリロード中であっても、SPAの適切なタイミングで実験の変更が適用または再適用されるようにします。

ちらつきの影響に関するホワイトペーパーを読んで、ちらつきの影響と、それを絶対に避けなければならない理由を学ぶことをお勧めします。

シングルページアプリケーションサイトでのA/Bテストの一般的な問題

ご覧のとおり、SPAサイトでテストを実行する際に留意すべき点がいくつかあります。 使用するフレームワーク、ツールのテスト方法、およびトリガーイベントについて説明した後、主な問題は通常、ブラウザーに新しいページまたはビューが表示されたときにテスト要素が再読み込みされないことです。

これは、いくつかの原因で発生する可能性があります。

1.最初のページのビューには表示されるが、後続のビューには表示されないテストの変更

表示しようとしている変更は、ブラウザにロードした最初のページにのみ表示され、後続のビューには表示されない場合があります。 これは、サイトの新しいビューまたは「ページ」にアクセスするときに、実験を評価してアクティブ化するConvertスクリプトの部分が実行されないためです。

2.ビジュアルエディターに表示される変更は、外部でプレビューするときに表示されません

ビジュアルエディターで行った変更がエディタープレビューの外に表示されない場合があります。

ほとんどのSPAフレームワークはDOMAPIを使用せず、代わりに独自のメソッドを使用してページに変更をデプロイします。 これにより、SPAによって更新されたときにDOMが同期しなくなります。 これはReactとAngularで一般的であり、Jqueryコードで見つかったCSSセレクターが機能しなくなります。

3.変更は後続の「ビュー」に表示され続けます

このシナリオでは、実験の変更が正しい（ページ）ビューに表示されます。 ただし、新しい（ページ）ビューにアクセスしても、変更は消えません。 これは、SPAサイトでは、新しいページをリロードするときに変更が削除されないために発生します。

Convertスクリプトは、実験条件が、ポーリングが呼び出されたときに変更がデプロイされた後続のビューと一致しない場合に追加されたコードを削除します。 ただし、ページの実験コードを削除してもjqueryの変更が消えないため、これだけでは不十分です。

実験によってもたらされた変更を元に戻すコードを実行する必要があります。

あなたの番：SPAを最適化するときにこれらの間違いを避けてください

情報の処理方法と提供方法の進歩により、SPAがより一般的に受け入れられるようになる可能性がありますが、この新しいテクノロジーには、通常はより古典的な設定で機能する最適化および実験プラットフォームと統合する際に問題があることに注意することが重要です。

この記事で、SPAのさまざまなコンポーネントと、訪問者に、より速く、より直感的で、パーソナライズされたデジタルエクスペリエンスを提供するために、これらの障害を克服するためのいくつかのソリューションについて説明したことを願っています。

ただし、ソースコードを変更せずに、動的なカスタマイズのためにUIコンポーネントやページタイプの変更を検出する機能など、SPAをシームレスにサポートできるソリューションプロバイダーと連携することをお勧めします。 下のボックスのように。