此 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 Web SDK提供個人化優惠方案的詳細資訊。
Adobe Experience Platform Web SDK中的決定管理僅適用於一組組織(可用性限制)。 如果您想要運用此功能,請聯絡您的Adobe客戶主管。
Platform Web SDK會取代下列SDK:
SDK並未合併這些程式庫,而是全新實施。 若要使用,您必須先執行下列步驟:
確保貴組織擁有使用SDK的適當許可權,且您已正確設定許可權。
設定您的資料串流 在Adobe Experience Cloud帳戶的「資料收集」標籤內。
安裝SDK。 有多種方法可以做到,詳見 安裝SDK頁面. 本頁將繼續提供各種不同的實作方法。
若要個人化優惠方案,您必須個別設定個人化/設定檔。
若要設定SDK以進行決策管理,請遵循下列兩個步驟之一:
此選項對編碼體驗較差的人更容易使用。
使用您從「資料流」下拉式選單中選取設定而建立的資料流,安裝並設定Adobe Experience Platform Web SDK擴充功能。 請參閱以下檔案: 擴充功能.
建立必要的 資料元素. 您至少必須建立Platform Web SDK身分對應和Platform Web SDK XDM物件資料元素。
建立您的 規則:
新增Platform Web SDK傳送事件動作,並將相關decisionScopes新增至該動作的設定
建立並發佈 包含所有已設定相關規則、資料元素和擴充功能的程式庫。
以下是使用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;