at.js 1.x 에서 at.js 2.x ​로 업그레이드

Adobe Target의 최신 at.js 버전에서는 차세대 클라이언트측 기술에 대한 개인화를 실행하도록 기업을 지원하는 다양한 기능을 제공합니다. 이 새로운 버전은 단일 페이지 애플리케이션(SPA)과 조화로운 상호 작용을 하도록 at.js를 업그레이드하는 데 주력하고 있습니다.

at.js 2.x ​를 사용하면 이전 버전에서 사용할 수 없는 다음과 같은 몇 가지 이점이 있습니다.

at.js 2.x 시스템 다이어그램

다음 다이어그램은 보기가 있는 at.js 2.x ​의 워크플로우를 이해하고 이를 통해 어떻게 SPA 통합이 향상되는지를 이해하는 데 도움이 됩니다. at.js 2.x ​에서 사용되는 개념의 도입을 보다 잘 이해하려면 단일 페이지 애플리케이션 구현을 참조하십시오.

이미지 를 클릭하여 전체 너비로 확장합니다.

{modal="regular"}

이제 SPA에서 triggerView()가 구현될 때 그곳이 어디든, 보기 및 작업은 캐시에서 검색되고 서버 호출 없이 사용자에게 표시됩니다. triggerView()는 또한 노출 수를 증가시키고 기록하기 위해 Target 백엔드에 알림을 요청합니다.

이미지 를 클릭하여 전체 너비로 확장합니다.

{modal="regular"}

at.js 2.x

at.js 2.x 의 태그를 통해 Adobe Experience Platform 확장명.

사용 중단된 at.js 함수

at.js 2.x ​에서는 더 이상 사용되지 않는 몇 가지 함수가 있습니다.

아래에는 사용이 중단된 함수와 그에 해당하는 새로운 함수가 있습니다. 전체 함수 목록이 필요하면 at.js 함수를 참조하십시오.

mboxCreate(mbox,params)

설명:

요청을 실행하고 mboxDefault 클래스 이름을 사용하는 가장 가까운 DIV에 오퍼를 적용합니다.

예:

<div class="mboxDefault">
  default content to replace by offer
</div>
<script>
  mboxCreate('mboxName','param1=value1','param2=value2');
</script>

at.js 2.x 에 상응

mboxCreate(mbox, params)의 대체 함수는 getOffer()와 applyOffer()입니다.

예:

<div class="mboxDefault">
  default content to replace by offer
</div>
<script>
  var el = document.currentScript.previousElementSibling;
  adobe.target.getOffer({
    mbox: "mboxName",
    params: {
      param1: "value1",
      param2: "value2"
    },
    success: function(offer) {
      adobe.target.applyOffer({
        mbox: "mboxName",
        selector: el,
        offer: offer
      });
    },
    error: function(error) {
      console.error(error);
      el.style.visibility = "visible";
    }
  });
</script>

mboxDefine() 및 mboxUpdate()

설명:

요소와 mbox 이름 사이에 내부 매핑을 만들되, 요청을 실행하지 마십시오. 요청을 실행하고 mboxDefine()에서 nodeId로 식별되는 요소에 오퍼를 적용하는 mboxUpdate()와 함께 사용됩니다. mboxCreate로 시작된 mbox를 업데이트하는 데도 사용할 수 있습니다.

예:

<div id="someId" class="mboxDefault"></div>
<script>
 mboxDefine('someId','mboxName','param1=value1','param2=value2');
 mboxUpdate('mboxName','param3=value3','param4=value4');
</script>

at.js 2.X 에 상응:

mboxDefine()과 mboxUpdate의 대체 함수는 getOffer()와 applyOffer()이며 applyOffer()에서는 선택기 선택 사항이 사용됩니다. 이 접근 방식에서는 ID가 있는 선택기뿐만 아니라 CSS 선택기를 사용하여 오퍼를 요소에 매핑할 수 있습니다.

예:

<div id="someId" class="mboxDefault">
  default content to replace by offer
</div>
<script>
  adobe.target.getOffer({
    mbox: "mboxName",
    params: {
      param1: "value1",
      param2: "value2",
      param3: "value3",
      param4: "value4"
    },
    success: function(offer) {
      adobe.target.applyOffer({
        mbox: "mboxName",
        selector: "#someId",
        offer: offer
      });
    },
    error: function(error) {
      console.error(error);
      var el = document.getElementById("someId");
      el.style.visibility = "visible";
    }
  });
