Adobe Targetを使用したシングルページアプリケーションのA/Bテスト

02-21-2025

シングルページアプリケーション（SPA）は、従来のマルチページwebサイトよりもパフォーマンスを向上させ、シームレスなユーザーエクスペリエンスを実現することで、web開発に革命をもたらしています。しかし、適切なガイダンスがなければ、SPAでA/Bテストの実装が難しくなる可能性があります。この記事では、React、Vue、Angular、Emberなどの主要なSPAフレームワークをまたいで、Adobe Targetの統合を成功させるための重要な概念と、実践的な戦略を解説します。

Angular、React、Vueのロゴ

ビューとフレームワークのライフサイクルイベント

過去10年間にわたり、アドビは様々なSPAフレームワークをまたいでAdobe Targetを実装してきました。フレームワークのライフサイクルイベントを理解することが、統合を成功させるための鍵となります。

従来のwebサイトとは異なり、SPAでは、訪問者は単一ページにとどまり、コンテンツをナビゲートするたびにビュー（仮想ページ）とURLが更新されます。そのため、Adobe Targetを含むあらゆるサードパーティサービス統合において、ビューは重要な役割を担います。

従来のページライフサイクルとSPAライフサイクルのクライアントサーバーモデルの比較

スムーズなパーソナライゼーションを実現するには、ビューの概念とフレームワークのライフサイクルイベントを結び付ける必要があります。これにより、パーソナライズされたコンテンツを絶妙なタイミングで適用できます。例えば、Reactでは、componentDidMount イベントがビューの開始を通知します。一方、Angularでは、ngOnInit メソッドが同様の役割を担います。Angularの NavigationEnd など、Routerのライフサイクルイベントも活用できます。これにより、パーソナライゼーションを適用する前に、新しいビューとURLを確実に更新できます。

ReactのcomponentDidMountイベントとcomponentDidUpdateイベントの図表 Angularイベントとナビゲーションの図表

パーソナライズされたコンテンツ配信におけるフリッカーを最小化

SPAパーソナライゼーションの課題の1つは、デフォルトコンテンツがテストコンテンツに置き換えられることによって発生するフリッカーを回避することです。そのためには、パーソナライズされたコンテンツを各ビュー内で迅速に表示する必要があります。SPAのあらゆる新しいビューは、関連するパーソナライズされたコンテンツのリクエストをトリガーし、シームレスなユーザーエクスペリエンスを実現する必要があります。

データレイヤーの活用

データレイヤーは、効果的なデータ管理に不可欠な要素です。分析やパーソナライゼーションの精度とスケーラビリティを確保できます。Web標準として、ページや訪問者などの情報をサードパーティサービスと共有するための、構造化されたJavaScriptオブジェクトを提供します。

Adobe Targetでは、最適なパーソナライゼーションを実現するために、リクエストを送信する前にデータレイヤーの値を初期化してから設定することが重要です。Adobe Web SDKのonBeforeEventSendイベントを使用すると、リクエストを行う前にデータレイヤーの値を動的に更新できます。

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
"page": {"title": "はじめに"
}
});

コンテンツの先行取得により、パーソナライゼーションを高速化

Adobe Experience Platformサービスは、SPA統合を簡素化するために、新しいイノベーションを導入します。Adobe Web SDKを使用して、最初のパーソナライゼーションのリクエストを実行すると、sendEventコマンドを使用して、最初のページの読み込み時にコンテンツを先行取得し、ローカルにキャッシュします。後続のビューでは、一意のビュー名を指定した sendEvent コマンドを使用して、このキャッシュからパーソナライズされたコンテンツを表示できます。このアプローチにより、ネットワーク呼び出しが最小限に抑えられ、表示イベントが自動的にトリガーされるため、コンテンツの配信を高速化できます。

Adobe TargetのEdgeナビゲーションモデル

仮想ドキュメントオブジェクトモデル（DOM）の課題に対応

Reactなどのフレームワークは、パフォーマンスのために仮想DOMを使用しますが、これによりDOMベースのパーソナライゼーションが複雑になる可能性があります。例えば、ブラウザーのDOMにパーソナライズされたコンテンツを適用すると、仮想DOMが再レンダリングされる際に上書きされる可能性があります。

この問題に対処するために、重複した表示イベントを回避し、再レンダリング後にパーソナライズされたコンテンツを再適用して、正確なレポートを作成できるようにします。Web SDKは、このプロセスを簡単に管理できるようにするために、applyPropositionsコマンドを提供します。

alloy("applyPropositions",{
"propositions": [],
"metadata": {},
"viewName": ""
});

DOMを使用しない場合は、機能フラグテストを使用して、事前に構築されたエクスペリエンスを動的に管理できます。これにより、フラグ形式でコンテンツを取得し、表示するビジュアル要素をアプリに通知できるようになります。場合によっては、SPAアーキテクチャにもとづいて、サーバーサイドのアプローチを検討する必要があります。アドビのテクノロジーコンサルタントは、最適なソリューションの選定をサポートします。

SPAでのAdobe Target統合に関するベストプラクティス

ビューの開始を検出： ライフサイクルイベントを使用して、新しいビューの開始時期を識別します。
データレイヤーの更新： パーソナライゼーションリクエストをAdobe Targetに送信する前に、新しいビューのデータレイヤー値の更新が完了していることを確認します。
フリッカーの最小化： フリッカーのリスクを低減するために、Adobe Targetから先行取得したパーソナライズされたコンテンツを迅速に適用します。
動的コンテンツの処理： ビューが動的に再レンダリングされる場合は、パーソナライズされたコンテンツを適用します。

SPAでAdobe Targetの活用を始める

SPAにAdobe Targetを実装するには、ビューベースのライフサイクルイベント、データレイヤーの効果的な使用、動的コンテンツのレンダリングを処理する戦略を明確に理解する必要があります。ここで解説したベストプラクティスに従うことで、フリッカーのないスムーズでパーソナライズされたエクスペリエンスをSPAユーザーに提供し、優れたパフォーマンスや関連性を実現できます。