在Web SDK中設定頁面事件的頂端和底部
建立對象：
- 開發人員
當您想要將個人化體驗提供給客戶時，網頁的載入時間至關重要。
為了最佳化載入時間並儘快提供個人化內容，Web SDK支援設定頁面事件的頂端和底部。
頁面事件的頂端和底部說明在頁面中非同步載入各種元素，同時保持頁面載入時間最短的方法。
此設定可讓使用者必須等候個人化內容載入的時間減到最少。
就量度準確度而言，Adobe Analytics可以忽略頁面頂端的事件，進而記錄更準確的量度，因為系統只會記錄一個頁面點選（頁面事件的底部）。
使用案例
一家運動服裝零售商想要為購物者提供個人化體驗，同時儘量減少使用者在造訪其網站時的摩擦，同時能夠準確收集訪客量度。
行銷團隊只要使用Web SDK中的頁面頂端和底部事件，就能以最有效的方式設定其個人化傳送：
- Web SDK會傳送個人化請求，並在頁面開始載入時立即載入。 這是頁面頂端事件。
- 當頁面完成載入時，會記錄頁面檢視事件。 這會在頁面載入程式的稍後階段發生。 這是頁面底部事件。
alloy("sendEvent", {
type: "decisioning.propositionFetch",
renderDecisions: true,
personalization: {
sendDisplayEvent: false
}
});
| 引數 | 必要/選用 | 說明 |
|---|---|---|
type | 必填 | 將此引數設為decisioning.propositionFetch。 此特殊事件型別會告知Adobe Analytics刪除此事件。 使用Customer Journey Analytics時，您也可以設定篩選器以放置這些事件。 |
renderDecisions | 必要 | 將此引數設為true。 此引數會告知Web SDK轉譯Edge Network傳回的決定。 |
personalization.sendDisplayEvent | 必要 | 將此引數設為false。 這會停止傳送顯示事件。 |
頁面底部事件範例
下列程式碼範例是頁面事件設定的底端，該設定會針對在頁面上自動轉譯，但於頁面🔗事件的頂端隱藏顯示事件的主張，傳送顯示事件。
NOTEalloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: { ... }
});
personalization.includeRenderedPropositionstrue。 如此可傳送已在頁面事件頂端隱藏的顯示事件。xdm以下程式碼範例示範頁面底部事件設定，該設定會針對頁面上手動轉譯的主張（亦即自訂決策範圍或表面）傳送顯示事件。
NOTEalloy("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
}
}
}
}
});
xdm._experience.decisioning.propositionsID、scope和scopeDetails。 請參閱有關如何手動轉譯個人化的檔案，以取得有關如何記錄手動轉譯內容之顯示事件的詳細資訊。 手動呈現的個人化內容必須包含在頁面點選的底部。xdm._experience.decisioning.propositionEventTypedisplay: 1。xdm具有頂端和底部頁面點選的單頁應用程式
下列範例包含新增必要的xdm.web.webPageDetails.viewName引數。 這就是讓它成為單頁應用程式的原因。 此範例中的viewName是在頁面載入時載入的檢視。
// 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.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "home"
}
}
}
});
在此範例中，不需要進行頁面分割的頂端/底部，因為已擷取頁面的個人化設定。
alloy("sendEvent", {
renderDecisions: true,
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
如果您還是需要延遲頁面點選的底部，您可以使用applyPropositions做為頁面點選的頂端。 由於不需要擷取個人化，也不需要記錄Analytics資料，因此不需要向Edge Network提出請求。
// 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.
// Note: You need to include the viewName in both top and bottom of page so that the
// correct view is rendered at the top of the page, and the correct view is recorded
// at the bottom of the page.
alloy("sendEvent", {
personalization: {
includeRenderedPropositions: true
},
xdm: {
...,
web: {
webPageDetails: {
viewName: "cart"
}
}
}
});
GitHub範例
在此位址找到的範例示範如何使用Experience Platform和Web SDK在頁面頂端要求個人化，並在底部傳送分析量度。 您可以下載範例並在本機執行，以瞭解頁面事件的頂端和底部如何運作。