</script>

adobe.target.registerExtension()

설명:

특정 확장 기능을 등록하는 표준 방법을 제공합니다.

이 함수는 더 이상 지원되지 않으므로 사용해서는 안 됩니다.

2에서 사용이 중단된 함수, 새로운 함수 및 지원되는 at.js 함수에 대한 요약.x

제한 사항 및 콜아웃

다음 제한 사항 및 콜아웃을 알아 두십시오.

전환 추적

전환 추적에 mboxCreate()을 사용하는 고객은 trackEvent()나 getOffer()를 사용해야 합니다.

오퍼 게재

mboxCreate()을 getOffer()나 applyOffer()로 대체하지 않는 고객의 경우 오퍼가 게재되지 않을 수 있습니다.

at.js 2.x ​는 at.js 1.x 다른 페이지에 있습니까?

예. 방문자 프로필은 서로 다른 버전 및 라이브러리를 사용하는 여러 페이지 간에 보존됩니다. 쿠키 형식은 동일합니다.

at.js 2.x ​에서 새 API 사용

at.js 2.x에서는 배달 API라고 하는 새 API를 사용합니다. at.js에서 Target edge server가 올바르면 브라우저의 개발자 도구에 있는 네트워크 탭을 "게재", "로 필터링할 수 있습니다.tt.omtrdc.net," 또는 클라이언트 코드입니다. 또한 Target에서 키-값 쌍 대신 JSON 페이로드를 전송하는 것을 보게 됩니다.

Target 글로벌 mbox가 더 이상 사용되지 않음

at.js 2.x, 더 이상 "target-global-mbox" 네트워크 호출에서 볼 수 있습니다. 대신 " "을(를) 교체했습니다.target-global-mbox" 구문을 " "execute > pageLoad에 전송된 JSON 페이로드에서 " Target 아래에 표시된 서버:

{
  "id": {
    // ...
  },
  "context": {
    "channel": "web",
    // ...
  },
  "execute": {
    "pageLoad": {}
  }
}

기본적으로 글로벌 mbox 개념은 페이지 로드 시 오퍼와 콘텐츠를 검색할지 여부를 Target에서 알 수 있도록 하기 위해 도입되었습니다. 따라서 최신 버전에서는 이 기능을 더욱 명확하게 했습니다.

at.js에서 글로벌 mbox 이름이 문제가 됩니까?

고객은 를 통해 글로벌 mbox 이름을 지정할 수 있습니다. Target > 관리 > 구현 > at.js 설정 편집. 이 설정은 Target Edge Server에서 execute > pageLoad를 Target UI에 나타나는 글로벌 mbox 이름으로 변환하는 데 사용됩니다. 이렇게 변환하면 고객은 계속해서 서버 측 API, 양식 기반 작성기, 프로필 스크립트를 사용할 수 있으며 글로벌 mbox 이름을 사용하여 대상을 만들 수 있습니다. 또한 동일한 글로벌 mbox 이름이 관리 > 시각적 경험 작성기 또한 at.js 1을 사용하는 페이지가 여전히 있는 경우 페이지도 표시합니다.x ​를 참조하십시오.

및

at.js 2.x ​에 대해 글로벌 mbox 자동 만들기 설정을 켜야 합니까?

대부분의 경우, 그렇습니다. 이 설정은 페이지 로드 시 Target Edge Server에 대한 요청을 실행하도록 at.js 2.x ​에 지시합니다. 글로벌 mbox가 execute > pageLoad로 변환되므로 페이지 로드 시 요청을 개시하려면 이 설정이 켜져 있어야 합니다.

Target 글로벌 mbox 이름이 at.js 2.x ​에서 지정되지 않았더라도 기존 VEC 활동이 계속 작동합니까?

예. execute > pageLoad는 target-global-mbox처럼 Target 백엔드에서 처리됩니다.

양식 기반 활동을 target-global-mbox에 타깃팅하는 경우 이러한 활동이 계속 작동합니까?

예. execute > pageLoad는 Target처럼 target-global-mbox Edge Server에서 처리됩니다.

지원되는 at.js 2.x 설정과 지원되지 않는 at.js 2. x 설정

