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

次の例では、パーソナライゼーションを要求するページ上部イベントを設定しますが、自動的にレンダリングされる提案に対して表示イベント ​を抑制します。 これらの表示イベントは、代わりにページ下部のイベントと共に送信されます。

JavaScript library
code language-js
alloy("sendEvent", {
  type: "decisioning.propositionFetch",
  renderDecisions: true,
  personalization: {
    sendDisplayEvent: false
  }
});
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に設定します。 このパラメーターは、表示イベントの送信を停止します。
Web SDK タグ拡張機能

ページの上部で発生するルールで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

次の例では、ページの最下部イベントを設定します。このイベントは、ページ上で自動的にレンダリングされたものの、​ ページの最上部 イベントで抑制された提案に対して表示イベントを送信します。

JavaScript library
code language-js
alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});
table 0-row-3 1-row-3 2-row-3
パラメーター 必須/オプション 説明
personalization.includeRenderedPropositions 必須 このパラメーターをtrueに設定します。 このパラメーターを使用すると、ページ上部のイベントで抑制された表示イベントを送信できます。
xdm オプション このオブジェクトを使用すると、ページの下部のイベントに必要なすべてのデータを含めることができます。
Web SDK タグ拡張機能

ページの下部で発生するルールでSend event アクションを設定します。 Use guided events​を有効にし、Collect analytics​を選択します。 このオプションは、'Include rendered propositions'を有効にするようにロックします。

代わりに、このフィールドを手動で設定するには、Use guided events​を無効のままにし、Include rendered propositions​を直接有効にします。 オプションで、XDM フィールドに、ページデータを格納するXDM オブジェクト ​ データ要素を入力します。

手動でレンダリングされた提案 bottom-manually-rendered

次の例では、ページ上で手動でレンダリングされた提案(カスタム決定範囲またはサーフェス)に対して表示イベントを送信するページ下部イベントを設定します。

NOTE
このシナリオでは、ページの下部のイベントは、ページの上部のイベントが完了するまで待つ必要があります。これにより、提案をレンダリングして記録できます。
JavaScript library
code language-js
alloy("sendEvent", {
  xdm: {
    ... // Optional bottom of page event data
    _experience: {
      decisioning: {
        propositions: propositions.map(function(p) {
          return {
            id: p.id,
            scope: p.scope,
            scopeDetails: p.scopeDetails
          };
        }),
        propositionEventType: {
          display: 1
        }
      }
    }
  }
});
table 0-row-3 1-row-3 2-row-3 3-row-3
パラメーター 必須/オプション 説明
xdm._experience.decisioning.propositions 必須 このセクションでは、手動でレンダリングされた提案を定義します。 提案idscopeおよびscopeDetailsを含める必要があります。 詳しくは、表示イベントの管理を参照してください。 手動でレンダリングされたパーソナライゼーションコンテンツは、ページイベントの下部に含める必要があります。
xdm._experience.decisioning.propositionEventType 必須 このパラメーターをdisplay: 1に設定します。
xdm オプション このオブジェクトを使用すると、ページの下部のイベントに必要なすべてのデータを含めることができます。
Web SDK タグ拡張機能

'Use guided events' オプションはこのシナリオをカバーしていないので、アクションを手動で設定します:

  1. XDM オブジェクト ​ (または変数)データ要素を作成し、レンダリングされた各提案の_experience.decisioning.propositionsidおよびscopescopeDetailsに入力し、_experience.decisioning.propositionEventType.display1に設定します。 詳しくは、表示イベントの管理を参照してください。

  2. ページ ルールの下部のSend event アクションで、Use guided events​を無効のままにして、XDM フィールドからデータ要素を参照します。

ページの上部および下部にイベントを表示するシングルページアプリケーション spa-example

シングルページアプリケーションでは、Web SDKがページの上部に正しいパーソナライゼーションをレンダリングし、ページの下部に正しいビューを記録するように、各ビューの変更時にビュー名を指定する必要があります。

最初のページビュー spa-first-view

この例では、homeは最初のページ読み込み時に読み込まれたビューです。

JavaScript library

最上位の呼び出しは、Analytics ヒットを記録したり、表示イベントを起動したりすることなく、home ビューのパーソナライゼーションを要求します。 一番下の呼び出しは、ページビューを記録し、非表示の表示イベントを発生させます。 ビューが一貫して記録されるように、両方の呼び出しに同じviewNameを含めます。

code language-js
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
    type: "decisioning.propositionFetch",
    renderDecisions: true,
    personalization: {
        sendDisplayEvent: false
    },
    xdm: {
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
Web SDK タグ拡張機能
  1. をビューの名前に設定するXDM オブジェクト web.webPageDetails.viewName データ要素を作成します(例:home)。

  2. ページ Send eventの先頭アクションを設定します:Use guided events​を有効にし、Request personalization​を選択して、XDM フィールドのデータ要素を参照します。

  3. ページ Send event​の下部アクションを設定します:Use guided events​を有効にし、Collect analytics​を選択し、XDM フィールドで同じデータ要素を参照して、viewNameが両方のイベントで一致するようにします。

2番目のページビュー – オプション 1 spa-second-view-option-1

この例では、ページのパーソナライゼーションが既に取得されているため、単一のイベントで十分です。

JavaScript library
code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
Web SDK タグ拡張機能
  1. を新しいビューの名前に設定するXDM オブジェクト web.webPageDetails.viewName データ要素を作成します(例:cart)。

  2. ビューの変更時に、単一のSend event アクションを設定します。Use guided events​を無効のままにし、Render visual personalization decisions​を有効にし、XDM フィールドのデータ要素を参照します。

2番目のページビュー – オプション 2 spa-second-view-option-2

この方法は、ページイベントの下部を遅らせる必要がある場合(例えば、ビューの変更時にページの分析データが準備されていない場合)に使用します。 ビューの変更は、次の2つの手順で処理します。

  1. ページの上部で、Edge Network呼び出しを行うことなく、既に取得した提案をレンダリングします。
  2. 分析データの準備が整ったら、ページの下部のイベントを送信します。

ビューが一貫して記録されるように、両方の呼び出しに同じviewNameを含めます。

JavaScript library

ページの上部にあるapplyPropositionsを呼び出して、新しいビューのキャッシュされた提案をレンダリングします。 次に、ページの下部にあるsendEventincludeRenderedPropositions: trueと呼び出して、非表示の表示イベントが発生するようにします。

code language-js
// Top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
    viewName: "cart"
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});
Web SDK タグ拡張機能
  1. を新しいビューの名前に設定するXDM オブジェクト web.webPageDetails.viewName データ要素を作成します(例:cart)。

  2. ページの上部イベントの場合は、Apply propositions アクションを設定し、View name フィールドをビューの名前に設定します(例:cart)。 このアクションは、Edge Networkに連絡することなく、既に取得された提案をレンダリングします。

  3. ページイベントの下部で、Send event アクションを設定します。Use guided events​を有効にし、Collect analytics​を選択して、XDM フィールドのデータ要素を参照します。

GitHub サンプル github-sample

alloy-samples リポジトリ top-and-bottom サンプルは、ページの上部でパーソナライゼーションをリクエストし、下部で分析指標を送信する方法を示しています。 サンプルをダウンロードしてローカルで実行し、ページの上部と下部のイベントがどのように機能するかを確認します。 サンプルでは、JavaScript ライブラリを直接使用します。Web SDK タグ拡張機能で同等のルールを設定する場合も同じパターンが適用されます。

recommendation-more-help
1ae86b30-e55e-49c1-ab11-9d0356a5f3e1