Experience League

Experience Cloud

Document Cloud

targetGlobalSettings()

Target Standard/Premium UI에서 설정을 구성하거나 REST API를 사용하는 대신 targetGlobalSettings()를 사용하여 at.js 라이브러리의 설정을 무시할 수 있습니다.

사용 사례로 일부 설정을 재정의하려는 경우, 특히 at.js가 DTM(Dynamic Tag Management)을 통해 전달되는 경우를 들 수 있습니다.

설정의 지침을 완료하여 이 설정을 변경할 수 있습니다

다음 설정을 재정의할 수 있습니다.

bodyHiddenStyle

유형: 문자열
기본값:body
설명:깜박임 globalMboxAutocreate === true 을 최소화할 경우에만 사용됩니다.

자세한 내용은 at.js에서 플리커를 관리하는 방법을 참조하십시오.

bodyHidingEnabled

유형:부울
기본값:true
설명:시각적 오퍼라고도 target-global-mbox 하는 Visual Experience Composer에서 만든 오퍼를 제공하는 데 사용되는 깜박임을 제어하는 데 사용됩니다.

clientCode

유형: 문자열
기본값:UI를 통해 설정된 값.
설명:클라이언트 코드를 나타냅니다.

cookieDomain

유형: 문자열
기본값:가능한 경우 최상위 도메인으로 설정합니다.
설명:쿠키를 저장할 때 사용되는 도메인을 나타냅니다.

crossDomain

유형: 문자열
기본값:UI를 통해 설정된 값.
설명:크로스 도메인 추적이 활성화되었는지 여부를 나타냅니다. 허용되는 값은 다음과 같습니다.비활성화됨, 활성화됨 또는 x-only.

cspScriptNonce

유형:아래의 컨텐츠 보안 정책 을 참조하십시오.
기본값:아래의 컨텐츠 보안 정책 을 참조하십시오.
설명:아래의 컨텐츠 보안 정책 을 참조하십시오.

cspStyleNonce

유형:아래의 컨텐츠 보안 정책 을 참조하십시오.
기본값:아래의 컨텐츠 보안 정책 을 참조하십시오.
설명:아래의 컨텐츠 보안 정책 을 참조하십시오.

dataProviders

유형:아래의 데이터 공급자 를 참조하십시오.
기본값:아래의 데이터 공급자 를 참조하십시오.
설명:아래의 데이터 공급자 를 참조하십시오.

defaultContentHiddenStyle

유형: 문자열
기본값:가시성:숨김
설명:클래스 이름이 "mboxDefault"인 DIV를 사용하고 기본 컨텐츠를 통해 mboxCreate()실행되거나 기본 컨텐츠를 숨기기 mboxUpdate()에 사용되는 mbox mboxDefine() 를 래핑하는 경우에만 사용됩니다.

defaultContentVisibleStyle

유형: 문자열
기본값:가시성:visible
설명:클래스 이름이 "mboxDefault"인 DIV를 사용하고 있거나 기본 컨텐츠가 있는 경우 적용된 오퍼 mboxCreate()를 통해 mboxUpdate()실행되거나 mboxDefine() 표시되는 mbox를 래핑하는 경우에만 사용됩니다.

deviceIdLifetime

유형:숫자
기본값:63244800000 ms = 2년
설명:쿠키에 deviceId 남아 있는 시간입니다.

노트

deviceIdLifetime 설정은 at.js 버전 2.3.1 이상에서 사용할 수 있습니다.

활성화됨

유형:부울
기본값:true
설명:활성화되면 경험 Target 검색과 경험을 렌더링하기 위한 DOM 조작 요청이 자동으로 실행됩니다. 또한 Target 호출은 getOffer(s) / applyOffer(s)를 통해 수동으로 실행할 수 있습니다.

비활성화하면 Target 요청이 자동으로 또는 수동으로 실행되지 않습니다.

globalMboxAutoCreate

유형:숫자
기본값:UI를 통해 설정된 값.
설명:글로벌 mbox 요청을 실행할지 여부를 나타냅니다.

imsOrgId

