GA4 완전정복 시리즈

GA4 버튼 클릭 이벤트 오류 사례 모음.zip

오픈소스마케팅

2023.01.27 08:00
  • 1394
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    0
  • 0

클릭 트리거 이벤트는 GTM(구글 태그 매니저)로 세팅할 수 있는 가장 기본적인 이벤트 중 하나입니다. 때문에 많은 기업이 구글 태그 매니저의 기본 클릭 트리거를 활용하여 고객의 관심도를 측정하는데요. 실제 수집된 데이터와 GA4에 집계된 데이터를 비교했을 때 클릭 수가 과도하게 집계되거나 클릭 이벤트 수집이 작동하지 않는 경우가 종종 발생합니다. 이번 콘텐츠에서는 여러 기업에서 공통으로 발생한 GTM 클릭 트리거 이벤트 세팅 문제와 해결 과정을 알아보도록 하겠습니다.

 

 

 

오류 발생 사례 1. 클릭 수가 과하게 수집되는 경우

 

 

 

 

가장 일반적인 클릭 트리거 설정 사례입니다. 많은 GTM 사용자들이 클릭 요소를 구분하는 용도로 Click Text 조건을 사용하고 있는데요, 이 때 조건을 “Click Text | 포함 | [텍스트 내용]”으로 설정하는 경우 웹사이트에서 버튼 이외의 부분을 눌렀을 때 아래 이미지처럼 조건으로 설정한 텍스트 내용이 포함되어 있으면 해당 요소를 클릭했을 때도 이벤트가 발생되어 이벤트 수가 과도하게 집계될 수 있습니다.

 

 

 

 

 

 

오류 발생 사례 2. 클릭 이벤트 수집이 멈춘 경우

 

 

 

 

클릭하고자 하는 요소에 ID가 있다면 조건을 Click ID로 설정하면 가장 좋은데요, ID가 없는 상황에서 많은 분들이 Click Classes, Click Element 등을 조건으로 사용하여 트리거를 설정하기도 합니다. 하지만 이 조건들을 사용한다면 다음과 같은 경우 문제가 생길 수 있습니다.

 

1. React 등의 프레임워크를 사용한 싱글 페이지 어플리케이션(SPA) 형태의 웹사이트에서 서버 배포 때 요소의 Class 값이 달라지는 경우

2. 웹사이트를 유지・보수 하면서 사이트 구조가 바뀌는 경우

3. 웹사이트를 유지・보수 하면서 Class나 ID의 값이 달라지거나 사라지는 경우

 

위의 모든 상황은 구글 태그매니저를 관리하는 사람이 빠르게 사이트의 변화에 빠르게 대응하여 트리거 조건의 값을 변경하지 않으면 잘 수집되던 클릭 데이터가 수집되지 않는 상황이 발생합니다.

 

 

 

오픈소스마케팅 태깅 컨설팅에서는?

 

클라이언트의 내부 개발자와 논의하여 Click 트리거의 조건으로 새로운 HTML 속성(Attribute)을 추가하는 방법, 맞춤 이벤트를 설정하는 방법 중 개발자가 작업하기 편한 방법으로 클릭 데이터를 수집하고 있습니다.

 

 

개선 사례 1. HTML 속성(Attribute) 사용하기

 

링크 클릭의 조건이 되는 <a> 태그에 다음과 같이 데이터 속성(Data Attribute)을 추가합니다.

 

<a class="subscribe-button" data-tag-index="main" data-tag-action="click" data-tag-content="상담 문의"> 

상담 문의

</a> 

 

 data-tag-index: 클릭이 실행된 페이지 구분(ex. main)

 data-tag-action: 사용자의 액션(ex: click)

 data-tag-content: 클릭한 콘텐츠 구분(ex. 상담 문의)

 

 

 

개발 영역에서 새로 추가한 HTML 속성을 구글 태그 매니저에서 맞춤 변수로 만들어 사용하고 기존에 설정해뒀던 속성의 값을 ‘포함’이 아닌 ‘같음’으로 설정하여 오직 상담 문의 버튼을 클릭했을 때만 이벤트가 발생하도록 세팅합니다.

 

 

 

 

또 다른 속성인 data-tag-content는 트리거 조건을 만드는 데 사용하지 않고 메인 페이지의 다양한 버튼 중 어떤 버튼을 클릭했는지 쉽게 확인하실 수 있도록 이벤트 매개변수로 설정해드립니다. 이렇게 하면 쉽게 GA4, 앰플리튜드, 믹스패널 등의 분석 도구에서 메인에서 가장 많이 클릭한 버튼, 각 버튼의 클릭 비율 같은 지표를 확인할 수 있습니다.

 

 

개선 사례 2. 맞춤 이벤트 사용하기

 

dataLayer를 활용하여 정확히 특정 버튼이나 메뉴를 클릭했을 때 구글 태그 매니저로 데이터를 전달합니다. 이때 함께 수집해야 하는 행동 정보가 있는 경우 매개변수로 내용을 함께 전달하여 분석 지표로 활용할 수 있습니다.

 

dataLayer.push({

  'event': 'recent_goods_click',

  'goods_id': '{상품의 ID}',

  'goods_name': '{상품명}',

  'price': '{상품 가격}',

  'brand_id': '{상품의 브랜드 ID}',

  'brand_name': '{상품의 브랜드명}'

});

 

 `goods_id`에는 클릭한 상품의 ID가 값으로 들어갑니다.(예: '334765455')

 `goods_name`에는 클릭한 상품의 상품명이 값으로 들어갑니다.(예: '맛있는 군밤')

 `price`에는 클릭한 상품의 가격이 값으로 들어갑니다.(예: '3460')

 `brand_id`에는 클릭한 상품의 브랜드 ID가 값으로 들어갑니다.(예: '25')

 `brand_name`에는 클릭한 상품의 브랜드명이 값으로 들어갑니다.(예: '오소마군밤')

 

 

 

기본 Click 트리거가 아닌 맞춤 이벤트 트리거를 활용하여 정확히 최근 상품을 클릭했을 때 분석 도구에 이벤트를 전달합니다. 더불어, 구글 태그 매니저를 활용하면 위와 같이 세팅 한 매개변수를 활용하여 GA4, UA(유니버설 애널리틱스)가 아닌 다른 분석 도구에도 효율적인 이벤트 세팅이 가능하다는 장점이 있습니다. 

 

클릭 수집은 간단해 보여도, 고객의 관심도를 파악할 수 있어 매우 중요한 데이터 중 하나입니다. 내부 리소스만으로 클릭 데이터를 정확히 수집하는 데 어려움을 겪고 있다면 편하게 문의해주세요. 비즈니스 상황, 웹사이트 환경, 개발자의 리소스를 고려한 맞춤 솔루션으로 정확한 데이터를 수집하고 관심도를 분석할 수 있도록 도와드립니다.

 

 

  • #GA
  • #GA4
  • #GTM
  • #구글 태그 매니저