※ 이 컨텐츠에서는 GTM에서 “클릭 트리거의 조건을 설정하는 방법”에 대해 다룹니다.

아직 GTM의 기본 구성과 디버깅 테스트 방법에 대해 모른다면, 이전 컨텐츠를 읽고 와주세요! 😊

이전 컨텐츠확인하기 ▶ 구글태그매니저(GTM)쉽게 가자!(1편)

이전 컨텐츠확인하기 ▶ 구글태그매니저(GTM)쉽게 가자!(2편)

이전 컨텐츠확인하기 ▶ GTM으로 GA태그 디버깅및 실시간 데이터 확인하기

내 사이트에 들어온 고객들의 행동 정보를 수집하기 위해서는 “태그”로 통칭되는 추적 코드가 필요합니다.

구글태그매니저는 컨테이너 태그 소스를 한번 심기만 하면,

개발자가 아니더라도 직접 태그를 만들어 더 정확하고 다양한 데이터를 추적할 수 있도록 도와줍니다.

이전 컨텐츠에서 다뤘듯이 태그를 발동시키려면 트리거가 있어야 하는데요,

트리거에는 어떤 유형이 있고 조건 값은 어떻게 설정할 수 있는지 알아보고자 합니다!

트리거 유형 알아보기

GTM 기본 제공 트리거 유형은 크게 페이지뷰, 클릭, 사용자 참여, 기타 4가지로 나뉩니다.

1) 페이지뷰: 페이지가 웹 브라우저에 로드될 때 태그를 실행하는 트리거로, 트리거 실행 시기를 결정하는 기준에 따라 5가지로 나뉩니다.

2) 클릭: 페이지에서 설정한 조건과 일치하는 요소를 클릭할 때 태그를 실행하는 트리거입니다.

3) 사용자 참여: 웹페이지에서 사용자의 참여 형태(유튜브 동영상을 얼마나 재생하였는지, 전체 페이지에서 일정 비율 이상 스크롤을 내렸는지, 페이지 내 양식 요소에서 제출 이벤트가 발생했는지, 특정 요소가 화면에 노출되었는지)에 따라 태그를 실행하는 트리거입니다.

4) 기타: 위의 일반 유형으로 처리되지 않을 때 (원하는 이벤트가 제공되는 유형에 없을 때, 예외사항이 발생할 때, 정해진 간격으로 이벤트를 전송하고 싶을 때) 활용되는 트리거입니다.

그 중 가장 많이 활용되는 2) 클릭 트리거에 대해 자세히 알려드리겠습니다!

HTML 요소와 클릭 트리거 유형

여기서 잠깐! 클릭 트리거를 파헤쳐 보기 전에 HTML 요소에 대해 살펴봅시다.

이 문장에 커서를 올리고 오른쪽 마우스 클릭 > 가장 하단의 검사를 눌러보세요

오른쪽에 개발자도구 화면이 열리며 해당 부분의 HTML 소스를 확인할 수 있습니다.

HTML에서 <p> 요소는 하나의 문단이나 문장을 쓸 때 많이 활용되며 <strong>은 굵은 글씨로 표시할 때 사용되는 요소입니다.

▶인사이트아웃 구글 컨텐츠 리스트

위의 앵커 텍스트에도 커서를 올리고 오른쪽 마우스 클릭 > 가장 하단의 검사를 눌러보세요

HTML에서 <a> 요소는 주로 href 특성을 통해 다른 URL로 연결할 수 있는 하이퍼링크에 활용되며 <a> 태그 사이에 문자를 삽입(▶인사이트아웃 구글 컨텐츠 리스트)하면 이를 앵커 텍스트라고 합니다.

이렇게 꺽쇠 안에 있는 것들이 HTML 요소(태그)라는 것 기억해주세요!

이제 GTM으로 돌아와서, 클릭 트리거에는 링크만과 모든 요소 2가지가 있습니다.

링크만은 <a> 요소를 활용하는 링크의 클릭만 추적하는 것이고 모든 요소는 HTML에서 사용되는 모든 요소의 클릭에 대해서 추적합니다.

또 각각의 유형에서 모든과 일부 실행 조건이 있는데요,

모든은 말 그대로 모든 클릭에 대해 집계하는 것이고 일부는 설정한 조건에 맞는 특정 클릭에 대해서만 구분하여 수집할 수 있습니다.

보통은 정확한 추적을 위해 GTM을 활용하는 것이니, 모든보다는 일부 설정을 훨씬 많이 활용하겠죠?

그렇다면, 일부 설정의 조건에는 어떤 것이 있을까요?

클릭 트리거의 조건 알아보기

클릭 트리거의 일부 설정 조건은 변수 명, 조건, 조건 값으로 구성되어 있습니다.