at.js 2.x 에서 도메인 간 추적 지원

도메인 간 추적을 통해 여러 도메인 간에 방문자를 연결할 수 있습니다. 각 도메인에 대해 새 쿠키를 만들어야 하기 때문에 방문자가 도메인에서 도메인으로 이동할 때 추적하기가 어렵습니다. 도메인 간 추적을 수행하기 위해 Target은 타사 쿠키를 사용하여 도메인 간에 방문자를 추적합니다. 이를 통해 다음을 만들 수 있습니다. Target 다음 범위에 걸쳐 수행되는 활동 siteA.com 및 siteB.com 방문자가 고유한 도메인을 탐색할 때도 동일한 경험을 유지합니다. 이 기능은 Target의 타사 및 퍼스트 파티 쿠키 동작과 연결되어 있습니다.

위치 Target, 타사 쿠키가에 저장됩니다. <CLIENTCODE>.tt.omtrdc.net. 자사 쿠키가에 저장됩니다. clientdomain.com. 첫 번째 요청은 mboxSession 및 mboxPC라는 타사 쿠키를 설정하는 HTTP 응답 헤더를 반환하는 반면, 리디렉션 요청이 추가 매개 변수(mboxXDomainCheck=true)를 사용하여 다시 전송됩니다. 브라우저가 타사 쿠키를 수락하면 리디렉션 요청에 해당 쿠키가 포함되고 경험이 반환됩니다. 여기서는 HTTP GET 메서드를 사용하므로 이 워크플로우가 가능합니다.

단, at.js 2.x, HTTP GET은 사용되지 않습니다. 대신 HTTP POST은 at.js 2.x Target를 통해 Edge 서버에 JSON 페이로드를 전송하는데 사용됩니다. HTTP POST을 사용하면 브라우저가 서드파티 쿠키를 지원하는지 여부를 확인하는 리디렉션 요청이 중단됨을 의미합니다. 이것은 HTTP GET 요청은 멱등 트랜잭션이 아니지만 HTTP POST는 비멱등이어서 임의로 반복되면 안 되기 때문입니다. 따라서 at.js 2.x (2.10 이전 버전)은 기본적으로 지원되지 않습니다. at.js 1.x ​는 도메인 간 추적을 위한 기본 지원을 제공합니다.

at.js v2.10 이상에 대해 도메인 간 추적을 사용하려면 다음 중 하나를 수행할 수 있습니다.

at.js v2 버전에 대해 도메인 간 추적을 사용하려면​ x 2.10 이전에는 위의 옵션 #1을 구현(ECID 라이브러리 설치)할 수 있습니다.

글로벌 mbox 자동 만들기가 지원됨

이 설정은 페이지 로드 시 Target Edge Server에 대한 요청을 실행하도록 at.js 2.x ​에 지시합니다. 글로벌 mbox가 execute > pageLoad로 변환되고, Target Edge Server가 이를 해석하므로 고객은 페이지 로드 시 요청을 개시하려면 이 설정을 켜야 합니다.

글로벌 mbox 이름이 지원됨

고객은 를 통해 글로벌 mbox 이름을 지정할 수 있습니다. Target > 관리 > 구현 > 편집. 이 설정은 Target Edge Server에서 execute > pageLoad를 입력된 글로벌 mbox 이름으로 변환하는 데 사용됩니다. 이렇게 변환하면 고객은 계속해서 서버 측 API, 양식 기반 작성기, 프로필 스크립트를 사용할 수 있으며 글로벌 mbox를 타깃팅하는 대상을 만들 수 있습니다.

아래의 at.js 사용자 지정 이벤트는 triggerView()에 적용할 수 있습니까? 아니면 applyOffer()나 applyOffers()에만 적용할 수 있습니까?

at.js 사용자 지정 이벤트는 triggerView()에도 적용할 수 있습니다.

전화하면 적혀있어요 triggerView() { 사용"page" : "true"}, 알림이 Target 를 업데이트하고 노출을 늘립니다. 이렇게 되면 프로필 스크립트도 실행됩니까?

Target 백엔드에 미리 가져오기 호출이 수행되면 프로필 스크립트가 실행됩니다. 그런 다음 영향을 받은 프로필 데이터가 암호화되어 클라이언트측으로 다시 전달됩니다. {"page": "true"}인 triggerView()를 호출하면 암호화된 프로필 데이터와 함께 알림이 전송됩니다. 이때 Target 백엔드가 프로필 데이터를 해독하고 데이터베이스에 저장합니다.

