文件Journey OptimizerJourney Optimizer 指南

程式碼型實作方法範例 implementation-samples

Last update: Fri Oct 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 經驗豐富
  • 開發人員

程式碼型體驗支援任何型別的客戶實施。 您可以在此頁面找到每種實作方法的範例：

IMPORTANT
依照此連結尋找不同個人化和實驗使用案例的實施範例。 請檢視並執行這些報表，以更加瞭解所需的實作步驟，以及端對端個人化流程的運作方式。

使用者端實施 client-side-implementation

如果您是使用者端實作，則可以使用其中一個AEP使用者端SDK：AEP Web SDK或AEP Mobile SDK。

  • 步驟如下說明在範例​ Web SDK ​實作中，擷取程式碼式體驗歷程和行銷活動在Edge上發佈的內容並顯示個人化內容的程式。

  • 在本教學課程中說明使用​ Mobile SDK ​實作程式碼式頻道的步驟。

    note note
    NOTE
    iOS應用程式和Android應用程式有行動使用案例的範例實作。

運作方式 — Web SDK client-side-how

  1. Web SDK已包含在此頁面上。

  2. 您必須使用sendEvent命令並指定表面URI來擷取個人化內容。

    code language-javascript 
    alloy("sendEvent", {
renderDecisions: true,
personalization: {
    surfaces: ["#sample-json-content"],
},
}).then(applyPersonalization("#sample-json-content"));

  3. 實作程式碼應手動套用程式碼型體驗專案（使用applyPersonalization方法），以根據決定更新DOM。

  4. 對於程式碼型體驗歷程和行銷活動，必須手動傳送顯示事件以指出內容已顯示的時機。 這是透過sendEvent命令完成的。

    code language-javascript 
    function sendDisplayEvent(decision) {
  const { id, scope, scopeDetails = {} } = decision;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionDisplay",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
        },
      },
    },
  });
}

  5. 對於程式碼型體驗歷程和行銷活動，必須手動傳送互動事件，以指出使用者何時已與內容互動。 這是透過sendEvent命令完成的。

    code language-javascript 
    function sendInteractEvent(label, proposition) {
  const { id, scope, scopeDetails = {} } = proposition;

  alloy("sendEvent", {

    xdm: {
      eventType: "decisioning.propositionInteract",
      _experience: {
        decisioning: {
          propositions: [
            {
              id: id,
              scope: scope,
              scopeDetails: scopeDetails,
            },
          ],
          propositionEventType: {
            interact: 1
          },
          propositionAction: {
            label: label
          },
        },
      },
    },
  });
}

重要觀察

Cookie

Cookie可用來儲存使用者身分和叢集資訊。 使用使用者端實作時，Web SDK會在請求生命週期期間自動處理這些Cookie的儲存和傳送。

Cookie
目的
儲存者
傳送者
kndctr_AdobeOrg_identity
包含使用者身分詳細資訊
Web SDK
Web SDK
kndctr_AdobeOrg_cluster
指出應使用哪個體驗邊緣叢集來履行請求
Web SDK
Web SDK

要求位置

需要向Adobe Experience Platform API提出請求才能取得主張並傳送顯示通知。 使用使用者端實作時，Web SDK會在使用sendEvent命令時提出這些要求。

請求
製作者
互動要求以取得主張
使用sendEvent命令的Web SDK
interact傳送顯示通知的請求
使用sendEvent命令的Web SDK

流量圖

伺服器端實作 server-side-implementation

如果您有伺服器端實作，則可以使用其中一個AEPEdge NetworkAPI。

以下步驟說明在網頁的範例Edge NetworkAPI實作中，透過程式碼型體驗歷程和促銷活動，擷取Edge上發佈的內容並顯示個人化內容的程式。

