Show Menu
화제×

Adobe Experience Manager ContextHub 도구

AEM ContextHub 도구를 사용해 Dynamic Tag Management와 Adobe Experience Manager(AEM) ContextHub(AEM의 데이터 레이어 버전)에 통합합니다. 웹사이트에서 AEM을 사용하지 않는 경우에도 이 도구를 사용해 DTM을 데이터 레이어에 통합할 수 있습니다.
DTM 고객은 종종 데이터 요소를 사용하여 웹 사이트의 데이터 레이어에 매핑합니다. 예를 들어, 데이터 레이어에는 사용자가 특정 제품을 보고 있거나 장바구니에 항목을 배치한 정보가 포함될 수 있습니다. DTM은 다양한 방법으로 규칙 조건 및 작업에 이 정보를 사용할 수 있습니다. 여기에는 보고용으로 Analytics로 데이터를 전송하거나 사용자를 위해 사용자 지정된 컨텐츠를 표시하는 Target이 포함됩니다.
AEM ContextHub 도구는 데이터 레이어와 관련된 많은 문제를 해결합니다. 일부 데이터 레이어는 페이지 맨 위에 로드되지 않습니다. 다른 데이터 레이어는 동적이거나 비동기적이며 페이지가 변경될 때마다 자주 변경됩니다. 이전에는 DTM이 데이터를 효과적으로 전송하거나 작업을 트리거하는 데 문제가 있었습니다.
AEM ContextHub 도구를 사용하면 데이터 레이어가 변경되었는지, 페이지 상단 외부에 로드되거나, 페이지가 변경될 때 수정되었는지 확인하기 위해 자주 확인하는 사용자 지정 코드를 작성할 필요가 없습니다.
예를 들어 고객이 장바구니에 품목을 넣은 다음 해당 품목을 제거한다고 가정합니다. 데이터 레이어가 변경될 때 페이지가 새로 고쳐지지 않으면 DTM에서 사용자 지정 코드를 추가하지 않으면 변경 내용을 인식하지 못합니다. AEM ContextHub 도구는 매 초마다 변경 사항이 있는지 확인하는 폴링 엔진을 포함합니다.
이제 DTM이 데이터 레이어를 통해 데이터 요소를 미리 채울 수 있으므로 사용자는 데이터 요소 값과 같이 이전에 릴리스된 조건과 함께 AEM ContextHub 데이터 요소를 사용할 수도 있습니다. 이를 통해 사용자는 사용자 상호 작용으로 인해 데이터 레이어가 변경된 경우 페이지 로드 시 데이터 레이어 값을 관리하거나 데이터 요소 값 조건을 데이터 요소 변경 이벤트와 결합할 수 있습니다.
이 도구를 구성할 때 기본 설정을 사용하여 AEM ContextHub와 통합하거나 모든 웹 사이트에서 작동하도록 구조를 사용자 지정할 수 있습니다.
  1. < <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub 을 클릭합니다.
  2. 도구에 대해 설명형 이름을 지정합니다.
    이 이름은 아래의 Overview 탭에 표시됩니다 Installed Tools.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. 다음 필드를 채웁니다.
    요소
    설명
    기본 ContextHub 데이터 레이어 사용
    AEM ContextHub 형식을 사용합니다. 이 옵션을 선택하면 DTM이 이 통합에 대한 기본 ContextHub 스키마를 참조합니다. ContextHub 스키마를 변경하거나 다른 데이터 레이어를 사용하려면 사용자 지정 옵션을 사용하십시오.
    ContextHub 데이터 레이어 사용자 지정
    AEM을 사용하지 않더라도 모든 웹 사이트의 데이터 레이어 구조에 매핑되는 사용자 정의 형식을 사용하십시오. 이 옵션을 사용하면 데이터 레이어 스키마를 편집할 수 있습니다. 기본적으로 편집 창은 기본 ContextHub 데이터 레이어로 채워집니다. 여기에서 변경 작업을 수행하거나 코드를 완전히 대체할 수 있습니다.
    편집기 열기
    ContextHub 데이터 레이어 사용자 지정 옵션을 선택하는 경우 편집기를 사용하여 사용자 지정 코드를 삽입할 수 있습니다.
    메모 추가
    이 구현과 관련된 메모를 추가합니다.
  5. Save Changes ​를 클릭합니다.

