在網頁SDK中設定頁面事件的頂端和底部

提供個人化體驗時,網頁的載入時間至關重要。 為了將使用者等待個人化內容的時間減至最少,Web SDK支援設定頁面事件的頂端和底部。

頁面事件的頂端和底部說明在頁面中非同步載入各種元素,同時保持頁面載入時間最小的方法:

  • 頁面事件頂端會在頁面開始載入時要求個人化。
  • 頁面事件底部會在頁面完成載入時記錄頁面檢視。

Adobe Analytics會忽略頁面事件的頂端,而由於僅記錄一個頁面點選(頁面事件的底部),因此可導致更精確的量度記錄。

您可以兩種方式設定頁面事件的頂端和底部:直接呼叫Web SDK JavaScript資料庫(alloy()),或在Adobe Experience Platform標籤UI中使用Web SDK標籤擴充功能。 標籤延伸的Send event動作包含'Use guided events'選項,可預先設定'Request personalization' (頁面頂端)和'Collect analytics' (頁面底部)案例的欄位值。 以下每個範例顯示兩個實施。

頁面頂端事件 top-of-page

以下範例設定要求個人化的頁面事件頂端,但針對自動轉譯的主張隱藏顯示事件。 這些顯示事件會改為連同頁面底部事件一併傳送。

JavaScript資料庫
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資料庫
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資料庫
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 必要 本節定義手動呈現的主張。 您必須包含主張idscopescopeDetails。 如需詳細資訊,請參閱管理顯示事件。 手動呈現的個人化內容必須包含在頁面事件底部。
xdm._experience.decisioning.propositionEventType 必要 將此引數設為display: 1
xdm 選填 使用此物件來包含您要用於頁面事件底部的所有資料。
Web SDK標籤延伸模組

'Use guided events'選項未涵蓋此案例,因此請手動設定動作:

  1. 建立XDM物件 (或變數)資料元素,該資料元素會以每個轉譯主張的_experience.decisioning.propositionsidscope填入scopeDetails,並將_experience.decisioning.propositionEventType.display設為1。 如需詳細資訊,請參閱管理顯示事件

  2. 在頁面規則底部的Send event動作中,保留​ Use guided events ​為停用狀態,並參照​ XDM ​欄位中的資料元素。

具有頁面事件頂端和底部的單頁應用程式 spa-example

在單頁應用程式中,您必須在每個檢視變更上指定檢視名稱,好讓Web SDK在頁面頂端呈現正確的個人化,並在頁面底部記錄正確的檢視。

第一頁檢視 spa-first-view

在此範例中,home是初始頁面載入時載入的檢視。

JavaScript資料庫

前幾個來電要求個人化home檢視,但不記錄Analytics點選或引發顯示事件。 底部呼叫會記錄頁面檢視,並引發抑制的顯示事件。 在兩次呼叫中包含相同的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在兩個事件中相符。

第二頁檢視 — 選項1 spa-second-view-option-1

在此範例中,單一事件便已足夠,因為已擷取頁面的個人化設定。

JavaScript資料庫
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 spa-second-view-option-2

當您需要延遲頁面事件的底部時(例如,當頁面的分析資料在檢視變更時尚未準備就緒時),請使用此方法。 分兩個步驟處理檢視變更:

  1. 在頁面頂端,轉譯已擷取的主張,而不需進行Edge Network呼叫。
  2. 分析資料準備就緒後,傳送頁面底部事件。

在兩次呼叫中包含相同的viewName,以便一致地記錄檢視。

JavaScript資料庫

在頁面頂端呼叫applyPropositions以轉譯新檢視的快取主張。 接著呼叫頁面底部的sendEvent (含includeRenderedPropositions: 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資料庫;當您在網頁SDK標籤擴充功能中設定對等規則時,同樣的模式適用。

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