데이터 레이어 만들기

데이터 계층은 Analytics 구현에서 수집하는 데이터(예: 페이지 이름, 제품 세부 정보 및 주문 ID)를 표시하는 사이트의 JavaScript 구조입니다. 사이트 코드는 데이터 레이어에 쓰고 구현은 데이터 레이어에서 읽어서 Analytics 변수를 설정합니다. 구현이 페이지의 HTML에 따라 달라지지 않으므로 데이터 수집을 중단하지 않고 사이트를 다시 디자인할 수 있습니다.

사전 요구 사항

솔루션 디자인 문서를 만듭니다: 조직에서 추적 요구 사항을 충족시키는 것이 중요합니다. 조직의 개발 팀에 접촉하기 전에 솔루션 디자인 문서를 준비했는지 확인하십시오. 솔루션 디자인에 필요한 데이터는 데이터 계층에 포함된 데이터를 결정합니다.

데이터 레이어 사양 선택 specifications

Adobe에서는 새 구현 또는 재구성된 구현을 위해 ACDL(Adobe 클라이언트 데이터 레이어)을(를) 권장합니다. ACDL은 데이터와 이벤트를 전역 adobeDataLayer 배열로 푸시할 수 있는 표준 방법을 사이트에 제공하는 오픈 소스 JavaScript 라이브러리입니다. 태그, 웹 SDK 및 AppMeasurement을 모두 읽을 수 있으며 Adobe Experience Manager 핵심 구성 요소가 자동으로 태그를 채울 수 있습니다.

조직은 전역 digitalData 개체에 데이터를 저장하는 CEDL(Customer Experience Digital Data Layer) 또는 사용자 지정 사양과 같은 다른 사양을 자유롭게 사용할 수 있습니다. 가장 중요한 것은 조직이 요구 사항을 충족하는 하나의 세부 항목에 맞추는 것입니다.

다음 표에서는 ACDL을 CEDL과 같은 객체 기반 데이터 레이어와 비교합니다.

예제 데이터 레이어 example

ACDL에는 특정 데이터 구조가 필요하지 않습니다. 솔루션 디자인 문서 주위에 구조를 디자인하고 데이터 레이어에 쓰거나 이 문서에서 읽는 모든 사용자를 위해 구조를 문서화합니다. 이 안내서의 예제에서는 다음 구조를 사용합니다.

페이지가 로드되면 사이트 코드가 페이지의 데이터와 페이지 보기 이벤트를 푸시합니다.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({
  event: "page view",
  page: {
    name: "Home",
    section: "Products",
    url: "https://example.com/products",
    referrer: "https://example.com/"
  }
});

방문자가 구매를 완료하면 사이트 코드가 주문 세부 사항 및 구매 이벤트를 푸시합니다.

window.adobeDataLayer.push({
  event: "purchase",
  transaction: { id: "ABC123" },
  products: [
    { name: "Example product", category: "Example category", quantity: 1, price: 25 }
  ]
});

ACDL은 모든 푸시를 구현에서 읽는 계산된 상태라는 단일 개체에 병합합니다. 이벤트 개체는 구현 시 이를 읽을 시기를 알려줍니다. 데이터 및 계산된 상태 및 이벤트를 참조하세요.

워크플로 workflow

데이터 레이어를 사용하여 Adobe Analytics를 구현하는 절차는 일반적으로 다음과 같습니다.

데이터 레이어를 Adobe Analytics에 연결 connect

다음 표에서는 각 구현 방법이 Adobe 클라이언트 데이터 레이어에서 읽히는 방식을 보여 줍니다.

AppMeasurement으로 데이터 레이어 읽기 appmeasurement

ACDL은 라이브러리가 로드될 때 getState() 메서드를 adobeDataLayer 배열에 추가합니다. 라이브러리가 로드되었는지, 계산된 상태가 최신 데이터를 포함하는지 확인하려면 이벤트 리스너 내에서 값을 읽습니다.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
  dl.addEventListener("page view", function(event) {
    s.pageName = dl.getState("page.name");
    s.channel = dl.getState("page.section");
    s.t();
  });
});

리스너가 추가되기 전에 푸시된 이벤트를 포함하여 각 page view 이벤트에 대해 리스너가 한 번 실행됩니다. 이 안내서의 변수 페이지(예: pageName)는 getState()을(를) 사용하여 개별 값을 읽는 방법을 보여 줍니다. 이러한 예제를 이러한 수신기 내에서 사용하거나 데이터 레이어 푸시 이벤트가 트리거하는 Analytics 확장 규칙의 사용자 지정 코드 편집기에서 사용합니다.

구현이 단일 페이지 애플리케이션에서와 같이 페이지당 두 개 이상의 히트를 전송하는 경우 clearVars()을(를) 사용하여 한 히트의 값이 다음 히트로 지속되지 않도록 하십시오.

다음 단계