ContextHub 도구를 사용한 데이터 레이어 관리

DTM(Dynamic Tag Management) AEM ContextHub 도구를 ContextHub 및 일반 데이터 계층 구현 모두에 사용할 수 있습니다. ContextHub 데이터 계층 스키마는 도구에 기본적으로 로드되며 Adobe Experience Manager (AEM) ContextHub 스토어를 통한 편리한 통합을 제공합니다. 기본 ContextHub 구현 및 사용자 지정 데이터 계층 구조에 대한 예가 제공됩니다.

전제 조건

ContextHub 도구를 사용하려면 다음 전제 조건을 충족해야 합니다.
  • 웹 사이트의 기존 ContextHub 또는 Javascript 개체 데이터 레이어입니다.
  • 웹 사이트에서 사용 중인 데이터 레이어를 적절히 정의하는 JSON 스키마.
  • 웹 사이트에서 사용 중인 활성 DTM 웹 속성입니다.

AEM ContextHub 도구 구성 요소

AEM ContextHub 도구는 DTM에 두 가지 기능을 추가합니다.
  • 데이터 레이어 정의
  • AEM ContextHub 데이터 레이어 유형
또한 데이터 레이어 모니터링을 용이하게 하기 위해 새로운 이벤트 유형이 추가되었습니다 dataelementchanged . 이 이벤트 유형은 AEM ContextHub 도구와 독립적으로 사용할 수 있습니다.
각 기능 영역은 아래 두 예에서 설명한 구성 단계에 해당합니다.

데이터 요소 모니터링

dataelementchanged 이벤트 유형은 페이지 보기 동안 특정 데이터 요소 값에 발생하는 모든 변경을 모니터링합니다. 이 이벤트 유형을 사용할 때는 다음 관찰을 명시해야 합니다.
  1. 데이터 요소는 간단한 Javascript 값에 매핑해야 합니다. 데이터 요소 사용자 지정 스크립트에서 반환되는 배열 및 개체와 같은 복잡한 값이 올바르게 작동하지 않습니다. 쿠키, CSS 선택기 및 URL 매개 변수도 예상치 못한 결과를 생성하므로 전혀 작동하지 않을 수 있습니다. 문자열 및 정수와 같은 단순 값은 잘 작동합니다.
  2. 단일 페이지에서 참조되는 dataelementchanged 이벤트 유형의 수에 제한이 없습니다. 모니터링은 효율적이지만 평가의 개수가 많으면 페이지 성능에 영향을 줄 수 있습니다.
  3. 이벤트 유형은 DOM 기반 모니터링 시스템이므로 현재 페이지 보기 내에서만 작동합니다. dataelementchanged
  4. 데이터 요소 모니터는 값에 대한 투표를 모니터링합니다.

ContextHub 데이터 레이어 기본 예

구성 내에서 기본 ContextHub 데이터 레이어를 참조하고 사용하는 AEM ContextHub 도구 Dynamic Tag Management 사용의 예.
ContextHub 데이터 계층은 테스트 Adobe Experience Manager (AEM) 웹 사이트에 로드되지만, ContextHub를 AEM과 독립적으로 사용할 수 있습니다. ContextHub를 AEM과 독립적으로 사용하려면 Adobe 담당자에게 문의하십시오.
모든 ContextHub 스토어는 브라우저 콘솔에서 참조할 수 있습니다.
DTM 데이터 레이어 모니터는 다른 DTM 기능보다 먼저 시작되므로 가능한 DTM을 통해 데이터 레이어를 배포하지 않습니다. 대신 서버가 생성한 데이터 레이어에 따라 달라집니다. 그렇지 않으면 특정 데이터 레이어 값을 사용할 수 없기 때문에 Javascript 경고가 발생할 수 있습니다.

