Adobe Experience Platform Web SDK は、シングルページアプリケーション(SPA)など、次世代のクライアントサイドテクノロジーでパーソナライゼーションを実行するための機能を提供します。
従来の Web サイトは、「ページ間」ナビゲーションモデル(複数ページアプリケーション)で動作しました。複数ページアプリケーションとは、Web サイトのデザインを URL に緊密に結合し、ある Web ページから別の Web ページへのトランジションにページ読み込みが必要でした。
代わりに、シングルページアプリケーションなどの最新の Web アプリケーションでは、ブラウザー UI のレンダリングを迅速に使用するモデルを採用しています。これは、多くの場合、ページのリロードとは無関係です。 これらのエクスペリエンスは、スクロール、クリック、カーソル移動などの顧客のインタラクションによってトリガーされます。最新の Web の枠組みが進化するにつれて、パーソナライゼーションと実験をデプロイするためのページ読み込みなどの従来の汎用イベントは機能しなくなりました。
シングルページアプリケーションで Adobe Experience Platform Web SDK を使用するメリットを次に紹介します。
Adobe Target VEC for SPAは、ビューと呼ばれる概念を活用します。ビューとはビジュアル要素の論理的なグループで、全体でSPAエクスペリエンスを構成します。 したがって、単一ページアプリケーションは、ユーザーのインタラクションに基づいて、URL ではなくビュー間を移行すると考えられます。 通常、ビューはサイト全体またはサイト内のグループ化されたビジュアル要素を表せます。
ビューとは何かをさらに詳しく説明するために、次の例では、React で実装された架空のオンライン e コマースサイトを使用して、サンプルビューを調べます。
ホームサイトに移動した後、ヒーロー画像は、イースターセールと、サイトで利用可能な最新の製品を昇格します。 この場合、ビューはホーム画面全体に対して定義できます。 このビューは、単に「home」と呼ぶことができます。
顧客が販売している製品に興味を持つようになると、顧客は、 製品 リンク。 ホームサイトと同様、製品サイト全体をビューとして定義できます。このビューには、「products-all」という名前を付けることができます。
ビューはサイト全体またはサイト上の視覚要素のグループとして定義できるので、製品サイトに表示される 4 つの製品をグループ化し、ビューと見なすことができます。 このビューには、「products」という名前を付けることができます。
顧客が さらに読み込み ボタンをクリックしてサイト上の他の製品を参照する場合、web サイトの URL は変更されませんが、表示される製品の 2 行目のみを表すビューをここで作成できます。 ビュー名は「products-page-2」になります。
顧客がサイトでいくつかの製品を購入することを決定し、チェックアウト画面に進みます。チェックアウトサイトでは、通常配送または速達配送を選択できます。 ビューは、サイト上のビジュアル要素のグループにすることができるので、ビューは、配信設定に対して作成し、「配信設定」と呼ばれることができます。
ビューの概念は、これよりもはるかに長く拡張できます。 これらは、サイトで定義できるビューの例の一例です。
XDM ビューは、Adobe Targetで活用して、マーケターが Visual Experience Composer を介してSPAで A/B テストや XT テストを実行できるようにすることができます。 これには、1 回限りの開発者向けの設定を完了するために、次の手順を実行する必要があります。
パーソナライズするシングルページアプリケーション内のすべての XDM ビューを決定します。
XDM ビューを定義した後、AB または XT VEC アクティビティを配信するために、 sendEvent()
~と機能する renderDecisions
に設定 true
と、対応する XDM ビューをシングルページアプリケーションで表示します。 XDM ビューを渡す必要があります xdm.web.webPageDetails.viewName
. この手順を使用すると、マーケターは Visual Experience Composer を活用して、これらの XDM の A/B テストや XT テストを開始できます。
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName":"home"
}
}
}
});
最初の sendEvent()
を呼び出すと、エンドユーザーにレンダリングされる必要のあるすべての XDM ビューが取得され、キャッシュされます。 後続 sendEvent()
XDM ビューが渡された呼び出しは、キャッシュから読み取られ、サーバー呼び出しなしでレンダリングされます。
sendEvent()
関数の例この節では、 sendEvent()
関数を React で使用して、仮想的な e コマースSPAに対応させることができます。
マーケティングチームは、ホームページ全体で A/B テストを実行したいと考えています。
ホームサイト全体で A/B テストを実行するには、sendEvent()
は、home
に設定した XDM viewName
と共に呼び出す必要があります。
function onViewChange() {
var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash
viewName = viewName || 'home'; // view name cannot be empty
// Sanitize viewName to get rid of any trailing symbols derived from URL
if (viewName.startsWith('#') || viewName.startsWith('/')) {
viewName = viewName.substr(1);
}
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName":"home"
}
}
}
});
}
// react router v4
const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(onViewChange);
// react router v3
<Router history={hashHistory} onUpdate={onViewChange} >
マーケティングチームは、ユーザーがクリックした後に価格ラベルの色を赤に変更して、2 行目の製品をパーソナライズしたいと考えています さらに読み込み.
function onViewChange(viewName) {
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName": viewName
}
}
}
});
}
class Products extends Component {
render() {
return (
<button type="button" onClick={this.handleLoadMoreClicked}>Load more</button>
);
}
handleLoadMoreClicked() {
var page = this.state.page + 1; // assuming page number is derived from component's state
this.setState({page: page});
onViewChange('PRODUCTS-PAGE-' + page);
}
}
マーケティングチームは、A/B テストを実行して、次の場合にボタンの色を青から赤に変更するかどうかを確認したいと考えています。 速達配送 が選択されている場合は、コンバージョンが向上します(両方の配信オプションでボタンの色を青に保つのとは異なります)。
選択した配信設定に応じてサイトのコンテンツをパーソナライズするには、配信設定ごとにビューを作成します。 条件 通常の配信 が選択されている場合、ビューに「checkout-normal」という名前を付けることができます。 次の場合 速達配送 が選択されている場合、ビューに「checkout-express」という名前を付けることができます。
function onViewChange(viewName) {
alloy("sendEvent", {
"renderDecisions": true,
"xdm": {
"web": {
"webPageDetails": {
"viewName": viewName
}
}
}
});
}
class Checkout extends Component {
render() {
return (
<div onChange={this.onDeliveryPreferenceChanged}>
<label>
<input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
<span> Normal Delivery (7-10 business days)</span>
</label>
<label>
<input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
<span> Express Delivery* (2-3 business days)</span>
</label>
</div>
);
}
onDeliveryPreferenceChanged(evt) {
var selectedPreferenceValue = evt.target.value;
onViewChange(selectedPreferenceValue);
}
}
XDM ビューの定義と実装が完了したら、次の手順に従います。 sendEvent()
これらの XDM ビューが渡されると、VEC でこれらのビューを検出し、ユーザーが A/B アクティビティや XT アクティビティのアクションや変更を作成できるようになります。
変更パネルでは、特定のビュー用に作成されたアクションが取り込まれます。 ビューのすべてのアクションは、そのビューの下にグループ化されます。
アクションをクリックすると、このアクションが適用されるサイトの要素がハイライトされます。ビューの下に作成された各 VEC アクションには、次のアイコンがあります。 情報, 編集, 複製, 移動、および 削除. これらのアイコンの詳細については、次の表で説明します。
アイコン | 説明 |
---|---|
情報 | アクションの詳細を表示します。 |
編集 | アクションのプロパティを直接編集できます。 |
複製 | 変更パネルに存在する 1 つ以上のビュー、または VEC で参照および移動した 1 つ以上のビューにアクションを複製します。 アクションは、必ずしも変更パネルに存在する必要はありません。 注意: 複製操作をおこなった後、参照を使用して VEC のビューに移動し、複製されたアクションが有効な操作かどうかを確認する必要があります。 アクションがビューに適用できない場合、エラーが表示されます。 |
移動 | 変更パネルに既に存在するページの読み込みイベントまたはその他のビューにアクションを移動します。 ページ読み込みイベント: ページの読み込みイベントに対応するアクションは、Web アプリケーションの最初のページ読み込みに適用されます。 注意: 移動操作をおこなった後、参照を使用して VEC のビューに移動し、移動が有効な操作かどうかを確認する必要があります。 アクションがビューに適用できない場合、エラーが表示されます。 |
削除 | アクションを削除します。 |
この節では、Visual Experience Composer を使用して A/B アクティビティや XT アクティビティのアクションや変更を作成する 3 つの例の概要を説明します。
このドキュメントでは、ホームサイト全体に対して「home」という名前のビューが定義されていました。 マーケティングチームは、次の方法で「home」ビューを更新します。
VEC でこれらの更新をおこなうには、 作成 変更を「ホーム」ビューに適用します。
「products-page-2」表示の場合、マーケティングチームは 価格 ラベル 販売価格 ラベルの色を赤に変更します。
VEC でこれらの更新をおこなうには、次の手順が必要です。
ビューは、状態やラジオボタンのオプションなど、詳細なレベルで定義できます。 このドキュメントでは、配信設定の「チェックアウト — 通常」と「チェックアウト — 速達配送」に対してビューが定義されていました。 マーケティングチームが「チェックアウト時に速達配送を選択」ビューのボタンの色を赤に変更したいと考えています。
VEC でこれらの更新をおこなうには、次の手順が必要です。
「checkout-express」ビューは、 速達配送 ラジオボタンが選択されている。 これは、 sendEvent()
関数は、 速達配送 ラジオボタンが選択されているので、VEC はラジオボタンが選択されるまで「checkout-express」表示を認識しません。