Target의 서버측 구현 및 A4T에 ID 서비스 사용

이 지침은 Target, Analytics 및 ID 서비스에 대해 혼합된 서버측 및 클라이언트측 구현이 있는 A4T 고객을 위한 것입니다. NodeJS 또는 Rhino 환경에서 ID 서비스를 실행해야 하는 고객도 이 정보를 검토해야 합니다. 이 ID 서비스 인스턴스는 NPM(Node Package Manager)에서 다운로드하여 설치하는 단축된 버전의 VisitorAPI.js 코드 라이브러리를 사용합니다. 이 섹션에서 설치 지침 및 기타 구성 요구 사항을 검토하십시오.

소개

A4T(및 기타 고객)는 다음과 같은 작업이 필요한 경우 이 버전의 ID 서비스를 사용할 수 있습니다.

  • 서버에서 웹 페이지 콘텐츠를 렌더링하고 최종 표시되도록 브라우저에 전달합니다
  • 서버측 Target을 호출합니다.
  • Analytics에 클라이언트측(인브라우저) 호출을 해야 하는 경우
  • 별개의Target 및 Analytics ID를 동기화하여 한 개의 솔루션에 의해 표시된 방문자가 다른 솔루션에 표시된 방문자와 동일한 인물인지 확인해야 할 경우

코드 다운로드 및 제공된 인터페이스

서버측 코드 패키지를 다운로드하고 현재 빌드에 포함된 인터페이스를 검토하려면 ID 서비스 NPM 저장소를 참조하십시오.

워크플로우

아래 다이어그램과 섹션에서는 서버측 구현 프로세스의 각 단계에서 어떤 상황이 발생하고 무엇을 구성해야 하는지 설명합니다.

1단계: 페이지 요청

방문자가 웹 페이지를 로드하기 위해 HTTP 요청을 할 때 서버측 활동이 시작됩니다. 이 단계에서 서버는 이 요청을 수신하고 AMCV 쿠키를 확인합니다. AMCV 쿠키에는 방문자의 MID(Experience Cloud ID)가 포함되어 있습니다.

2단계: ID 서비스 페이로드 생성

다음으로, ID 서비스에 서버측 payload request​을 만듭니다. 페이로드 요청:

  • AMCV 쿠키를 ID 서비스에 전달합니다.
  • 아래에 설명된 후속 단계에서 Target 및 Analytics에 필요한 데이터를 요청합니다.
노트

이 메서드는 Target에서 단일 mbox를 요청합니다. 한 번의 호출로 여러 mbox를 요청해야 하는 경우 generateBatchPayload를 참조하십시오.

페이로드 요청은 다음 코드 샘플과 유사해야 합니다. 코드 샘플에서 visitor.setCustomerIDs 함수는 선택 사항입니다. 자세한 내용은 고객 ID 및 인증 상태를 참조하십시오.

//Import the ID service server package 
var Visitor = require("@adobe-mcid/visitor-js-server"); 
 
//Pass in your Organization ID to instantiate Visitor 
var visitor = new Visitor("Insert Experience Cloud ID here"); 
 
// 
<i>(Optional)</i> Set a custom customer ID 
visitor.setCustomerIDs({ 
     userid:{ 
          id:"1234", 
          authState: Visitor.AuthState.UNKNOWN //AuthState is a static property of the Visitor class 
     } 
}); 
 
//Parse the visitor's HTTP request for the AMCV cookie 
var cookies = cookie.parse(req.headers.cookie || ""); 
var cookieName = visitor.getCookieName(); // Visitor API that returns the cookie name. 
var amcvCookie = cookies[cookieName]; 
 
//Generate the payload request pass your mbox name and the AMCV cookie if present 
var visitorPayload = visitor.generatePayload({ 
     mboxName: "bottom-banner-mbox", 
     amcvCookie: amcvCookie 
});

ID 서비스는 JSON 개체에 다음 예제와 유사한 페이로드를 반환합니다. 페이로드 데이터는 Target에 필요합니다.

{ 
    "marketingCloudVisitorId": "02111696918527575543455026275721941645", 
    "mboxParameters": { 
        "mboxAAMB": "abcd1234", 
        "mboxMCGLH": "9", 
        "mboxMCSDID": "56BE026543F7E211-1CC51BCAAE88F0D2", 
        "vst.userid.id": "1234567890", 
        "vst.userid.authState": 0 
    } 
}

