Show Menu
화제×

Adobe Experience Manager ContextHub tool

AEM ContextHub 도구를 사용해 다이내믹 태그 관리 기능을 Adobe Experience Manager(AEM) ContextHub(AEM의 데이터 레이어 버전)에 통합합니다. 웹사이트에서 AEM을 사용하지 않는 경우에도 이 도구를 사용해 DTM을 데이터 레이어에 통합할 수 있습니다.
DTM 고객은 종종 데이터 요소를 웹 사이트의 데이터 레이어에 매핑하는 데 사용합니다. 예를 들어 사용자가 특정 제품을 보고 있다거나 상품을 장바구니에 집어넣었다는 정보가 데이터 레이어에 포함될 수 있습니다. DTM은 규칙 조건 및 작업에서 여러 가지 방법으로 이 정보를 사용할 수 있습니다. 보고를 위해 Analytics에 데이터를 전송하거나 사용자에게 맞춤형 컨텐츠를 표시하기 위해 Target에 데이터를 전송하는 것도 여기에 포함됩니다.
AEM ContextHub 도구는 데이터 레이어와 연관된 많은 문제를 해결합니다. 일부 데이터 레이어가 페이지 상단에 로드되지 않습니다. 다른 데이터 레이어는 동적이거나 비동기화 되고 페이지가 변경됨에 따라 자주 변경됩니다. 과거에는 이러한 문제가 모두 DTM이 효과적으로 데이터를 전송하거나 동작을 트리거하는 데 문제가 있었습니다.
AEM ContextHub 도구는 수시로 확인하여 데이터 레이어가 변경되어 페이지 상단이 아닌 다른 곳에 로드되거나 페이지가 변경될 때마다 수정되는지 판단하는 사용자 지정 코드를 작성할 필요가 없습니다.
한 예로 고객이 장바구니에 상품을 놓았다가 삭제한다고 가정해 보면 데이터 레이어가 변경될 때 페이지가 새로 고쳐지지 않으면 DTM에서 사용자 지정 코드 추가 없이 변경 사항을 인식하지 못합니다. AEM ContexHub 도구에는 매초마다 변경사항이 있는지 확인하는 폴링 엔진이 포함되어 있습니다.
DTM에서 이제 데이터 레이어를 이용해 데이터 요소를 미리 채울 수 있으므로 사용자는 AEM ContextHub 데이터 요소를 데이터 요소 값과 같이 이전에 출시된 조건과 함께 사용할 수도 있습니다. 이때 사용자는 페이지가 로드될 때마다 데이터 레이어 값을 관리하거나 사용자 상호 작용으로 인해 데이터 레이어가 변경된 경우 데이터 요소 값 조건에 dataelementchanged 이벤트를 결합하여 사용할 수 있습니다.
이 도구를 구성할 때 기본 설정을 사용해 AEM ContextHub와 통합하거나, 아니면 웹 사이트에서 작동할 구조를 사용자 지정할 수 있습니다.
  1. < 웹 속성 이름 > > Overview > Add a Tool > AEM ContextHub 를 클릭합니다.
  2. 도구에 대해 수사적 이름을 지정합니다.
    This name displays on the Overview tab under 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 .

Data layer management using the ContextHub tool

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

전제 조건

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

AEM ContextHub tool components

AEM ContextHub 도구는 DTM에 다음 두 부분으로 된 기능을 추가합니다.
  • 데이터 레이어 정의
  • AEM ContextHub 데이터 레이어 유형
또한 데이터 레이어 모니터링이 가능하도록 dataelementchanged 라는 새로운 이벤트 유형이 추가되었습니다. 이 이벤트 유형은 AEM ContextHub 도구와 별개로 사용할 수 있습니다.
각 기능 영역은 아래 두 가지 예에 기술된 구성 단계에 해당합니다.

Data element monitoring

The new dataelementchanged event type monitors any changes that occur to a specific data element value during a page view. 이 이벤트 유형을 사용할 경우 다음 관찰 내용에 주목해야 합니다.
  1. 데이터 요소를 단순한 Javascript 값에 매핑해야 합니다. 데이터 요소 사용자 지정 스크립트로 반환되는 배열 및 개체와 같은 복잡한 값은 제대로 작동하지 않습니다. 쿠키, CSS 선택기 및 URL 매개 변수 또한 예기치 않은 결과를 초래할 수 있고 전혀 작동하지 않을 수 있습니다. 문자열과 정수 같은 단순한 값은 잘 작동합니다.
  2. 한 페이지에서 참조하는 dataelementchanged 이벤트 유형의 수를 적게 잡아야 합니다. 모니터링 자체는 효율적이더라도 평가 횟수가 너무 많으면 페이지 성능에 영향을 미칩니다.
  3. dataelementchanged 이벤트 유형은 DOM 기반 모니터링 시스템에 해당하므로 현재 페이지 보기 내에서만 작동합니다.
  4. 데이터 요소 모니터에서 값에 대해 투표를 실행합니다.

ContextHub data layer default example