플리커를 관리하기 위해 triggerView()를 호출하기 전에 사전 숨김 코드를 추가해야 합니까?

아니요. triggerView()를 호출하기 전에 사전 숨김(pre-hiding) 코드를 추가할 필요는 없습니다. at.js 2.x에서는 보기가 표시되고 적용되기 전에 사전 숨김 및 플리커(깜박임) 로직을 관리합니다.

at.js 1.x 대상 생성을 위한 매개 변수는 at.js 2에서 지원되지 않습니다.x ​를 사용하는 SPA에서)하면 어떻게 될까요.

다음 at.js 1.x 매개 변수는 아님 at.js 2를 사용할 때 현재 대상 만들기에 대해 지원됩니다.x:

at.js 2.x 가 vst를 사용하여 대상자 만들기를 지원하지 않습니다.* 매개변수

at.js 1.x vst를 사용할 수 있습니다.* 대상을 만들 mbox 매개 변수입니다. 이것은 at.js 1.x mbox 매개 변수를 Target 백엔드. at.js 2로 마이그레이션한 후​ x, at.js 2.x mbox 매개 변수를 다르게 보냅니다.

at.js 호환성

다음 표에서는 다양한 활동 유형, 통합, 기능 및 at.js 함수와의 at.js 2.x 다양한 활동 유형, 통합, 기능 및 at.js 함수와의 호환성.

활동 유형

통합

기능

쿼리 문자열 매개 변수

응답 토큰

at.js 2.x ​는 at.js 1.x ​와 마찬가지로 사용자 지정 이벤트 at-request-succeeded를 사용하여 응답 토큰을 표시합니다. at-request-succeeded 사용자 지정 이벤트를 사용한 코드 예에 대해서는 응답 토큰을 참조하십시오.

at.js 1.x 매개 변수와 at.js 2 X ​의 페이로드 매핑

이 섹션에서는 at.js 1.x ​와 at.js 2.x 간의 매핑에 대해 설명합니다.

매개 변수 매핑을 찾기 전에 이러한 라이브러리 버전에서 사용 중인 엔드포인트가 다음과 같이 변경되었습니다.

또 다른 중요한 차이점은 다음과 같습니다.

다음 섹션에는 at.js 1.x 매개 변수, 설명 및 해당 2.x JSON 페이로드(해당되는 경우):

at_property

(at.js 1.x 매개 변수)

엔터프라이즈 사용자 권한에 사용됩니다.

{
  ....
  "property": {
    "token": "1213213123122313121"
  }
  ....
}

mboxHost

(at.js 1.x 매개 변수)

가 있는 페이지의 도메인 Target 라이브러리가 실행됩니다.

at.js 2.x JSON 페이로드:

{
  "context": {
    "browser": {
       "host": "test.com"
    }
  }
}

webGLRenderer

(at.js 1.x 매개 변수)

브라우저의 WEB GL 렌더러 기능입니다. 장치 탐지 메커니즘에서 방문자의 장치가 데스크탑, iPhone, Android 장치 등인지 판별하는 데 사용됩니다.

at.js 2.x JSON 페이로드:

{
  "context": {
    "browser": {
       "webGLRenderer": "AMD Radeon Pro 560X OpenGL Engine"
    }
  }
}

mboxURL

(at.js 1.x 매개 변수)

페이지 URL입니다.

at.js 2.x JSON 페이로드:

{
  "context": {
    "address": {
       "url": "http://test.com"
    }
  }
}

mboxReferrer

(at.js 1.x 매개 변수)

페이지 레퍼러입니다.

at.js 2.x JSON 페이로드:

{
  "context": {
    "address": {
       "referringUrl": "http://google.com"
    }
  }
}

mbox (the name) equals to global mbox

(at.js 1.x 매개 변수)

배달 API에는 더 이상 글로벌 mbox 개념이 없습니다. JSON 페이로드에서 execute > pageLoad를 사용해야 합니다.

at.js 2.x JSON 페이로드:

{
  "execute": {
    "pageLoad": {
       "parameters": ....
       "profileParameters": ...
       .....
    }
  }
}

