Adobe 클라이언트 데이터 레이어 개요
Adobe 클라이언트 데이터 레이어(ACDL)는 웹 사이트에 페이지의 모든 스크립트에 데이터와 이벤트를 노출하는 표준 방법을 제공하는 소규모 오픈 소스 JavaScript 라이브러리입니다. 사이트 코드는 데이터 및 이벤트를 adobeDataLayer(이)라는 JavaScript 배열로 푸시합니다. 태그 규칙, 웹 SDK 및 기타 스크립트는 ACDL 스크립트가 로드되는 시기에 관계없이 해당 데이터를 읽고 해당 이벤트를 수신합니다.
이 안내서에서는 ACDL 라이브러리에 대해 설명합니다. 데이터 수집 UI에서 ACDL을 사용하려면 Adobe 클라이언트 데이터 레이어 태그 확장을 참조하십시오.
데이터 레이어를 사용하는 이유 why
데이터 레이어가 없으면 태그는 종종 DOM의 텍스트 또는 URL의 매개 변수와 같은 값을 페이지에서 스크랩합니다. 이러한 구현은 페이지 디자인이 변경될 때 중단되며, 페이지가 표시하는 내용만 수집할 수 있습니다. 데이터 계층은 두 개의 책임을 분리합니다.
- 사이트 코드에서는 페이지 이름, 방문자가 본 제품 또는 방문자가 제출한 양식 등 페이지에서 발생하는 상황을 설명합니다.
- 태그 및 기타 스크립트는 Adobe에 전송할 데이터 및 언제 전송할지 등 해당 정보로 수행할 작업을 결정합니다.
ACDL은 이 패턴에 다음 기능을 추가합니다.
- 비동기 로드 중. 사이트 코드는 ACDL 스크립트가 로드되기 전에 데이터를 푸시할 수 있습니다. ACDL은 로드될 때 모든 것을 순서대로 처리하므로 데이터를 손실하지 않고
async또는defer(으)로 로드할 수 있습니다. - 이벤트 및 리스너. 스크립트는 수신기가 추가되기 전에 발생한 이벤트를 포함하여 명명된 이벤트 또는 데이터 변경 내용을 수신할 수 있습니다.
- 계산된 상태입니다. ACDL은 모든 데이터 푸시를 모든 스크립트가 언제든지 읽을 수 있는 단일 개체에 병합합니다.
- 기록. 배열은 푸시된 데이터 및 이벤트 레코드를 유지하므로 구현을 디버깅하는 데 도움이 됩니다.
작동 방식 how-it-works
ACDL은 일반 JavaScript 어레이 주위에 구축됩니다.
window.adobeDataLayer배열이 아직 없는 경우 페이지에 만들어집니다.- 사이트 코드는
push()을(를) 사용하여 항목을 배열에 추가합니다. 항목은 데이터 객체, 이벤트 객체 또는 함수일 수 있습니다. ACDL이 로드되기 전에 이러한 항목은 대기열과 같이 배열에서 대기합니다. - ACDL 스크립트가 로드되면
getState()및addEventListener()과 같은 메서드를 배열에 추가하고push()을(를) 자체 버전으로 바꿉니다. 그런 다음 푸시된 순서대로 큐에 있는 모든 항목을 처리합니다. - 그때부터 ACDL은 새 항목이 푸시되는 즉시 각 항목을 처리합니다. 데이터를 계산된 상태로 병합하고 이벤트 리스너와(과) 일치하는 호출을 하며 데이터 및 이벤트 개체를 기록(으)로 배열에 유지합니다.
// Site code: describe what happened on the page
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
page: { title: "Home", language: "en" }
});
window.adobeDataLayer.push({ event: "page view" });
// Another script: react to what happened
window.adobeDataLayer.push(function(dl) {
dl.addEventListener("page view", function(event) {
console.log("Page title:", dl.getState("page.title"));
});
});
수신기가 기본 all scope을(를) 사용하므로 해당 이벤트가 먼저 푸시되었더라도 page view 이벤트에 대해 실행됩니다.
ACDL은 페이지 내에서 데이터를 저장하고 배포합니다. 아무 곳에도 데이터가 전송되지 않습니다. 데이터를 Adobe으로 보내려면 태그 또는 웹 SDK을 사용하여 데이터 레이어에서 읽습니다. 웹 SDK과 함께 Adobe 클라이언트 데이터 레이어 데이터 보내기를 참조하십시오.
ACDL이 다른 Adobe 도구와 작동하는 방식 adobe-tools
데이터 형식 data-format
ACDL에는 특정 데이터 구조가 필요하지 않습니다. 일반 객체를 푸시할 수 있으며 ACDL은 이를 계산된 상태로 병합합니다. 많은 스크립트와 팀이 동일한 데이터를 사용하므로 다음 방법을 고려하십시오.
- 데이터 레이어에 쓰기 전에 구조에 동의하고 데이터를 푸시하거나 읽는 모든 사람을 위해 이를 문서화합니다.
- 문자열, 숫자, 부울, 일반 개체 및 배열과 같은 JSON 호환 값을 사용합니다.
Date개체 및 함수와 같은 다른 값은 병합되지 않습니다. 값 형식을 참조하세요. - 대상을 고려하십시오. 데이터를 Adobe Experience Platform으로 보내는 경우 쉽게 매핑할 수 있도록 XDM 스키마와 비슷하게 구조화하거나, 고유한 구조를 유지하고 데이터 수집을 위한 데이터 준비를 사용하여 데이터스트림에 매핑할 수 있습니다.
브라우저 요구 사항 browser-requirements
ACDL 3.x에서는 브라우저의 structuredClone() 함수와 최신 JavaScript 구문을 사용합니다. 다음 브라우저 중 하나 이상이 필요합니다.
- Chrome 98
- Edge 98
- Firefox 94
- Safari 15.4
ACDL 2.x는 브라우저 요구 사항이 더 낮습니다. 버전 간의 차이점에 대해서는 2.x에서 3.x로 업그레이드를 참조하십시오.
버전 및 소스 코드 source
ACDL은 Apache 라이센스 2.0에 따른 오픈 소스입니다.
- GitHub의 Source 코드 및 문제:
adobe/adobe-client-data-layer - npm의 패키지:
@adobe/adobe-client-data-layer - 릴리스 정보: GitHub 릴리스
페이지에서 실행 중인 버전을 확인하려면 브라우저의 콘솔에서 version 속성을 읽으십시오.
adobeDataLayer.version