Adobe 클라이언트 데이터 레이어 설치

Adobe 클라이언트 데이터 레이어(ACDL) 설치에는 다음 두 가지 부분이 포함됩니다.

데이터 레이어 배열 만들기 initialize

데이터 레이어로 푸시하는 코드 앞에 다음 줄을 추가합니다.

window.adobeDataLayer = window.adobeDataLayer || [];

이 행은 존재하지 않는 경우 배열을 생성하고 존재하는 경우 배열을 유지합니다. 첫 번째 스크립트뿐만 아니라 데이터 레이어로 푸시하는 모든 스크립트에 이를 포함합니다. 스크립트는 순서에 관계없이 로드될 수 있으며, 줄을 사용하면 각 스크립트가 덮어쓰지 않고 동일한 배열로 푸시되도록 할 수 있습니다.

이 줄 다음에 push()을(를) 사용하여 데이터, 이벤트 및 함수를 푸시합니다.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ page: { title: "Home" } });

ACDL이 로드될 때까지 push()은(는) 표준 JavaScript 배열 메서드이며 배열이 큐로 작동합니다. ACDL이 로드되면 대기 중인 항목을 순서대로 처리합니다. 큐 및 기록을 참조하세요.

설치 방법 선택 methods

다음 방법 중 하나를 사용하여 각 페이지에서 ACDL을 로드합니다.

태그 확장 tags

Adobe 클라이언트 데이터 레이어 태그 확장은(는) 페이지가 이미 로드하는 경우가 아니면 태그 라이브러리가 로드될 때 ACDL을 로드합니다. 페이지 템플릿에 라이브러리를 추가할 필요는 없습니다. 사이트 코드는 데이터 레이어 배열을 만들고 데이터를 푸시해야 합니다. Adobe 클라이언트 데이터 레이어 확장 구성을 참조하십시오.

스크립트 태그 script

npm(npm 참조)에서 라이브러리를 다운로드하고 사이트의 adobe-client-data-layer.min.js 호스트를 다운로드합니다. 그런 다음 async 및 defer 특성을 모두 사용하여 각 페이지의 <head>에 로드합니다.

<script src="/js/adobe-client-data-layer.min.js" async defer></script>

async을(를) 지원하는 브라우저에서 페이지를 차단하지 않고 스크립트가 다운로드되는 즉시 스크립트를 실행합니다. ACDL은 로드되기 전에 대기열에 추가된 모든 항목을 처리하므로 다른 스크립트가 데이터 레이어에 먼저 푸시되더라도 데이터는 안전합니다.

다음 예제는 ACDL이 로드되기 전에 인라인 스크립트와 외부 스크립트가 모두 데이터 레이어로 푸시되는 페이지를 보여 줍니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My page</title>
    <script src="/js/myscripts.js" defer></script>
    <script>
      window.adobeDataLayer = window.adobeDataLayer || [];
      window.adobeDataLayer.push({ page: { title: "My page" } });
    </script>
    <script src="/js/adobe-client-data-layer.min.js" async defer></script>
  </head>
  <body>
    <h1>My page</h1>
  </body>
</html>

외부 스크립트 /js/myscripts.js도 푸시하기 전에 배열을 만듭니다.

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push({ user: { loggedIn: false } });

unpkg 및 jsDelivr과(와) 같은 공개 NPM CDN도 라이브러리 파일을 제공합니다. 서드파티 CDN에서 로드하는 경우 모르는 사이에 파일이 변경되지 않도록 URL에 정확한 버전을 고정합니다.

npm npm

패키지를 설치합니다.

npm install @adobe/adobe-client-data-layer

패키지에 dist/adobe-client-data-layer.min.js에 브라우저 스크립트가 있습니다. 해당 파일을 사이트로 복사하고 스크립트 태그를 사용하여 ​로드하거나 번들 JavaScript에서 파일을 가져옵니다.

import "@adobe/adobe-client-data-layer/dist/adobe-client-data-layer.min.js";

스크립트는 아무 것도 내보내지 않습니다. 실행하면 window.adobeDataLayer이(가) 설정됩니다.

Adobe Experience Manager aem

AEM 핵심 구성 요소 2.9.0 이상에는 클라이언트 라이브러리로 ACDL이 포함되어 있으며 핵심 구성 요소는 각 구성 요소에 대한 데이터 및 이벤트를 푸시합니다. 핵심 구성 요소와 함께 Adobe 클라이언트 데이터 레이어 사용을 참조하십시오.

AEM 사이트에서도 ACDL 태그 확장을 사용하는 경우 AEM만 라이브러리를 로드하도록 확장의 없는 경우 Adobe 클라이언트 데이터 레이어 라이브러리 로드 옵션을 끕니다. Adobe 클라이언트 데이터 레이어 확장 구성을 참조하십시오.

라이브러리를 한 번만 로드 load-once

페이지당 한 번 ACDL을 로드합니다. 두 번째 복사본이 로드되면 브라우저 콘솔에 다음 경고를 기록하며 데이터 레이어를 변경하지 않습니다.

Adobe Client Data Layer v3.0.1 has already been imported/initialized on this page. You may be erroneously loading it a second time.

첫 번째 사본이 계속 실행되므로 데이터와 리스너가 계속 작동합니다. 중복 항목을 제거하여 추가 다운로드를 방지합니다. 페이지 템플릿과 태그 확장이 모두 라이브러리를 로드하는 경우 중복이 일반적입니다.

설치 확인 verify

ACDL을 로드하는 페이지에서 브라우저의 개발자 콘솔을 열고 다음 명령을 실행합니다.

adobeDataLayer.version     // For example, "3.0.1"
adobeDataLayer.getState()  // The computed state of everything pushed so far

adobeDataLayer.version이(가) undefined인 경우 ACDL이 페이지에 로드되지 않았습니다. 문제 해결을 참조하세요.

2.x에서 3.x로 업그레이드 upgrade

Adobe Experience Manager 핵심 구성 요소는 기본적으로 ACDL 2.x를 로드하므로 많은 사이트가 여전히 2.x를 실행합니다. 3.x로 업그레이드하기 전에 다음 변경 사항을 검토하십시오. 모든 릴리스에 대해서는 GitHub의 릴리스 정보를 참조하세요.

ACDL 3.0은 내장 유틸리티 라이브러리를 내장 브라우저 기능으로 대체했습니다. 파일이 훨씬 작지만 요구 사항 및 일부 병합 동작이 변경되었습니다.

업그레이드 후 구현, 특히 배열을 푸시하거나 값의 유형을 변경하는 코드를 테스트합니다.