mbox (the name) is not equal to global mbox

(at.js 1.x 매개 변수)

mbox 이름을 사용하려면 execute > mboxes에 전달합니다. mbox에는 인덱스와 이름이 필요합니다.

at.js 2.x JSON 페이로드:

{
  "execute": {
    "mboxes": [{
       "index": 0,
       "name": "some-mbox",
       "parameters": ....
       "profileParameters": ...
       .....
    }]
  }
}

mboxId

(at.js 1.x 매개 변수)

더 이상 사용되지 않습니다.

mboxCount

(at.js 1.x 매개 변수)

더 이상 사용되지 않습니다.

mboxRid

(at.js 1.x 매개 변수)

디버깅을 지원하기 위해 다운스트림 시스템에서 사용한 요청 ID입니다.

at.js 2.x JSON 페이로드:

{
  "requestId": "2412234442342"
  ....
}

mboxTime

(at.js 1.x 매개 변수)

더 이상 사용되지 않습니다.

mboxSession

(at.js 1.x 매개 변수)

세션 ID가 배달 API 엔드포인트에 쿼리 문자열 매개 변수(sessionId)로 전송됩니다.

mboxPC

(at.js 1.x 매개 변수)

TNT ID가 id > tntId에 전달됩니다.

at.js 2.x JSON 페이로드:

{
  "id": {
    "tntId": "ca5ddd7e33504c58b70d45d0368bcc70.21_3"
  }
  ....
}

mboxMCGVID

(at.js 1.x 매개 변수)

Marketing Cloud 방문자 ID가 id > marketingCloudVisitorId에 전달됩니다.

at.js 2.x JSON 페이로드:

{
  "id": {
    "marketingCloudVisitorId": "797110122341429343505"
  }
  ....
}

vst.aaaa.id 및 vst.aaaa.authState

(at.js 1.x 매개 변수)

고객 ID를 id > customerIds에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "id": {
    "customerIds": [{
       "id": "1232131",
       "integrationCode": "aaaa",
       "authenticatedState": "....."
     }]
  }
  ....
}

mbox3rdPartyId

(at.js 1.x 매개 변수)

다른 항목을 연결하는 데 사용되는 고객 타사 ID Target ID

at.js 2.x JSON 페이로드:

{
  "id": {
    "thirdPartyId": "1232312323123"
  }
  ....
}

mboxMCSDID

(at.js 1.x 매개 변수)

SDID(보충 데이터 ID)라고도 합니다. experienceCloud > analytics > supplementalDataId에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "experienceCloud": {
    "analytics": {
      "supplementalDataId": "1212321132123131"
    }
  }
  ....
}

vst.trk

(at.js 1.x 매개 변수)

Analytics 추적 서버입니다. ​ experienceCloud > analytics > trackingServer에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "experienceCloud": {
    "analytics": {
      "trackingServer": "analytics.test.com"
    }
  }
  ....
}

vst.trks

(at.js 1.x 매개 변수)

Analytics 추적 서버가 안전합니다. experienceCloud > analytics > trackingServerSecure에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "experienceCloud": {
    "analytics": {
      "trackingServerSecure": "secure-analytics.test.com"
    }
  }
  ....
}

mboxMCGLH

(at.js 1.x 매개 변수)

Audience Manager 위치 힌트입니다. experienceCloud > audienceManager > locationHint에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "experienceCloud": {
    "audienceManager": {
      "locationHint": 9
    }
  }
  ....
}

mboxAAMB

(at.js 1.x 매개 변수)

Audience Manager Blob입니다. experienceCloud > audienceManager > blob에 전달해야 합니다.

at.js 2.x JSON 페이로드:

{
  "experienceCloud": {
    "audienceManager": {
      "blob": "2142342343242342"
    }
  }
  ....
}

mboxVersion

(at.js 1.x 매개 변수)

버전은 버전 매개 변수를 통해 쿼리 문자열 매개 변수로 전송됩니다.

교육 비디오: at.js 2.x 아키텍처 다이어그램

at.js 2.x Adobe 향상 TargetSPA에 대한 의 지원 및 다른 Experience Cloud 솔루션과 통합됩니다. 다음 비디오에서는 모든 것이 어떻게 합쳐지는지 설명합니다.

다음을 참조하십시오 at.js 2.x 작품 추가 정보.