[구글 태그 매니저 사용법4] 클릭 이벤트 데이터 전송하기

클릭 이벤트 데이터 전송하기 썸네일

---

구글 태그 매니저를 이용해서 HTML의 특정 클래스(class)를 클릭하였을 때, 구글 애널리틱스(GA)로 데이터를 전송하고 싶을 때가 있습니다. 이럴 경우, 구글 태그 매니저에서 어떻게 설정하는지 알아보겠습니다.

 

1. 새 태그 추가하기

구글 태그 매니저의 접속 해서 [새 태그 추가] 버튼을 클릭해서, 태그를 클릭해 줍니다. 아직 태그가 무엇이고, 어떻게 만드는지 익숙하지 않는 분들이라면, 이 글을 확인해 주세요.

 

2. class 값 확인 하기

먼저, 내가 클릭할 요소에 HTML 클래스(class) 값을 확인해 주세요. 저는 아래 그림 처럼, 저의 티스토리 타이틀을 클릭 했을 경우, GA(구글 애널리틱스)로 데이터를 보내도록 하고 싶습니다. 해당 타이틀의 클래스 값은 크롬을 기준으로 F12 버튼을 눌러주거나, [마우스 우클릭] -> [검사]를 클릭하여 해당 클래스를 확인 할수 있습니다. 저는 'test_title'으로 되어 있네요.

개발자 도구에서 클래스값 확인하는 화면

 

 

3. 태그 내용 입력하기

다시, 구글 태그 매니저로 돌아와, [태그 유형] - 어디로 데이터를 보낼건지, [추적 유형] - 저희는 이벤트 유형이므로 '유형' 선택, [카테고리] - 보통 기획단계에서 정하지만, 혼자 하시는 거라면 스스로가 생각하는 카테고리를 적어주세요. [작업] - 어떤 요소를 작업할건지 적어주세요, [라벨] - GA로 보낼 라벨값을 적어주세요. 저는 타이틀 클릭 이벤트 이므로 '타이틀 클릭' 이라고 하겠습니다. 여기서! 주의 해야 할것은 [카테고리], [작업], [라벨] 항목은 GA 유니버셜 애널리틱스일 경우에만 해당 합니다. GA4의 경우에는 항목이 다르니 주의해 주세요. 

태그 구성값을 적은 화면

 

4. 트리거 내용 입력하기

그 다음으로, 이번 글에 핵심인 트리거를 입력해야 합니다. 제가 예제로 하고 있는 타이틀은 <a> 태그로 되어 있습니다. <a> 태그는 곧 링크를 의미 합니다. 그래서 [트리거 유형]을 [링크만] 으로 선택해 주세요. 그리고 [일부 링크 클릭]을 선택해 주세요. 그리고 저희는 <a> 링크의 class가 'test_title' 이라고 되어 있는 타이틀이 클릭 되었을 경우, 데이터를 전송하고 싶기 때문에, 아래 그림과 같이 [Click classes], [같음], [test_title]로 만들어 주었습니다. 이와 같이 모두 작성해 주었다면, [저장]을 클릭해서 저장 해주세요.

트리거 유형 선택 화면

트리거 구성 요소 선택 화면

 

 

5. 저장된 변수, 태그, 트리거 확인하기

위와 같이 저장해 주었다면, 아래와 같이 변경사항에 반영 되었을 것 입니다. 

저장된 값을 확인하는 화면

그럼, 이제 [미리보기]를 클릭하여, 우리가 만든 태그가 제대로 작동하는지 확인해 봅시다. 우리가 원하는 동작은 타이틀을 클릭 하였을 때, [GA_evet_타이틀클릭] 이라는 태그가 작동해야 합니다.

태그가 작동하지 않는 화면

처음 [미리보기]를 눌러 들어가면, 당연히 타이틀을 클릭하지 않았기 때문에, 해당 태그가 작동하지 않는것을 확인 할수 있습니다.

타이틀 클릭 화면

위와 같이 타이틀을 클릭 해주세요.

해당 태그가 작동된 것을 확인 하는 화면

이제 'GA_event_타이틀클릭' 태그가 작동된 것을 확인 할수 있습니다!!! 생각 보다 너무 재밌네요. 이제, [미리보기] 가 아닌, 실제 [제출] 버튼을 눌러 우리가 만든 태그, 트리거, 변수들을 제출하여 실제 제품에 적용해 주세요.

 

 

이 글이 도움이 되었다면, 좋아요❤를 눌러주세요. 주변에 이 정보가 필요한 사람이 있다면, 공유해주세요.

▶[구글 태그 매니저 사용법1] 구글 태그 매니저 구성요소는??

[구글 태그 매니저 사용법1] 구글 태그 매니저 정의 및 구성요소

▶[구글 태그 매니저 사용법2] 구글 태그 어시스턴트란??

[구글 태그 매니저 사용법2] 구글 태그 어시스턴트 - 구글 태그 매니저 설치 됬는지 확인하는 방