[GTM] id, class 외에 다른 속성 값 매개변수로 수집하기

GTM으로 여러 이벤트를 수집하다보면 id, class 외에 다른 속성 값으로 트리거 조건을 설정한다던가 해당 속성값을 매개변수로 이벤와 함게 수집하고 싶을 때가 있습니다. 이러한 경우에 GTM에서 어떻게 설정해야하는지 알아보겠습니다.

 

 

GTM에서 class와 id를 클릭했을 때, 값을 반환하는 변수는 기본적으로 제공하지만, 그 외에 다른 속성 값을 수집하고 싶을 땐 사용자 정의 변수로 따로 설정을 해주어야합니다. 예를 들어 아래와 같이 "slot"이라는 속성의 속성 값을 매개변수로 수집해보겠습니다.

 

 

1. 변수 설정

먼저 GTM의 [변수 > 사용자 정의 변수] 에서 '새로 만들기'를 클릭한 후, [페이지 요소 > DOM 요소]를 클릭합니다. 그 후, 선택방법을 CSS 선택 도구로 바꿔주고, 아래와 같이 설정을 해주면, "slot" 속성이 존재하는 모든 요소에서 slot 속성 값을 수집할 수 있게 됩니다.

 

• slot 변수 생성

function() {
  // 클릭 이벤트를 통해 발생한 요소를 대상으로 합니다.
  var targetElement = {{Click Element}};

  // 'slot' 속성이 있는지, 또는 가장 가까운 상위 요소에 'slot' 속성이 있는지 확인합니다.
  var gtagElement = targetElement.closest('[slot]');
  if (gtagElement) {
    // 'slot' 속성 값을 반환합니다.
    return gtagElement.getAttribute('slot');
  } else {
    // 만약 'slot' 속성이 없다면, undefined를 반환합니다.
    return undefined;
  }
}

 

 

2. 트리거 설정

처음에 보았던 이미지에서 data-gtag에 해당하는 속성값(mweb_detailpage_curation_house)을 클릭하면 트리거가 동작하도록 설정을 해주었습니다. 여기서 data-gtag(하위태그까지) 또한 위 slot과 똑같은 방식으로 변수를 설정하였습니다. 

 

 

 

3. 태그 설정

태그에 위에서 설정했던 트리거를 연결시켜주고, 이벤트 매개변수에 1번에서 설정해주었던 slot 변수를 아래와 같이 설정해주면 세팅이 끝납니다.

 

 

4. 디버그

3번까지 설정을 마쳤으면, 미리보기를 통해 디버깅을 하여 트리거를 발생시켰을 때, test라는 이벤트가 fired되는지 확인하고, 아래와 같이 slot 속성의 값인 "1"이 수집되는지 확인합니다.