運作方式

  1. 已要求網頁，而且已包含先前由瀏覽器儲存且前置詞為kndctr_的任何Cookie。

  2. 從應用程式伺服器要求頁面時，會傳送事件至互動式資料收集端點，以擷取個人化內容。 此範例應用程式使用一些協助程式方法來簡化建立及傳送要求至API的程式（請參閱aepEdgeClient.js）。 但要求只是POST，其裝載包含事件和查詢。 先前步驟的Cookie （如果可用）包含在meta>state>entries陣列中的請求中。

    code language-javascript 
    fetch(
  "https://edge.adobedc.net/ee/v2/interact?dataStreamId=abc&requestId=123",
  {
    headers: {
      accept: "*/*",
      "accept-language": "en-US,en;q=0.9",
      "cache-control": "no-cache",
      "content-type": "text/plain; charset=UTF-8",
      pragma: "no-cache",
      "sec-fetch-dest": "empty",
      "sec-fetch-mode": "cors",
      "sec-fetch-site": "cross-site",
      "sec-gpc": "1",
      "Referrer-Policy": "strict-origin-when-cross-origin",
      Referer: "https://localhost/",
    },
    body: JSON.stringify({
      event: {
        xdm: {
          eventType: "decisioning.propositionFetch",
          web: {
            webPageDetails: {
              URL: "https://localhost/",
            },
            webReferrer: {
              URL: "",
            },
          },
          identityMap: {
            FPID: [
              {
                id: "xyz",
                authenticatedState: "ambiguous",
                primary: true,
              },
            ],
          },
          timestamp: "2022-06-23T22:21:00.878Z",
        },
        data: {},
      },
      query: {
        identity: {
          fetch: ["ECID"],
        },
        personalization: {
          schemas: [
            "https://ns.adobe.com/personalization/default-content-item",
            "https://ns.adobe.com/personalization/html-content-item",
            "https://ns.adobe.com/personalization/json-content-item",
            "https://ns.adobe.com/personalization/redirect-item",
            "https://ns.adobe.com/personalization/dom-action",
          ],
          surfaces: ["web://localhost/","web://localhost/#sample-json-content"],
        },
      },
      meta: {
        state: {
          domain: "localhost",
          cookiesEnabled: true,
          entries: [
            {
              key: "kndctr_XXX_AdobeOrg_identity",
              value: "abc123",
            },
            {
              key: "kndctr_XXX_AdobeOrg_cluster",
              value: "or2",
            },
          ],
        },
      },
    }),
    method: "POST",
  }
).then((res) => res.json());

  3. 程式碼型體驗歷程和促銷活動中的JSON體驗會從回應中讀取，並在產生HTML回應時使用。

  4. 對於程式碼型體驗歷程和行銷活動，必須在實施中手動傳送顯示事件，以指出顯示歷程或行銷活動內容的時間。 在此範例中，通知會在請求生命週期期間在伺服器端傳送。

    code language-javascript 
    function sendDisplayEvent(aepEdgeClient, req, propositions, cookieEntries) {
  const address = getAddress(req);

  aepEdgeClient.interact(
    {
      event: {
        xdm: {
          web: {
            webPageDetails: { URL: address },
            webReferrer: { URL: "" },
          },
          timestamp: new Date().toISOString(),
          eventType: "decisioning.propositionDisplay",
          _experience: {
            decisioning: {
              propositions: propositions.map((proposition) => {
                const { id, scope, scopeDetails } = proposition;

                return {
                  id,
                  scope,
                  scopeDetails,
                };
              }),
            },
          },
        },
      },
      query: { identity: { fetch: ["ECID"] } },
      meta: {
        state: {
          domain: "",
          cookiesEnabled: true,
          entries: [...cookieEntries],
        },
      },
    },
    {
      Referer: address,
    }
  );
}

  5. 傳回HTML回應時，應用程式伺服器會在回應上設定身分和叢集Cookie。

重要觀察

Cookie

Cookie可用來儲存使用者身分和叢集資訊。 使用伺服器端實作時，應用程式伺服器必須在請求生命週期期間處理這些Cookie的儲存和傳送。

Cookie
目的
儲存者
傳送者
kndctr_AdobeOrg_identity
包含使用者身分詳細資訊
應用程式伺服器
應用程式伺服器
kndctr_AdobeOrg_cluster
指出應使用哪個體驗邊緣叢集來履行請求
應用程式伺服器
應用程式伺服器

要求位置

需要向Adobe Experience Platform API提出請求才能取得主張並傳送顯示通知。 使用使用者端實作時，Web SDK會在使用sendEvent命令時提出這些要求。

請求
製作者
互動要求以取得主張
應用程式伺服器呼叫Adobe Experience Platform API
interact傳送顯示通知的請求
應用程式伺服器呼叫Adobe Experience Platform API

流量圖

混合實施 hybrid-implementation

如果您採用混合式實作，請參閱下列連結。

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76