데이터 레이어 정의

AEM ContextHub 도구를 구성하는 첫 번째 단계는 웹 속성에 추가하는 것입니다.
현재는 DTM 웹 속성당 AEM ContextHub 도구를 하나만 사용할 수 있습니다.
  1. < <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub 을 클릭합니다.
  2. 도구에 대해 설명형 이름을 지정합니다.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. 표준 ContextHub 저장소 Use Default ContextHub Data Layer 를 활용하려면 선택합니다.
    또는
    스키마 Customize ContextHub Data Layer 를 수정하려면 선택합니다. 구현에서 기본이 아닌 ContextHub 데이터 레이어를 사용하고 있는 경우 사용자 지정 옵션을 사용해야 합니다.
    기본 데이터 레이어 루트는 모든 ContextHub 저장소에 대한 액세스를 가능하게 합니다. ContextHub 저장소의 동적 특성을 고려할 때, 일반 데이터 레이어 접근 방식으로 사용되는 간단한 Javascript 개체 참조에서는 사용할 수 없는 추가 기능이 이 데이터 레이어에서 사용할 수 있습니다.
  5. (조건부) 사용자 지정 데이터 레이어를 사용하려면 을 클릭하여 데이터 레이어 스키마 정의 Open Editor 를 확인합니다. 사용자 지정 데이터 레이어가 ContextHub 스키마를 수정하는 경우 필드에 "ContextHub"를 추가해야 Data Layer Root 합니다.
    기본 ContextHub 스키마가 편집기에서 채워집니다.
    1. 사이트 데이터 레이어 스키마와 일치하도록 필요에 따라 스키마를 수정합니다.
    2. 스키마 Save and Close 를 저장하고 편집기를 닫으려면 을 클릭합니다.
  6. Save Changes ​를 클릭합니다.

데이터 레이어 데이터 요소 만들기

  1. 웹 속성에서 Rules 탭을 클릭한 다음 왼쪽 메뉴 Data Elements 에서 을 클릭합니다.
  2. Create New Data Element ​를 클릭합니다.
  3. 데이터 요소의 이름을 지정합니다. 이 예에서 데이터 요소의 이름을 "total_price"로 지정합니다.
  4. 드롭다운 Type 목록에서 선택합니다 AEM ContextHub .
    AEM ContextHub 도구의 이름은 "소스"에서 채워지지만 현재 버전에서는 하나의 AEM ContextHub 도구만 정의할 수 있습니다.
  5. 개체 선택기에서 경로를 선택하여 데이터 요소를 데이터 레이어에 매핑합니다.
    이 예에서 개체를 cart.totalPriceFloat 선택합니다.
  6. Save Data Element ​를 클릭합니다.

데이터 요소 변경 이벤트 유형을 사용하는 이벤트 기반 규칙 만들기

  1. 웹 속성에서 Rules 탭을 클릭한 다음 왼쪽 메뉴 Event Based Rules 에서 을 클릭합니다.
  2. Create New Rule ​를 클릭합니다.
  3. 규칙 이름을 지정합니다. 이 예에서 규칙 이름을 "cart_total_update"로 지정합니다.
  4. 조건 섹션을 확장합니다.
  5. 드롭다운 Event Type 목록에서 선택합니다 dataelementchanged .
  6. 이전 섹션에서 만든 데이터 요소를 선택합니다(total_price).
  7. 아래의 Rule Conditions ​드롭다운 목록 Data Element Value 에서 선택한 다음 을 클릭합니다 Add Criteria .
  8. 이전 섹션(total_price)에서 생성된 데이터 요소를 선택하고 규칙을 실행할 값을 지정합니다.
    이 예에서 정규 표현식은 50보다 크거나 같은 것을 평가하는 데 사용됩니다. ^([5-9]\d|[1-9]\d{2,})$
    데이터 요소 값을 이러한 방식으로 사용하는 경우 데이터 요소 설정을 일치에서 고려해야 합니다. 예를 들어, 데이터 요소 설정에서 Force Lowercase Value 옵션을 선택하면 평가하기 전에 값이 모두 소문자로 변환됩니다. Javascript는 대/소문자를 구분하는 "test"가 "Test"와 동일하지 않으며 조건이 예상대로 실행되지 않습니다.
  9. Expand the Javascript / Third Party Tags section.
  10. Add New Script ​를 클릭합니다.
  11. 규칙이 실행될 경우 알림을 제공하는 비순차적 Javascript를 추가합니다. 규칙 이름을 "big_money_alert"로 지정한 다음 다음 예와 유사한 경고 스크립트를 추가합니다.
    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);
  12. Save Code ​클릭한 다음 을 클릭합니다 Save Rule .

