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 데이터 요소를 사용할 수도 있습니다. 그러면 사용자 상호 작용으로 인해 데이터 레이어가 변경된 경우 페이지 로드 시 데이터 레이어 값을 관리하거나 데이터 요소 값 조건을 dataelementchanged 이벤트와 결합할 수 있습니다.

이 도구를 구성할 때 기본 설정을 사용하여 AEM ContextHub와 통합하거나 모든 웹 사이트에서 작동하도록 구조를 사용자 지정할 수 있습니다.

  1. <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub​를 클릭합니다.

  2. 도구에 대한 수사적 이름을 지정합니다.

    이 이름은 Installed Tools 아래의 Overview 탭에 표시됩니다 .

  3. Create Tool​을 클릭하여 AEM ContextHub Settings 페이지를 표시합니다.

  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. dataelementchanged 이벤트 유형은 DOM 기반 모니터링 시스템이므로 현재 페이지 보기 내에서만 작동합니다.
  4. 데이터 요소 모니터는 값에 대한 투표를 모니터링합니다.

ContextHub 데이터 레이어 기본 예제

Dynamic Tag Management 구성 내에서 기본 ContextHub 데이터 레이어를 참조하고 사용하는 AEM ContextHub 도구 사용 예제.

ContextHub 데이터 계층은 테스트 Adobe Experience Manager (AEM) 웹 사이트에 로드되지만, ContextHub를 AEM과 독립적으로 사용할 수 있습니다. ContextHub를 AEM과 독립적으로 사용하려면 Adobe 담당자에게 문의하십시오.

모든 ContextHub 저장소는 브라우저 콘솔에서 참조할 수 있습니다.

DTM 데이터 레이어 모니터는 다른 DTM 기능보다 먼저 시작되므로 이 예제에서는 불가능한 작업이 아니지만 DTM을 통해 데이터 레이어를 배포하지 않습니다. 대신 서버에서 생성한 데이터 레이어에 따라 달라집니다. 그렇지 않으면 특정 데이터 레이어 값을 사용할 수 없기 때문에 Javascript 경고가 발생할 수 있습니다.

데이터 레이어 정의

AEM ContextHub 도구를 구성하는 첫 번째 단계는 웹 속성에 추가하는 것입니다.

NOTE

현재는 DTM 웹 속성당 AEM ContextHub 도구를 하나만 사용할 수 있습니다.

  1. <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub​를 클릭합니다.

  2. 도구에 대한 수사적 이름을 지정합니다.

  3. Create Tool​을 클릭하여 AEM ContextHub Settings 페이지를 표시합니다.

  4. 표준 ContextHub 저장소를 활용하려면 Use Default ContextHub Data Layer​를 선택합니다.

    또는

    스키마를 수정하려면 Customize ContextHub Data Layer​를 선택합니다. 구현에서 기본이 아닌 ContextHub 데이터 레이어를 사용하고 있는 경우 사용자 지정 옵션을 사용해야 합니다.

    기본 데이터 레이어 루트로 모든 ContextHub 저장소에 액세스할 수 있습니다. ContextHub 저장소의 동적 특성을 고려할 때, 일반 데이터 레이어 접근 방식으로 사용되는 간단한 Javascript 개체 참조에서는 사용할 수 없는 추가 기능을 이 데이터 레이어에서 사용할 수 있습니다.

  5. (조건부) 사용자 지정 데이터 레이어를 사용하려면 Open Editor​를 클릭하여 데이터 레이어 스키마 정의를 확인합니다. 사용자 지정 데이터 레이어가 ContextHub 스키마를 수정한 것인 경우 Data Layer Root 필드에 "ContextHub"를 추가해야 합니다.

    편집기에서 기본 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,})$

    NOTE

    데이터 요소 값을 이러한 방식으로 사용하는 경우 일치에서 데이터 요소 설정을 고려해야 합니다. 예를 들어, 데이터 요소 설정에서 Force Lowercase Value 옵션을 선택하면 평가하기 전에 값이 모두 소문자로 변환됩니다. Javascript는 대/소문자를 구분하므로 “test”가 “Test”와 동일하지 않아 조건이 예상대로 실행되지 않습니다.

  9. Javascript / Third Party Tags 섹션을 확장합니다.

  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 디버깅이 켜져 있으면 실패한 평가가 콘솔에 표시되어야 합니다.

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

Dynamic Tag Management 구성 내에서 사용자 지정 비 ContextHub 데이터 레이어를 참조하고 사용하는 AEM ContextHub 도구 사용의 예제.

예제 데이터 레이어(_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 도구를 구성하는 첫 번째 단계는 웹 속성에 추가하는 것입니다.

NOTE

현재는 DTM 웹 속성당 AEM ContextHub 도구를 하나만 사용할 수 있습니다.

  1. <웹 속성 이름> > Overview > Add a Tool > AEM ContextHub​를 클릭합니다.

  2. 도구에 대한 수사적 이름을 지정합니다.

  3. Create Tool​을 클릭하여 AEM ContextHub Settings 페이지를 표시합니다.

  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"을 값으로 사용합니다.

    NOTE

    데이터 요소 값을 이러한 방식으로 사용하는 경우 일치에서 데이터 요소 설정을 고려해야 합니다. 예를 들어, 데이터 요소 설정에서 Force Lowercase Value 옵션을 선택하면 평가하기 전에 값이 모두 소문자로 변환됩니다. Javascript는 대/소문자를 구분하므로 “test”가 “Test”와 동일하지 않아 조건이 예상대로 실행되지 않습니다.

  9. Javascript / Third Party Tags 섹션을 확장합니다.

  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’)으로 변경하고 경고가 표시되지 않아야 합니다.

    NOTE

    DTM 디버깅이 켜져 있으면 실패한 평가가 콘솔에 표시되어야 합니다.

  • 개체를 일치(_dl.page.friend = ‘carl’)의 소문자 값으로 변경하고 경고가 표시되지 않아야 합니다.

  • 개체를 일치(_dl.page.friend = ‘Carl’)의 올바른 대/소문자 값으로 변경하면 경고가 다시 표시됩니다.

이 페이지에서는