使用Edge Decisioning API提供優惠方案

上次更新: 2024-01-31
  • 建立對象:
  • Experienced
    Developer

快速入門與必要條件

Adobe Experience Platform Web SDK 是使用者端的JavaScript資料庫,可讓Adobe Experience Cloud客戶透過Experience PlatformEdge Network與Experience Cloud中的各種服務互動。

Experience Platform Web SDK支援Adobe查詢個人化解決方案,包括決定管理,可讓您擷取並轉譯您使用API或優惠資料庫建立的個人化優惠。 如需詳細指示,請參閱以下檔案: 建立優惠方案.

有兩種方式可透過實施決定管理 Platform Web SDK. 一種方式是針對開發人員,且需要網站和程式設計知識。 另一種方式是使用Adobe Experience Platform使用者介面來設定選件,這只需要在HTML頁面的標頭中參照小型指令碼。

請參閱Adobe Experience Platform檔案,網址為 決定管理 有關如何使用Adobe Experience Platform Web SDK提供個人化優惠方案的詳細資訊。

Adobe Experience Platform Web SDK

Platform Web SDK會取代下列SDK:

  • Visitor.js
  • AppMeasurement.js
  • AT.js
  • DIL.js

SDK並未合併這些程式庫,而是全新實施。 若要使用,您必須先執行下列步驟:

  1. 確保貴組織擁有使用SDK的適當許可權,且您已正確設定許可權。

  2. 設定您的資料串流 在Adobe Experience Cloud帳戶的「資料收集」標籤內。

  3. 安裝SDK。 有多種方法可以做到,詳見 安裝SDK頁面. 本頁將繼續提供各種不同的實作方法。

若要使用SDK,您必須擁有 綱要資料流 已定義。

若要個人化優惠方案,您必須個別設定個人化/設定檔。

若要設定SDK以進行決策管理,請遵循下列兩個步驟之一:

選項1 — 使用Launch安裝標籤擴充功能和實施

此選項對編碼體驗較差的人更容易使用。

  1. 建立標籤屬性

  2. 新增內嵌程式碼

  3. 使用您從「資料流」下拉式選單中選取設定而建立的資料流,安裝並設定Adobe Experience Platform Web SDK擴充功能。 請參閱以下檔案: 擴充功能.

    Adobe Experience Platform Web SDK

    設定擴充功能

  4. 建立必要的 資料元素. 您至少必須建立Platform Web SDK身分對應和Platform Web SDK XDM物件資料元素。

    身分對應

    xdm物件

  5. 建立您的 規則

    新增Platform Web SDK傳送事件動作,並將相關decisionScopes新增至該動作的設定

    呈現選件

    請求優惠

  6. 建立並發佈 包含所有已設定相關規則、資料元素和擴充功能的程式庫。

選項2 — 使用預先建立的獨立版本手動實作

以下是使用Web SDK預先建立的獨立安裝來使用決定管理所需的步驟。 本指南假設這是您首次實作SDK,因此所有步驟可能不適用於您。 本指南也假定您有一些開發經驗。

包含選項2的下列JavaScript程式碼片段:上的預先建立獨立版本 此頁面<head> HTML區段建立關聯。

javascript
    <script>
        !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
        []).push(o),n[o]=function(){var u=arguments;return new Promise(
        function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
        (window,["alloy"]);
    </script>
    <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.js" async></script>

您需要在Adobe帳戶內取得兩個ID才能設定SDK設定:edgeConfigId和orgId。 edgeConfigId與您的資料串流ID相同,您應在「先決條件」中設定該ID。

若要尋找您的edgeConfigID/資料串流ID,請前往資料收集並選取您的資料串流。 若要尋找您的orgId,請前往您的設定檔。

依照本頁上的指示,在JavaScript中設定SDK。 在設定函式中,您一律會使用edgeConfigId和orgId。 本檔案也會說明您的設定有哪些可選引數。 您的最終設定可能會如以下所示:

javascript
    alloy("configure", {
        "edgeConfigId": "12345678-0ABC-DEF-GHIJ-KLMNOPQRSTUV",
        "orgId":"ABCDEFGHIJKLMNOPQRSTUVW@AdobeOrg",
        "debugEnabled": true,
        "edgeDomain": "edge.adobedc.net",
        "clickCollectionEnabled": true,
        "idMigrationEnabled": true,
        "thirdPartyCookiesEnabled": true,
        "defaultConsent":"in"
    });

安裝用於偵錯的Debugger Chrome擴充功能。 您可在下列位置找到: https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob

接下來,在除錯工具中登入您的帳戶。 接著,前往「記錄檔」 ,確認您已連線至正確的工作區。 現在,從您的優惠中複製決定範圍的base64編碼版本。

編輯您的網站時,請包含指令碼以及設定和 sendEvent 將決定範圍傳送至Adobe的函式。

範例:

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    });

如需如何處理回應的範例,請參閱下列內容:

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    }).then(function(result) {
        Object.entries(result).forEach(([key, value]) => {
            console.log(key, value);
        });
    });

您可以使用Debugger驗證是否已成功連線至Edge網路。

注意

如果您在記錄檔中看不到與邊緣的連線,您可能需要停用廣告封鎖程式。

請參閱您建立選件的方式及所使用的格式。 系統會根據決定中符合的條件,傳回優惠給您,其中包含您在Adobe Experience Platform中建立優惠時指定的資訊。

在此範例中,要傳回的JSON為:

json
{
   "name":"ABC Test",
   "description":"This is a test offer",
   "link":"https://sampletesting.online/",
   "image":"https://sample-demo-URL.png"
}

處理回應物件並剖析您需要的資料。 因為您可以在一個傳送多個決定範圍 sendEvent 呼叫,您的回應可能會稍微不同。

json
    {
        "id": "abrxgl843d913",
        "scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
        "items":
        [
            {
                "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                "etag": "1",
                "schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
                "data": {
                    "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                    "format": "application/json",
                    "language": [
                        "en-us"
                    ],
                    "content": "{\"name\":\"ABC Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
                }
            }
        ]
    }
]
}
json
{
    "propositions":
    [
    {
        "renderAttempted": false,
        "id": "e15ecb09-993e-4b66-93d8-0a4c77e3d913",
        "scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
        "items":
        [
            {
                "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                "etag": "1",
                "schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
                "data": {
                    "id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
                    "format": "application/json",
                    "language": [
                        "en-us"
                    ],
                    "content": "{\"name\":\"Claire Hubacek Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
                }
            }
        ]
    }
    ]
}

在此範例中,在網頁中處理和使用選件特定詳細資料所需的路徑為: result['decisions'][0]['items'][0]['data']['content']

若要設定JS變數:

javascript
const offer = JSON.parse(result['decisions'][0]['items'][0]['data']['content']);

let offerURL = offer['link'];
let offerDescription = offer['description'];
let offerImageURL = offer['image'];

document.getElementById("offerDescription").innerHTML = offerDescription;
document.getElementById('offerImage').src = offerImageURL;

本頁內容