使用Edge Decisioning API提供優惠方案

快速入門與必要條件

Adobe Experience Platform Web SDK 是用戶端JavaScript程式庫,可讓Adobe Experience Cloud客戶透過Experience Platform邊緣網路與Experience Cloud中的各種服務互動。

Experience PlatformWeb SDK支援在Adobe(包括決策管理)查詢個人化解決方案,讓您能夠擷取及呈現您使用API或選件資料庫建立的個人化選件。 如需更多詳細指示,請參閱 建立優惠方案.

有兩種方式可透過 平台Web SDK. 一種是面向開發人員,需要了解網站和程式設計。 另一種方式是使用Adobe Experience Platform使用者介面來設定選件,該選件只需要在HTML頁面的標題中參考小型指令碼。

請參閱 決策管理 如需如何使用Adobe Experience Platform Web SDK提供個人化優惠方案的詳細資訊。

注意

Adobe Experience Platform Web SDK中的「決策管理」僅適用於一組組織(有限可用性)。 如果您想要運用此功能,請連絡您的Adobe客戶主管。

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安裝Tag擴充功能與實作

對於編碼體驗可能較少的人,此選項較方便使用。

  1. 建立標籤屬性

  2. 新增內嵌程式碼

  3. 從「Datastream」下拉式清單中選取設定,使用您建立的Datastream安裝並設定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相同,您應在「必要條件」中設定。

若要尋找您的edgeConfigID/datastream 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);
        });
    });

您可以使用偵錯工具來確認您已成功連線至邊緣網路。

注意

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

請參閱建立選件的方式,以及使用的格式。 系統會根據決策中符合的條件,傳回選件給您,其中包含您在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;

本頁內容