구현의 유효성 검사

위의 웹 속성을 실행하는 DTM 지원 웹 사이트에서 구현의 유효성을 확인합니다.
  • 개발자 콘솔에서 데이터 레이어()가 있는지 ContextHub 확인합니다.
  • 모니터링 중인 데이터 레이어 개체를 위의 조건과 일치하지 않는 값으로 변경합니다. ContextHub.setItem('/store/cart/totalPriceFloat','5');
  • 모니터링되는 데이터 레이어 개체를 위의 조건에 일치하는 값으로 변경합니다. ContextHub.setItem('/store/cart/totalPriceFloat','52');
  • 예제 구현에서 경고 상자가 나타나야 합니다.
DTM 디버깅이 켜져 있으면 실패한 평가가 콘솔에 표시됩니다.

사용자 정의 데이터 레이어 예

구성 내에서 사용자 지정 비 ContextHub 데이터 레이어를 참조하고 사용하는 AEM ContextHub 도구 Dynamic Tag Management 사용의 예.
예제 데이터 레이어( _dl )는 DTM 포함 코드가 참조되기 전에 페이지의 섹션 <head/> 에 Javascript 개체 정의로 테스트 웹 페이지에 로드됩니다.
<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

DTM 데이터 레이어 모니터(아래 참조)는 다른 DTM 기능보다 먼저 시작되므로 예제는 DTM을 통해 데이터 레이어를 배포하지 않습니다. 그렇지 않으면 특정 데이터 레이어 값을 사용할 수 없기 때문에 Javascript 경고가 발생할 수 있습니다.

데이터 레이어 정의

AEM ContextHub 도구를 구성하는 첫 번째 단계는 웹 속성에 추가하는 것입니다.
현재는 DTM 웹 속성당 AEM ContextHub 도구를 하나만 사용할 수 있습니다.
  1. < <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub 을 클릭합니다.
  2. 도구에 대해 설명형 이름을 지정합니다.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. 스키마 Customize ContextHub Data Layer 를 수정하려면 선택합니다.
    ContextHub가 아닌 데이터 레이어의 경우 루트 Javascript 개체 이름을 Data Layer Root 필드에 추가해야 합니다. 이 섹션의 일반 예에서 _dl 정의가 사용됩니다.
  5. 데이터 레이어 스키마 정의 Open Editor 를 보려면 을 클릭합니다.
    기본적으로 기본 ContextHub 스키마가 편집기에서 채워집니다.
  6. 기본 스키마를 삭제하고 사이트 데이터 레이어 스키마에 붙여 넣습니다.
    다음 샘플 비-ContextHub 스키마가 일반 예제에서 사용됩니다.
    { 
      "$schema": "https://json-schema.org/draft-04/schema#", 
      "type": "object", 
      "properties": { 
        "page": { 
          "type": "object", 
          "properties": { 
            "name": { 
              "type": "string" 
            }, 
            "quantity": { 
              "type": "number" 
            }, 
            "friend": { 
              "type": "string" 
            } 
          }, 
          "required": [ 
            "name", 
            "quantity", 
            "friend" 
          ] 
        } 
       }, 
      "required": [ 
        "page" 
      ] 
    } 
    
    
  7. 스키마 Save and Close 를 저장하고 편집기를 닫은 다음 을 클릭합니다 Save Changes .