Example using the AEM ContextHub tool that references and uses the default ContextHub data layer within the Dynamic Tag Management configuration.
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. Select Use Default ContextHub Data Layer to leverage the standard ContextHub stores.
    또는
    Select Customize ContextHub Data Layer to modify the schema. 구현에서 기본 외의 ContextHub 데이터 레이어를 사용하는 경우 사용자 지정된 옵션을 사용해야 합니다.
    기본 데이터 레이어 루트를 통해 모든 ContextHub 저장소에 액세스할 수 있습니다. ContextHub 저장소의 역동적 성질을 감안하면 일반 데이터 레이어 접근 방법에서 사용하는 간단한 Javascript 개체 참조에서는 사용할 수 없는 추가 기능을 이 데이터 레이어에서 사용할 수 있습니다.
  5. (Conditional) To use a custom data layer, click Open Editor to view the data layer schema definition. If the custom data layer is a modification of the ContextHub schema be sure to add “ContextHub” in the Data Layer Root field.
    기본 ContextHub 스키마가 편집기에서 자동 입력됩니다.
    1. 사이트 데이터 레이어 스키마에 맞춰 필요에 따라 스키마를 수정합니다.
    2. Click Save and Close to save the schema and close the editor.
  6. 클릭 Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. 클릭 Create New Data Element .
  3. 데이터 요소 이름을 지정합니다. 이 예에서 데이터 요소 이름을 "total_price"로 지정합니다.
  4. From the Type drop-down list, select AEM ContextHub .
    AEM ContextHub 도구의 이름이 “소스”에 자동으로 입력되지만 현재 버전에서는 AEM ContextHub 도구를 1개만 정의할 수 있습니다.
  5. 개체 선택기에서 경로를 선택하여 데이터 요소를 데이터 레이어에 매핑합니다.
    이 예에서 cart.totalPriceFloat 개체를 선택합니다.
  6. 클릭 Save Data Element .

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

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. 클릭 Create New Rule .
  3. 규칙 이름을 지정합니다. 이 예에서 규칙 이름을 "cart_total_update"로 정합니다.
  4. 조건 섹션을 확장합니다.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. 이전 섹션에서 만든 데이터 요소(total_price)를 선택합니다.
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. 이전 섹션에서 만든 데이터 요소(total_price)를 선택하고 규칙 실행을 유발하는 값을 할당합니다.
    In this example, a regular expression is used to evaluate anything greater than or equal to 50: ^([5-9]\d|[1-9]\d{2,})$
    데이터 요소 값이 조건으로서 이러한 방식으로 사용되는 경우, 일치에서 데이터 요소 설정을 고려하는 것이 중요합니다. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. 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 Rule ​을 클릭하고를 클릭합니다.

구현의 유효성을 검사합니다

위의 웹 속성을 실행하는 DTM 지원 웹 사이트에서 구현을 확인합니다.
  • 개발자 콘솔에서 데이터 레이어( ContextHub )가 있는지 확인합니다.
  • 위 조건에 일치하지 않는 값인 것으로 모니터링되는 데이터 레이어 개체를 변경합니다. ContextHub.setItem('/store/cart/totalPriceFloat','5');
  • 위 조건에 일치하는 값인 것으로 모니터링되는 데이터 레이어 개체를 변경합니다. ContextHub.setItem('/store/cart/totalPriceFloat','52');
  • 구현 예에서 다음 경보 상자가 표시되어야 합니다.
DTM 디버깅을 설정한 경우 평가 오류 시 콘솔에 표시되어야 합니다.

Custom data layer example

Example using the AEM ContextHub tool that references and uses a custom, non-ContextHub data layer within the Dynamic Tag Management configuration.
The example data layer ( _dl ) will be loaded on the test web page as a Javascript object definition in the <head/> section of the page before the DTM embed code is referenced.
<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. Select Customize ContextHub Data Layer to modify the schema.
    A root Javascript object name must be added to the Data Layer Root field for non-ContextHub data layers. _dl 정의는 이 섹션의 일반 예에서 사용됩니다.
  5. Click Open Editor to view the data layer schema definition.
    기본적으로 기본 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. Click Save and Close to save the schema and close the editor, then click Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. 클릭 Create New Data Element .
  3. 데이터 요소 이름을 지정합니다. 이 예에서 데이터 요소 이름을 "my_friend"로 지정합니다.
  4. From the Type drop-down list, select AEM ContextHub .
    AEM ContextHub 도구의 이름이 “소스”에 자동으로 입력되지만 현재 버전에서는 AEM ContextHub 도구를 1개만 정의할 수 있습니다.
  5. 개체 선택기에서 경로를 선택하여 데이터 요소를 데이터 레이어에 매핑합니다.
    이 예에서 page.friend 개체를 선택합니다.
  6. 클릭 Save Data Element .

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

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. 클릭 Create New Rule .
  3. 규칙 이름을 지정합니다. 이 예에서 규칙 이름을 "find_a_friend"로 지정합니다.
  4. 조건 섹션을 확장합니다.
  5. From the Event Type drop-down list, select dataelementchanged .
  6. 이전 섹션에서 만든 데이터 요소(my_friend)를 선택합니다.
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. 이전 섹션에서 만든 데이터 요소(my_friend)를 선택하고 규칙 실행을 유발하는 값을 할당합니다.
    이 예에서 “Carl”을 그 값으로 사용합니다.
    데이터 요소 값이 조건으로서 이러한 방식으로 사용되는 경우, 일치에서 데이터 요소 설정을 고려하는 것이 중요합니다. For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. 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 Rule ​을 클릭하고를 클릭합니다.

구현의 유효성을 검사합니다

위의 웹 속성을 실행하는 DTM 지원 웹 사이트에서 구현을 확인합니다.
  • 개발자 콘솔에서 데이터 레이어( _dl )가 있는지 확인합니다.
  • Change the data layer object that is being monitored to the value that was set in the condition above ( _dl.page.friend = ‘Carl’ ).
    • 구현 예에서 다음 경보 상자가 표시되어야 합니다.
  • Change the object to a different value ( _dl.page.friend = ‘Bob’ ) and no alert should display.
    DTM 디버깅을 설정한 경우 평가 오류 시 콘솔에 표시되어야 합니다.
  • Change the object to a lowercase value of the match ( _dl.page.friend = ‘carl’ ) and no alert should display.
  • Change the object to the correct case value of the match ( _dl.page.friend = ‘Carl’ ) and the alert should once again display.