방문자에게 AMCV 쿠키가 없는 경우 페이로드에서 다음과 같은 키-값 쌍을 생략합니다.

  • marketingCloudvisitorId
  • mboxAAMB
  • mboxMCGLH

3단계: Target 호출에 페이로드 추가

서버가 ID 서비스에서 페이로드 데이터를 수신하면 Target에 전달된 데이터와 병합하기 위해 추가 코드를 인스턴스화해야 합니다. Target에 전달된 마지막 JSON 개체는 다음과 유사합니다.

{ 
"mbox" : "target-global-mbox", 
"marketingCloudVisitorId":"02111696918527575543455026275721941645", 
"requestLocation" : { 
     "pageURL" : "http://www.domain.com/test/demo.html", 
     "host" : "localhost:3000" 
     }, 
"mboxParameters" : { 
     "mboxAAMB" : "abcd1234", 
     "mboxMCGLH" : "9", 
     "mboxMCSDID": "56BE026543F7E211-1CC51BCAAE88F0D2", 
     "vst.userid.id": "1234567890", 
     "vst.userid.authState": 0, 
     } 
} 

4단계: ID 서비스의 서버 상태 가져오기

서버 상태 데이터에는 서버에서 수행된 작업에 대한 정보가 포함됩니다. 클라이언트측 ID 서비스 코드에는 이 정보가 필요합니다. DTM(Dynamic Tag Manager)을 통해 ID 서비스를 구현한 고객은 해당 도구를 통해 서버 상태 데이터를 전달하도록 DTM을 구성할 수 있습니다. 비표준 프로세스를 통해 ID 서비스를 설정한 경우 자체 코드와 함께 서버 상태를 반환해야 합니다. 클라이언트측 ID 서비스와 Analytics 코드는 페이지가 로드될 때 상태 데이터를 Adobe에 전달합니다.

DTM을 통해 서버 상태 가져오기

DTM으로 ID 서비스를 구현한 경우, 페이지에 코드를 추가하고 DTM 설정에 이름-값 쌍을 지정해야 합니다.

페이지 코드

다음 코드를 HTML 페이지의 <head> 태그에 추가합니다.

//Get server state 
var serverState = visitor.getState(); 
 
Response.send(" 
... 
<head> 
     <script> 
          //Add 'serverState' as a stringified JSON global variable. 
          "var serverState = "+ JSON.stringify(serverState) +";  
     </script> 
     <script src = "DTM script (satellite JS)"> 
     </script> 
</head> 
...

DTM 설정

다음 코드를 ID 서비스 인스턴스의 일반 > 설정 섹션에 이름-값 쌍으로 추가합니다.

  • 이름: serverState

  • 값: %serverState%

    중요

    값 이름은 페이지 코드의 serverState에 설정한 변수 이름과 일치해야 합니다.

구성된 설정은 다음과 같습니다.

See also, DTM에 대한 Experience Cloud Identity 서비스 설정도 참조하십시오.

DTM을 사용하지 않고 서버 상태 가져오기

ID 서비스의 비표준 구현을 보유한 경우, 다음 코드를 구성하여 요청된 페이지를 결합하는 동안 서버에서 실행해야 합니다.

//Get server state 
var serverState = visitor.getState(); 
 
Response.send(" 
... 
<head> 
     <script src="VisitorAPI.js"></script> 
     <script> 
          var visitor = Visitor.getInstance(orgID, { 
          serverState: serverState  
          ... 
     </script> 
</head> 
...

5단계: 페이지 제공 및 Experience Cloud 데이터 반환

이때 웹 서버는 방문자의 브라우저에 페이지 컨텐츠를 전송합니다. 이 시점에서부터 브라우저(서버가 아님)가 나머지 모든 ID 서비스와 Analytics 호출을 수행합니다. 예를 들어 브라우저에서:

  • ID 서비스는 서버에서 상태 데이터를 수신하고 SDID를 AppMeasurement로 전달합니다.
  • AppMeasurement가 SDID를 포함하여 페이지 조회수에 관한 데이터를 Analytics에 전달합니다.
  • Analytics 및 Target에서 해당 방문자의 SDID를 비교합니다. SDID가 일치하면 Target 및 Analytics가 서버측 호출과 클라이언트측 호출을 함께 결합합니다. 이제 두 개의 솔루션에서 해당 방문자를 동일한 사람으로 인지합니다.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now