데이터 레이어 데이터 요소 만들기

  1. 웹 속성에서 Rules 탭을 클릭한 다음 왼쪽 메뉴 Data Elements 에서 을 클릭합니다.
  2. Create New Data Element ​를 클릭합니다.
  3. 데이터 요소의 이름을 지정합니다. 이 예에서 데이터 요소의 이름을 "my_friend"로 지정합니다.
  4. 드롭다운 Type 목록에서 선택합니다 AEM ContextHub .
    AEM ContextHub 도구의 이름은 "소스"에서 채워지지만 현재 버전에서는 하나의 AEM ContextHub 도구만 정의할 수 있습니다.
  5. 개체 선택기에서 경로를 선택하여 데이터 요소를 데이터 레이어에 매핑합니다.
    이 예에서 개체를 page.friend 선택합니다.
  6. Save Data Element ​를 클릭합니다.

데이터 요소 변경 이벤트 유형을 사용하는 이벤트 기반 규칙 만들기

  1. 웹 속성에서 Rules 탭을 클릭한 다음 왼쪽 메뉴 Event Based Rules 에서 을 클릭합니다.
  2. Create New Rule ​를 클릭합니다.
  3. 규칙 이름을 지정합니다. 이 예에서 규칙 이름을 "find_a_friend"로 지정합니다.
  4. 조건 섹션을 확장합니다.
  5. 드롭다운 Event Type 목록에서 선택합니다 dataelementchanged .
  6. 이전 섹션에서 만든 데이터 요소(my_friend)를 선택합니다.
  7. 아래의 Rule Conditions ​드롭다운 목록 Data Element Value 에서 선택한 다음 을 클릭합니다 Add Criteria .
  8. 이전 섹션에서 만든 데이터 요소(my_friend)를 선택하고 규칙을 실행할 값을 지정합니다.
    이 예에서는 "Carl"을 값으로 사용합니다.
    데이터 요소 값을 이러한 방식으로 사용하는 경우 데이터 요소 설정을 일치에서 고려해야 합니다. 예를 들어, 데이터 요소 설정에서 Force Lowercase Value 옵션을 선택하면 평가하기 전에 값이 모두 소문자로 변환됩니다. Javascript는 대/소문자를 구분하는 "test"가 "Test"와 동일하지 않으며 조건이 예상대로 실행되지 않습니다.
  9. Expand the Javascript / Third Party Tags section.
  10. Add New Script ​를 클릭합니다.
  11. 규칙이 실행될 경우 알림을 제공하는 비순차적 Javascript를 추가합니다. 규칙 이름을 "found_my_friend"로 지정한 다음 다음 예와 유사한 경고 스크립트를 추가합니다.
    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);
  12. Save Code ​클릭한 다음 을 클릭합니다 Save Rule .

구현의 유효성 검사

위의 웹 속성을 실행하는 DTM 지원 웹 사이트에서 구현의 유효성을 확인합니다.
  • 개발자 콘솔에서 데이터 레이어()가 있는지 _dl 확인합니다.
  • 모니터링할 데이터 레이어 개체를 위()의 조건에 설정된 값으로 _dl.page.friend = ‘Carl’ 변경합니다.
    ・ 예제 구현에서 경고 상자가 나타나야 합니다.
  • 개체를 다른 값()으로 변경하고 경고 _dl.page.friend = ‘Bob’ 는 표시하지 않습니다.
    DTM 디버깅이 켜져 있으면 실패한 평가가 콘솔에 표시됩니다.
  • 객체를 일치()의 소문자 값으로 변경하고 경고 _dl.page.friend = ‘carl’ 가 표시되지 않습니다.
  • 객체를 일치()의 올바른 대/소문자 값으로 변경하면 경고가 다시 _dl.page.friend = ‘Carl’ 표시됩니다.