您可以使用 targetGlobalSettings()
覆寫 at.js 資料庫中的設定,而非在 Target Standard/Premium UI 中或使用 REST API 進行設定。
有些使用案例,特別是當 at.js 是透過 Dynamic Tag Management (DTM) 傳遞,而您想要覆寫部分設定時。
您可以覆寫下列設定:
類型: 字串
預設值:body
說明:僅用於 globalMboxAutocreate === true
將閃爍的可能性降到最低。
如需詳細資訊,請參閱 at.js 處理忽隱忽現情況的方式。
target-global-mbox
當用來傳送在Visual Experience Composer中建立的選件時,也稱為視覺選件。mboxCreate()
設內容的 mboxUpdate()
mboxDefine()
mbox。mboxCreate()
、 mboxUpdate()
或 mboxDefine()
顯示套用的選件(如果有或預設內容)的mbox。deviceId
續的時間量。deviceIdLifetime設定在at.js 2.3.1版或更新版本中可覆寫。
類型:布林值
預設值:true
說明:啟用後,會自 Target 動執行擷取體驗的要求和轉譯體驗的DOM操作。此外,Target呼叫可以透過getOffer(s)
/ applyOffer(s)
手動執行。
停用時,Target請求不會自動或手動執行。
isOptedOut()
函式。這屬於裝置圖表啟用的一部分。類型:布林值
預設值:true(true開頭為at.js 1.6.2版
說明:指出我們應使用網 <clientCode>.tt.omtrdc.net
域或網 mboxedge<clusterNumber>.tt.omtrdc.net
域。
如果此值為 true,則會將 mboxedge<clusterNumber>.tt.omtrdc.net
網域儲存至 Cookie. 當使用at.js 1.8.2和at.js 2.3.1之前的at.js版本時,目前無法與CNAME搭配使用。如果這是您的問題,請考慮將at.js更新為較新的支援版本。
mboxedge<clusterNumber>.tt.omtrdc.net
留期。類型:數字
預設值:5000 ms = 5 s
說明:在at.js 0.9.6中,引 Target 入此可透過覆寫的新設定 targetGlobalSettings
。
selectorsPollingTimeout
設定代表用戶端願意等待選擇器所識別的所有元素出現在頁面上的時間。
透過可視化體驗撰寫器 (VEC) 建立的活動,其具有的選件包含選取器。
此函式可在載入at.js之前定義,或在Administration > Implementation > Edit at.js Settings > Code Settings > Library Header中定義。
資料庫標頭欄位允許輸入自由格式的 JavaScript。自訂程式碼看起來應該類似於下列範例:
window.targetGlobalSettings = {
timeout: 200, // using custom timeout
visitorApiTimeout: 500, // using custom API timeout
enabled: document.location.href.indexOf('https://www.adobe.com') >= 0 // enabled ONLY on adobe.com
};
此設定可讓客戶收集來自第三方資料提供者 (例如 Demandbase、BlueKai 和自訂服務) 的資料,並在全域 mbox 要求中以 mbox 參數的形式傳遞資料至 Target。它透過非同步和同步要求,以支援來自多個提供者的資料收集。使用此方法可讓您方便管理預設頁面內容的忽隱忽現情形,同時對每個提供者包含獨立的逾時計算,以限制對頁面效能的影響
at.js 1.3 或更新版本才支援資料提供者功能。
以下影片包含更多資訊:
影片 | 說明 |
---|---|
使用 Adobe Target 中的資料提供者 | 資料提供者這項功能可以讓您輕鬆將資料從第三方傳入 Target。第三方可能是氣象服務、DMP,甚至是您自己的 Web 服務。接著,您就能使用此資料來建立對象、鎖定內容及擴充訪客設定檔。 |
實作 Adobe Target 中的資料提供者 | 實作詳細資料和範例,說明如何使用 Adobe Target 的 dataProviders 功能,從第三方資料提供者擷取資料,並將其傳遞到 Target 請求。 |
window.targetGlobalSettings.dataProviders
設定是資料提供者的陣列。
每個資料提供者具有下列結構:
機碼 | 類型 | 說明 |
---|---|---|
name | 字串 | 提供者的名稱。 |
version | 字串 | 提供者版本。此機碼將用於提供者演進。 |
超時 | 數字 | 如果這是網路要求,則代表提供者逾時。此機碼為選用。 |
provider | 函數 | 包括提供者資料擷取邏輯的函數。 函數有單一必要參數: callback 。callback 參數為函數,僅應該在成功擷取資料或發生錯誤時叫用。callback 預期兩個參數:
|
下列範例顯示的資料提供者正在使用同步執行:
var syncDataProvider = {
name: "simpleDataProvider",
version: "1.0.0",
provider: function(callback) {
callback(null, {t1: 1});
}
};
window.targetGlobalSettings = {
dataProviders: [
syncDataProvider
]
};
在 at.js 處理 window.targetGlobalSettings.dataProviders
之後,Target 要求將包含新參數: t1=1
。
如果您要新增至 Target 要求的參數是從第三方服務 (例如 Bluekai、Demandbase 等等) 擷取,以下是範例:
var blueKaiDataProvider = {
name: "blueKai",
version: "1.0.0",
provider: function(callback) {
// simulating network request
setTimeout(function() {
callback(null, {t1: 1, t2: 2, t3: 3});
}, 1000);
}
}
window.targetGlobalSettings = {
dataProviders: [
blueKaiDataProvider
]
};
at.js 處理 window.targetGlobalSettings.dataProviders
之後,Target 要求將包含其他參數: t2=2
、t1=1
和 t3=3
。
下列範例使用資料提供者來收集天氣 API 資料,並將資料以參數形式在 Target 要求中傳送。Target 要求會將額外的參數,例如 country
和 weatherCondition
。
var weatherProvider = {
name: "weather-api",
version: "1.0.0",
timeout: 2000,
provider: function(callback) {
var API_KEY = "caa84fc6f5dc77b6372d2570458b8699";
var lat = 44.426767399999996;
var lon = 26.1025384;
var url = "//api.openweathermap.org/data/2.5/weather?lang=en";
var data = {
lat: lat,
lon: lon,
appId: API_KEY
}
$.ajax({
type: "GET",
url: url,
dataType: "json",
data: data,
success: function(data) {
console.log("Weather data", data);
callback(null, {
country: data.sys.country,
weatherCondition: data.weather[0].main
});
},
error: function(err) {
console.log("Error", err);
callback(err);
}
});
}
};
window.targetGlobalSettings = {
dataProviders: [weatherProvider]
};
使用 dataProviders
設定時,請考慮下列各項:
window.targetGlobalSettings.dataProviders
的資料提供者非同步,則會並行執行。訪客 API 要求將與新增至 window.targetGlobalSettings.dataProviders
的函數並行執行,以允許最低的等候時間。at.js 2.3.0+支援在套用傳送的Target選件時,在附加至頁面DOM的SCRIPT和STYLE標籤上設定「內容安全性原則」不可用。
在at.js 2.3.0+載入之前,SCRIPT和STYLEnonces應相應地設定在targetGlobalSettings.cspScriptNonce
和targetGlobalSettings.cspStyleNonce
中。 請參閱下列範例:
...
<head>
<script nonce="<script_nonce_value>">
window.targetGlobalSettings = {
cspScriptNonce: "<csp_script_nonce_value>",
cspStyleNonce: "<csp_style_nonce_value>"
};
</script>
<script nonce="<script_nonce_value>" src="at.js"></script>
...
</head>
...
在指定cspScriptNonce
和cspStyleNonce
設定後,at.js 2.3.0+會在套用Target選件時附加至DOM的所有SCRIPT和STYLE標籤上,將這些設定設為nonce屬性。
serverState
是at.js v2.2+中可用的設定,可在實作Target的混合整合時用來最佳化頁面效能。混合整合意指您在用戶端上同時使用at.js v2.2+和伺服器端的傳送API或Target SDK來傳送體驗。 serverState
讓at.js v2.2+能夠直接從伺服器端擷取並傳回至用戶端的內容套用體驗,做為所提供頁面的一部分。
您必須有Target的混合整合。
若要進一步瞭解其運作方式,請參閱下列您在伺服器上的程式碼範例。 程式碼假設您使用Target Node.js SDK。
// First, we fetch the offers via Target Node.js SDK API, as usual
const targetResponse = await targetClient.getOffers(options);
// A successfull response will contain Target Delivery API request and response objects, which we need to set as serverState
const serverState = {
request: targetResponse.request,
response: targetResponse.response
};
// Finally, we should set window.targetGlobalSettings.serverState in the returned page, by replacing it in a page template, for example
const PAGE_TEMPLATE = `
<!doctype html>
<html>
<head>
...
<script>
window.targetGlobalSettings = {
overrideMboxEdgeServer: true,
serverState: ${JSON.stringify(serverState, null, " ")}
};
</script>
<script src="at.js"></script>
</head>
...
</html>
`;
// Return PAGE_TEMPLATE to the client ...
檢視預回遷的範例serverState
物件JSON如下所示:
{
"request": {
"requestId": "076ace1cd3624048bae1ced1f9e0c536",
"id": {
"tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
},
"context": {
"channel": "web",
"timeOffsetInMinutes": 0
},
"experienceCloud": {
"analytics": {
"logging": "server_side",
"supplementalDataId": "7D3AA246CC99FD7F-1B3DD2E75595498E"
}
},
"prefetch": {
"views": [
{
"address": {
"url": "my.testsite.com/"
}
}
]
}
},
"response": {
"status": 200,
"requestId": "076ace1cd3624048bae1ced1f9e0c536",
"id": {
"tntId": "08210e2d751a44779b8313e2d2692b96.21_27"
},
"client": "testclient",
"edgeHost": "mboxedge21.tt.omtrdc.net",
"prefetch": {
"views": [
{
"name": "home",
"key": "home",
"options": [
{
"type": "actions",
"content": [
{
"type": "setHtml",
"selector": "#app > DIV.app-container:eq(0) > DIV.page-container:eq(0) > DIV:nth-of-type(2) > SECTION.section:eq(0) > DIV.container:eq(1) > DIV.heading:eq(0) > H1.title:eq(0)",
"cssSelector": "#app > DIV:nth-of-type(1) > DIV:nth-of-type(1) > DIV:nth-of-type(2) > SECTION:nth-of-type(1) > DIV:nth-of-type(2) > DIV:nth-of-type(1) > H1:nth-of-type(1)",
"content": "<span style=\"color:#FF0000;\">Latest</span> Products for 2020"
}
],
"eventToken": "t0FRvoWosOqHmYL5G18QCZNWHtnQtQrJfmRrQugEa2qCnQ9Y9OaLL2gsdrWQTvE54PwSz67rmXWmSnkXpSSS2Q==",
"responseTokens": {
"profile.memberlevel": "0",
"geo.city": "dublin",
"activity.id": "302740",
"experience.name": "Experience B",
"geo.country": "ireland"
}
}
],
"state": "J+W1Fq18hxliDDJonTPfV0S+mzxapAO3d14M43EsM9f12A6QaqL+E3XKkRFlmq9U"
}
]
}
}
}
頁面載入瀏覽器後,at.js會立即套用serverState
的所有Target選件,而不會針對Target邊緣觸發任何網路呼叫。 此外,at.js只會預先隱藏Target選件在擷取的伺服器端內容中可用的DOM元素,因此會對頁面載入效能和使用者體驗產生積極影響。
使用serverState
時,請考慮以下事項:
目前,at.js v2.2僅支援透過serverState提供以下體驗:
在頁面載入時執行的VEC建立活動。
預先擷取的檢視。
若SPA在at.js API中使用Target檢視和triggerView()
,at.js v2.2會快取伺服器端預先擷取之所有檢視的內容,並在每個檢視透過triggerView()
觸發時立即套用這些內容,同樣不會引發對Target的任何額外內容擷取呼叫。
注意:目前,不支援在伺服器端擷取的mbox serverState
。
套用serverState
選件時,at.js會考慮pageLoadEnabled
和viewsEnabled
設定,例如,如果pageLoadEnabled
設定為false,則不會套用「頁面載入選件」。
若要開啟這些設定,請啟用「管理 > 實施 > 編輯 > 啟用頁面載入」中的切換。
如果您使用serverState
並在傳回的內容中使用<script>
標籤,請確定您的HTML內容使用<\/script>
而非</script>
。 如果您使用</script>
,瀏覽器會將</script>
解譯為內嵌SCRIPT的結尾,並可能中斷HTML頁面。
若要進一步瞭解serverState
的運作方式,請查看下列資源: