Web SDKでのページの上部および下部のイベントの設定
パーソナライズされた体験を提供するには、web ページの読み込み時間が不可欠です。 ユーザーがパーソナライズされたコンテンツを待つ時間を最小限に抑えるために、Web SDKではページイベントの上下の設定がサポートされています。
ページの上部および下部のイベントは、ページの読み込み時間を最小限に抑えながら、ページ内のさまざまな要素を非同期で読み込む方法を説明します。
- ページの先頭のイベントは、ページの読み込みが始まるとすぐにパーソナライゼーションを要求します。
- ページの読み込みが完了すると、ページの下部にページビューが記録されます。
Adobe Analyticsでは、ページトップのイベントが無視されます。これにより、1回のページヒットのみが記録されるため、より正確な指標の記録が可能になります(ページイベントの下部)。
Web SDK JavaScript ライブラリ (alloy())を直接呼び出すか、Adobe Experience Platform タグ UIでWeb SDK タグ拡張機能を使用することで、ページの上部および下部のイベントを設定できます。 タグ拡張機能のSend event アクションには、'Use guided events' (ページの上部)および'Request personalization' (ページの下部)シナリオのフィールド値を事前設定する'Collect analytics' オプションが含まれています。 以下の各例は、両方の実装を示しています。
ページトップイベント top-of-page
次の例では、パーソナライゼーションを要求するページ上部イベントを設定しますが、自動的にレンダリングされる提案に対して表示イベント を抑制します。 これらの表示イベントは、代わりにページ下部のイベントと共に送信されます。
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| パラメーター | 必須/オプション | 説明 |
type |
必須 | このパラメーターをdecisioning.propositionFetchに設定します。 この特別なイベントタイプは、Adobe Analyticsにこのイベントをドロップするように指示します。 Customer Journey Analyticsを使用する場合は、これらのイベントをドロップするフィルターを設定することもできます。 詳しくは、Adobe AnalyticsのEdge Network イベントタイプ を参照してください。 |
renderDecisions |
必須 | このパラメーターをtrueに設定します。 このパラメーターは、Web SDKに対して、Edge Networkから返される決定をレンダリングするように指示します。 |
personalization.sendDisplayEvent |
必須 | このパラメーターをfalseに設定します。 このパラメーターは、表示イベントの送信を停止します。 |
ページの上部で発生するルールでSend event アクションを設定します。 Use guided eventsを有効にし、Request personalizationを選択します。 このオプションは、'Type'を'Decisioning Proposition Fetch'にロックし、'Render visual personalization decisions'を有効にし、'Automatically send a display event'を無効にします。
代わりに、これらのフィールドを手動で設定するには、Use guided eventsを無効のままにして、各フィールドを自分で設定します。
ページボトムイベントの例 bottom-of-page
自動レンダリング提案 bottom-auto-rendered
次の例では、ページの最下部イベントを設定します。このイベントは、ページ上で自動的にレンダリングされたものの、 ページの最上部 イベントで抑制された提案に対して表示イベントを送信します。
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 | ||
|---|---|---|
| パラメーター | 必須/オプション | 説明 |
personalization.includeRenderedPropositions |
必須 | このパラメーターをtrueに設定します。 このパラメーターを使用すると、ページ上部のイベントで抑制された表示イベントを送信できます。 |
xdm |
オプション | このオブジェクトを使用すると、ページの下部のイベントに必要なすべてのデータを含めることができます。 |
ページの下部で発生するルールでSend event アクションを設定します。 Use guided eventsを有効にし、Collect analyticsを選択します。 このオプションは、'Include rendered propositions'を有効にするようにロックします。
代わりに、このフィールドを手動で設定するには、Use guided eventsを無効のままにし、Include rendered propositionsを直接有効にします。 オプションで、XDM フィールドに、ページデータを格納するXDM オブジェクト データ要素を入力します。
手動でレンダリングされた提案 bottom-manually-rendered
次の例では、ページ上で手動でレンダリングされた提案(カスタム決定範囲またはサーフェス)に対して表示イベントを送信するページ下部イベントを設定します。
| code language-js |
|---|
|
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| パラメーター | 必須/オプション | 説明 |
xdm._experience.decisioning.propositions |
必須 | このセクションでは、手動でレンダリングされた提案を定義します。 提案id、scopeおよびscopeDetailsを含める必要があります。 詳しくは、表示イベントの管理を参照してください。 手動でレンダリングされたパーソナライゼーションコンテンツは、ページイベントの下部に含める必要があります。 |
xdm._experience.decisioning.propositionEventType |
必須 | このパラメーターをdisplay: 1に設定します。 |
xdm |
オプション | このオブジェクトを使用すると、ページの下部のイベントに必要なすべてのデータを含めることができます。 |
'Use guided events' オプションはこのシナリオをカバーしていないので、アクションを手動で設定します:
-
XDM オブジェクト (または変数)データ要素を作成し、レンダリングされた各提案の
_experience.decisioning.propositions、idおよびscopeをscopeDetailsに入力し、_experience.decisioning.propositionEventType.displayを1に設定します。 詳しくは、表示イベントの管理を参照してください。 -
ページ ルールの下部のSend event アクションで、Use guided eventsを無効のままにして、XDM フィールドからデータ要素を参照します。
ページの上部および下部にイベントを表示するシングルページアプリケーション spa-example
シングルページアプリケーションでは、Web SDKがページの上部に正しいパーソナライゼーションをレンダリングし、ページの下部に正しいビューを記録するように、各ビューの変更時にビュー名を指定する必要があります。
最初のページビュー spa-first-view
この例では、homeは最初のページ読み込み時に読み込まれたビューです。
最上位の呼び出しは、Analytics ヒットを記録したり、表示イベントを起動したりすることなく、home ビューのパーソナライゼーションを要求します。 一番下の呼び出しは、ページビューを記録し、非表示の表示イベントを発生させます。 ビューが一貫して記録されるように、両方の呼び出しに同じviewNameを含めます。
| code language-js |
|---|
|
-
をビューの名前に設定するXDM オブジェクト
web.webPageDetails.viewNameデータ要素を作成します(例:home)。 -
ページ Send eventの先頭アクションを設定します:Use guided eventsを有効にし、Request personalizationを選択して、XDM フィールドのデータ要素を参照します。
-
ページ Send eventの下部アクションを設定します:Use guided eventsを有効にし、Collect analyticsを選択し、XDM フィールドで同じデータ要素を参照して、
viewNameが両方のイベントで一致するようにします。
2番目のページビュー – オプション 1 spa-second-view-option-1
この例では、ページのパーソナライゼーションが既に取得されているため、単一のイベントで十分です。
| code language-js |
|---|
|
-
を新しいビューの名前に設定するXDM オブジェクト
web.webPageDetails.viewNameデータ要素を作成します(例:cart)。 -
ビューの変更時に、単一のSend event アクションを設定します。Use guided eventsを無効のままにし、Render visual personalization decisionsを有効にし、XDM フィールドのデータ要素を参照します。
2番目のページビュー – オプション 2 spa-second-view-option-2
この方法は、ページイベントの下部を遅らせる必要がある場合(例えば、ビューの変更時にページの分析データが準備されていない場合)に使用します。 ビューの変更は、次の2つの手順で処理します。
- ページの上部で、Edge Network呼び出しを行うことなく、既に取得した提案をレンダリングします。
- 分析データの準備が整ったら、ページの下部のイベントを送信します。
ビューが一貫して記録されるように、両方の呼び出しに同じviewNameを含めます。
ページの上部にあるapplyPropositionsを呼び出して、新しいビューのキャッシュされた提案をレンダリングします。 次に、ページの下部にあるsendEventをincludeRenderedPropositions: trueと呼び出して、非表示の表示イベントが発生するようにします。
| code language-js |
|---|
|
-
を新しいビューの名前に設定するXDM オブジェクト
web.webPageDetails.viewNameデータ要素を作成します(例:cart)。 -
ページの上部イベントの場合は、Apply propositions アクションを設定し、View name フィールドをビューの名前に設定します(例:
cart)。 このアクションは、Edge Networkに連絡することなく、既に取得された提案をレンダリングします。 -
ページイベントの下部で、Send event アクションを設定します。Use guided eventsを有効にし、Collect analyticsを選択して、XDM フィールドのデータ要素を参照します。
GitHub サンプル github-sample
alloy-samples リポジトリ のtop-and-bottom サンプルは、ページの上部でパーソナライゼーションをリクエストし、下部で分析指標を送信する方法を示しています。 サンプルをダウンロードしてローカルで実行し、ページの上部と下部のイベントがどのように機能するかを確認します。 サンプルでは、JavaScript ライブラリを直接使用します。Web SDK タグ拡張機能で同等のルールを設定する場合も同じパターンが適用されます。