1) 변수 명: 쉽게 말하자면, 조건 값의 HTML 카테고리입니다. 주로 Click URL / Click Text / Click ID / Click element / Page URL / Page Path 가 활용됩니다.

2) 조건: 설정한 조건 값과 사용자가 누르는 값의 같음 / 포함 / 일치 여부입니다.

3) 조건 값: HTML 요소의 값입니다. 페이지의 URL 주소가 될 수도 있고 특정 텍스트 문구가 될 수도 있습니다.

실제 트리거를 설정한 예시를 보며 확인해볼까요?

GTM 디버깅 모드에서 트리거를 설정한 페이지 내의 ‘멤버십’을 클릭하면,

클릭한 요소의 Page URL이 https:/www.feemaker.co.kr/을 포함할 때, Click Text가 멤버십과 같을 때

이 2가지 조건이 충족되어 트리거가 발동한 것을 알 수 있습니다.

모두 이해하셨나요? 그렇다면 모든 준비가 끝났습니다.

이제 실제 페이지에서 추적하고 싶은 요소의 트리거를 가장 쉽게 설정하는 방법에 대해 알아봅시다!

클릭 트리거 조건 설정하기

사이트마다 페이지 구조와 요소가 다르기 때문에

원하는 요소가 어떤 형태로 이루어져 있고, 어떤 조건들로 활용할 수 있는 지 직접 확인 후

그에 맞는 트리거 조건 형태(변수 명, 조건, 조건 값)를 설정해야 합니다.

1. GTM 디버깅 모드에서 확인하기

GTM 디버깅 모드에서 빠르고 쉽게 설정할 수 있는 트리거를 확인할 수 있습니다.

1) 디버깅 모드 실시 후 미리보기 창에서 추적을 원하는 요소를 클릭합니다.

2) 태그 확인 화면에서 Click 탭이 생기면 눌러줍니다.

3) 결과(Output of GTM-XXXXXXX) 영역에서 변수 탭(Variables)을 눌러줍니다. 활용할 수 있는 변수 명과 조건 값을 확인하여 트리거에 설정해줍니다.

2. HTML에서 확인하기

위에서 “오른쪽 마우스 클릭 후 검사 눌러서 개발자 도구 확인”했던 것 기억하시나요?

이미 여러분은 두 번째 방법도 할 수 있는 것입니다!

페이지 내에서 추적하고 싶은 부분에 커서를 올리고 오른쪽 마우스 > 검사를 누릅니다.

이 요소에서는 <a href> 링크 요소와 앵커 텍스트가 있네요.

그렇다면, 트리거는 URL과 텍스트 2가지로 설정할 수 있겠죠?

설정한 조건이 모두 충족되어 트리거가 정상 발동한 것을 확인할 수 있습니다.

Q. 이미지에도 트리거를 설정할 수 있을까요?

페이지 내에서 추적하고 싶은 이미지에 커서를 올리고 오른쪽 마우스 > 검사를 누릅니다.

이미지 src (이미지 호스팅 URL)와 class 값을 알 수 있네요.

그렇다면, 트리거는 URL과 class 2가지로 설정할 수 있겠죠?

설정한 조건이 모두 충족되어 트리거가 정상 발동한 것을 확인할 수 있습니다.

여기서 한 단계 더 나아가 CSS 선택자를 활용하여 트리거를 설정하는 방법도 알려드리겠습니다.

오른쪽 마우스 > 검사를 누르면 개발자도구가 열리고 해당 부분이 하이라이트 되죠?

그 영역에서 또 오른쪽 마우스 > Copy > Copy selector를 눌러줍니다.

로고의 CSS 선택자가 복사된 상태입니다.

이대로 GTM 트리거 설정에서 변수 명은 Click Element로, 조건은 CSS 선택 도구와 일치로

마지막으로 조건 값에 복사한 CSS 선택자를 붙여넣기 해줍니다.

설정한 CSS 선택자로 성공적으로 트리거가 발동한 것을 확인할 수 있습니다.

한편 트리거를 제대로 설정해도 작동하지 않는 경우가 발생할 수 있는데요,

이는 HTML 구조 내에서 해당 요소가 반복되어 사용되었을 수 있기 때문입니다.

유니크한 값만이 이벤트를 구분하여 정확히 집계할 수 있다는 점 유의해주세요!

추적하고 싶은 요소의 트리거 쉽게 설정하고

페이지 내에서 사용자의 행동방식을 더 정확하게 파악하여

목표와 전환수를 효과적으로 확보합시다!

▶ 마케팅 인사이트 큐레이팅 플랫폼, 인사이트아웃에서 더 많은 컨텐츠 보러가기