Target Standard/Premium UI에서 설정을 구성하거나 REST API를 사용하는 대신 targetGlobalSettings()
를 사용하여 at.js 라이브러리의 설정을 무시할 수 있습니다.
사용 사례로 일부 설정을 재정의하려는 경우, 특히 at.js가 DTM(Dynamic Tag Management)을 통해 전달되는 경우를 들 수 있습니다.
다음 설정을 재정의할 수 있습니다.
유형: 문자열
기본값:body
설명:깜박임 globalMboxAutocreate === true
을 최소화할 경우에만 사용됩니다.
자세한 내용은 at.js에서 플리커를 관리하는 방법을 참조하십시오.
target-global-mbox
하는 Visual Experience Composer에서 만든 오퍼를 제공하는 데 사용되는 깜박임을 제어하는 데 사용됩니다.mboxCreate()
실행되거나 기본 컨텐츠를 숨기기 mboxUpdate()
에 사용되는 mbox mboxDefine()
를 래핑하는 경우에만 사용됩니다.mboxCreate()
를 통해 mboxUpdate()
실행되거나 mboxDefine()
표시되는 mbox를 래핑하는 경우에만 사용됩니다.deviceId
남아 있는 시간입니다.deviceIdLifetime 설정은 at.js 버전 2.3.1 이상에서 사용할 수 있습니다.
유형:부울
기본값:true
설명:활성화되면 경험 Target 검색과 경험을 렌더링하기 위한 DOM 조작 요청이 자동으로 실행됩니다. 또한 Target 호출은 getOffer(s)
/ applyOffer(s)
를 통해 수동으로 실행할 수 있습니다.
비활성화하면 Target 요청이 자동으로 또는 수동으로 실행되지 않습니다.
isOptedOut()
나타냅니다. Device Graph 지원의 일부입니다.유형:부울
기본값:true(at.js 버전 1.6.2부터 true)
설명:도메인 또는 <clientCode>.tt.omtrdc.net
도메인을 사용해야 하는지 mboxedge<clusterNumber>.tt.omtrdc.net
나타냅니다.
이 값이 true이면 mboxedge<clusterNumber>.tt.omtrdc.net
도메인이 쿠키에 저장됩니다. 현재 at.js 1.8.2 및 at.js 2.3.1 이전 at.js 버전을 사용할 때 CNAME에서 작동하지 않습니다. 문제가 되는 경우 at.js에서 지원되는 최신 버전으로 업데이트하는 것이 좋습니다.
mboxedge<clusterNumber>.tt.omtrdc.net
나타냅니다.유형:숫자
기본값:5000ms = 5s
설명:at.js 0.9.6에서는 을 통해 재정의할 수 있는 이 새로운 설정을 Target 도입했습니다 targetGlobalSettings
.
selectorsPollingTimeout
설정은 클라이언트가 선택기로 식별된 모든 요소가 페이지에 표시될 때까지 기다리는 시간을 나타냅니다.
VEC(시각적 경험 작성기)를 통해 작성된 활동에는 선택기를 포함하는 오퍼가 있습니다.
이 함수는 at.js를 로드하기 전에 정의하거나 관리 > 구현 > 편집 at.js 설정 > 코드 설정 > 라이브러리 헤더에서 정의할 수 있습니다.
라이브러리 헤더 필드에는 자유 형식 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 또는 자체 웹 서비스일 수 있습니다. 그런 다음, 이 데이터를 사용하여 대상, Target 콘텐츠를 작성하고 방문자 프로필을 보강할 수 있습니다. |
Adobe Target에서 데이터 공급자 구현 | Adobe Target의 dataProviders 기능을 사용하여 타사 데이터 공급자로부터 데이터를 검색하고 이를 Target 요청에 전달하는 방법에 대한 자세한 내용과 예제에 대한 구현입니다. |
window.targetGlobalSettings.dataProviders
설정은 데이터 공급자의 배열입니다.
각 데이터 공급자의 구조는 다음과 같습니다.
키 | 유형 | 설명 |
---|---|---|
이름 | 문자열 | 공급자의 이름입니다. |
version | 문자열 | 공급자 버전입니다. 이 키는 공급자 발전에 사용됩니다. |
timeout | 숫자 | 네트워크 요청인 경우 공급자 시간 제한을 나타냅니다. 이 키는 선택 사항입니다. |
provider | 함수 | 공급자 데이터 가져오기 로직을 포함하는 함수입니다. 이 함수에는 단일 필수 매개 변수인 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 요청에는 추가 매개 변수인 t1=1
, t2=2
및 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 태그에서 Content Security 정책 원본을 설정할 수 있도록 지원합니다.
SCRIPT 및 STYLE 논리는 at.js 2.3.0+ 로드 전에 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
은 Target의 하이브리드 통합이 구현될 때 페이지 성능을 최적화하는 데 사용할 수 있는 at.js v2.2+에서 사용할 수 있는 설정입니다. 하이브리드 통합은 클라이언트측에서 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는 Target 가장자리에 대한 네트워크 호출을 실행하지 않고 serverState
에서 모든 Target 오퍼를 즉시 적용합니다. 또한 at.js는 컨텐츠 제공 서버측에서 Target 오퍼를 사용할 수 있는 DOM 요소만 미리 숨겨 페이지 로드 성능 및 최종 사용자 경험에 긍정적인 영향을 줍니다.
serverState
을(를) 사용할 때는 다음 사항을 고려하십시오.
현재 at.js v2.2는 serverState를 통해 다음을 위한 경험만 전달하는 것을 지원합니다.
페이지 로드 시 실행되는 VEC 생성 활동.
사전 반입된 뷰.
at.js API에서 Target 보기 및 triggerView()
를 사용하는 SPA의 경우 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
의 작동 방법에 대해 자세히 알아보려면 다음 리소스를 확인하십시오.