유형:스팅
기본값:true
설명:IMS 조직 ID를 나타냅니다.

optoutEnabled

유형:부울
기본값:false
설명:Target이 방문자 API 함수를 호출해야 하는지 여부를 isOptedOut() 나타냅니다. Device Graph 지원의 일부입니다.

overrideMboxEdgeServer

유형:부울
기본값: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에서 지원되는 최신 버전으로 업데이트하는 것이 좋습니다.

overrideMboxEdgeServerTimeout

유형:숫자
기본값:1860000 => 31분
설명:값이 포함된 쿠키 수명을 mboxedge<clusterNumber>.tt.omtrdc.net 나타냅니다.

pageLoadEnabled

유형:부울
기본값:true
설명:활성화되면 페이지 로드 시 반환해야 하는 경험을 자동으로 검색합니다.

secureOnly

유형:부울
기본값:false
설명:at.js가 HTTPS만 사용해야 하는지 또는 페이지 프로토콜을 기반으로 HTTP와 HTTPS 간을 전환할 수 있도록 허용되어야 하는지를 나타냅니다.

selectorsPollingTimeout

유형:숫자
기본값:5000ms = 5s
설명:at.js 0.9.6에서는 을 통해 재정의할 수 있는 이 새로운 설정을 Target 도입했습니다 targetGlobalSettings.

selectorsPollingTimeout 설정은 클라이언트가 선택기로 식별된 모든 요소가 페이지에 표시될 때까지 기다리는 시간을 나타냅니다.

VEC(시각적 경험 작성기)를 통해 작성된 활동에는 선택기를 포함하는 오퍼가 있습니다.

serverDomain

유형: 문자열
기본값:UI를 통해 설정된 값.
설명:Target Edge Server를 나타냅니다.

serverState

유형:아래의 하이브리드 개인화를 참조하십시오.
기본값:아래의 하이브리드 개인화를 참조하십시오.
설명:아래의 하이브리드 개인화를 참조하십시오.

timeout

유형:숫자
기본값:UI를 통해 설정된 값.
설명:가장자리 Target 요청 시간 초과를 나타냅니다.

viewsEnabled

유형:부울
기본값:true
설명:이 옵션이 활성화되면 페이지 로드 시 반환해야 하는 보기를 자동으로 검색합니다. 보기는 at.js 2에서 지원됩니다.x에만 사용할 수 있습니다.

visitorApiTimeout

유형:숫자
기본값:2000ms = 2s
설명:방문자 API 요청 시간 초과를 나타냅니다.

사용

이 함수는 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 매개 변수는 데이터를 성공적으로 가져왔거나 오류가 있는 경우에만 호출되어야 하는 함수입니다. 콜백에는 다음 두 매개 변수가 필요합니다. error: 오류가 발생했는지를 나타냅니다. 모든 것이 정상이면 이 매개 변수를 null로 설정해야 합니다. params: Target 요청에서 보낼 매개 변수를 나타내는 JSON 개체입니다.

다음 예제에서는 데이터 공급자가 동기화 실행을 사용하는 위치를 보여 줍니다.

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는 데이터를 캐시하려고 하지 않습니다. 데이터 공급자는 데이터를 한 번만 가져오는 경우 데이터가 캐시되는지 확인해야 하고, 공급자 함수가 호출될 때 두 번째 호출을 위해 캐시 데이터를 제공해야 합니다.

콘텐츠 보안 정책

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의 하이브리드 통합이 있어야 합니다.

서버측:새 배달 API 또는 Target SDK를 사용해야 합니다.
클라이언트측:at.js 버전 2.2 이상을 사용해야 합니다.

코드 샘플

이 작동 방식을 보다 잘 이해하려면 서버에서 사용할 코드 예제를 참조하십시오. 이 코드에서는 사용자가 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의 작동 방법에 대해 자세히 알아보려면 다음 리소스를 확인하십시오.

Adobe.com의 리소스

이 페이지에서는

다음 보기:

A virtual event April 27-28.

Expand your skills and get inspired.

개인 정보(업데이트 됨)

사용 약관