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