김민주
이 글은 GTM을 활용해 GA4에서 새로운 이벤트를 만드는 내용을 담고 있습니다. GA4, GTM 최초 설정 방법이 궁금하신 분은 웹사이트에 GA4 연결하기 (2) GA 계정 만들기 를 참고해주세요.
GA4에서 버튼 클릭 데이터를 어떻게 볼 수 있을까요?
GA4에서 버튼 클릭 데이터를 수집해봅시다. 데이터리안 웹사이트에는 콜 투 액션(Call to Action, CTA) 버튼이 있습니다. 아래 SQL 데이터 분석 캠프 패키지 페이지 화면의 하단에 있는
VOD 패키지 신청하기 버튼이 CTA 버튼입니다.
이 버튼을 클릭하는 사람들이 얼마나 되는지 GA4에서 확인해보고 싶습니다. GA4에서 클릭 이벤트는 자동으로 수집해주고 있지만 특정 버튼을 클릭했는지 따로 확인하고 싶다면 설정이 필요합니다.
GTM을 사용해 버튼 클릭 데이터 수집하기
버튼 클릭 데이터를 수집하기 위해서 구글 태그 관리자(Google Tag Manager, GTM)으로 가서 설정을 해보겠습니다. 이벤트를 수집하기 위해 태그와 트리거가 필요합니다.
- 태그: 태그는 Google 애널리틱스 같은 시스템에 데이터를 전송하는 코드를 말합니다.
- 트리거: 트리거는 클릭, 양식 제출 또는 페이지 로드 같은 특정 이벤트를 수신합니다. 특정 유형의 이벤트를 수신해 태그가 실행되도록 해줍니다. 트리거가 없으면 태그가 발동되지 않습니다.
태그와 트리거에 대해 자세히 알고 싶다면 태그 관리자 고객센터: Google 태그 관리자의 구성요소 문서를 참고해주세요.
버튼 클릭 트리거 설정하기
- 왼쪽 메뉴에서 트리거를 선택하고 우상단
새로 만들기버튼을 클릭합니다.
- 트리거 이름을 정해줍니다. “SQL 캠프 패키지 페이지 CTA 버튼 클릭"이라고 적어줬습니다.
- 트리거 유형 선택에서 “클릭 > 링크만”을 선택해줍니다.
- 우리는 모든 링크 클릭이 아니라 특정 링크를 클릭할 때만 데이터를 수집하고 싶기 때문에 “일부 링크 클릭"을 선택합니다.
- 위의 화면에서 “구글 애널리틱스 트래킹” 값이 선택되어 있는 드롭다운 메뉴를 클릭하면 아래 항목들이 나옵니다. 아래 항목들을 사용해 어떤 조건에서 이벤트를 수집할지 지정해줄 수 있습니다.
- Click Classes: 클릭하는 요소의 클래스명
- Click Text: 클릭하는 요소의 텍스트 값
- Click URL: 클릭하는 요소의 URL 값
- Page Path: 클릭이 일어나는 페이지의 경로
버튼 클래스명 확인하기
지금 데이터를 수집하려는 SQL 캠프 패키지 페이지 신청하기 버튼의 경우 버튼 텍스트와 연결 링크가 자주 바뀝니다. 바뀌지 않는 요소를 기준으로 데이터를 수집하도록 해주어야 웹사이트가 변경되었을 때도 데이터가 문제없이 수집될 수 있습니다. 이번 튜토리얼에서는 클릭하는 요소의 클래스명을 특정해주겠습니다.
- 버튼의 클래스명을 확인하기 위해 개발자 도구를 실행해봅시다. 크롬을 사용하고 있다면 크롬창 우상단 더보기 버튼을 눌러 도구 더보기 > 개발자 도구 를 클릭해서 개발자 도구를 실행할 수 있습니다.
- 클래스명을 확인하고 싶은 버튼을 우클릭하고 검사를 클릭하면 우측 개발자 도구 화면에서 버튼에 해당하는 HTML 코드가 하이라이트 되어 보입니다. 그 부분에서
class=뒤에 나오는 값이 클래스명입니다.
HTML 이 뭔가요?
HyperText Markup Language의 약자로 웹페이지를 만들기 위해 웹브라우저 위에서 동작하는 언어입니다. HTML의 정의와 사용방법이 궁금하시다면 아래 링크를 참고해주세요.
- 위에서 확인한 클래스명을 넣어줍니다.
- 패키지 페이지에서 일어나는 버튼 클릭만을 수집하려고 하기 때문에 Page Path 조건도 추가해줍니다.
GA4 태그 설정하기
위에서 만들어둔 트리거가 작동할 때 GA4로 데이터를 보내줄 수 있도록 태그를 만들어줄 차례입니다. 태그가 없으면 트리거가 발동되더라도 그 데이터를 아무데도 보내줄 수 없습니다. 태그를 만들어두어야 트리거가 발동되었을 때 데이터를 GA4으로 보내 저장해줍니다.
- GTM 왼쪽 메뉴에서 태그 탭을 클릭하고
새로 만들기버튼을 클릭합니다.
- 태그의 이름을 입력해줍니다. GA4 에서 작동하는 태그이기 때문에 맨 앞에 “GA4”라고 붙여주었습니다.
- “태그 유형 선택”에서 “Google 애널리틱스: GA4 이벤트”를 선택합니다.
- 측정 ID는 GA4 속성의 측정 ID 값을 확인하여 입력해줍니다. GA4 속성의 측정 ID 값은 GA4 관리 > 속성 > 데이터 스트림 페이지에서 확인할 수 있습니다. 측정 ID 입력칸 우측에 ‘이 컨테이너에서 Google 태그가 발견됨’이라는 메시지가 뜬다면 잘 입력해주신 겁니다. 측정 ID 값을 매번 입력해주는 게 번거롭다면 GTM 변수를 만들어서 해결해줄 수 있습니다. 자세한 설정 방법은 GA4 태그를 만들 때마다 매번 측정 ID 값을 입력해줘야 하나요? 글을 참고해주세요.
- 이벤트 이름을 입력해줍니다. 이 값으로 GA4에서 이벤트 데이터를 확인할 수 있습니다. 이벤트 이름만으로도 구분할 수 있도록 구체적으로 써주어야 GA4에서 확인하기 편리합니다.
- 아까 만들어두었던 트리거를 선택해줍니다. 선택한 트리거가 발동될 때 태그가 실행됩니다. 이 경우에는 CTA 버튼을 클릭할 때 트리거가 발동되고 GA4 SQL 캠프 패키지 CTA 버튼 클릭 태그가 실행되어 GA4에 sql-package-CTA 라는 이름의 이벤트가 수집됩니다.
미리보기
자, 이제 트리거와 태그가 제대로 세팅되었는지 확인해볼 차례입니다.
- GTM 화면에서 우상단 미리보기를 클릭합니다.
- Google Tag Assistant 페이지가 열립니다. 태그를 확인해보고 싶은 페이지 URL을 입력해주고
Connect버튼을 클릭합니다.
- 미리보기 연결이 되면 입력한 페이지로 연결되고 “Tag Assistant Connected” 라는 메시지를 확인할 수 있습니다. 이 페이지에서 신청하기 버튼을 클릭하고 아까 만들어둔 태그가 잘 작동하는지 확인해보겠습니다.
- 신청하기 버튼을 클릭했으면 Tag Assistant 페이지로 돌아와보겠습니다. Summary 화면의 Tags 탭에서 아까 생성해둔 “GA4 SQL 캠프 패키지 CTA 버튼 클릭” 태그가 작동된 것을 확인할 수 있습니다.
GTM 배포
- 다시 GTM으로 돌아가서 우상단의
제출버튼을 눌러 제출합니다. 제출 버튼을 누르지 않으면 변경사항이 반영되지 않으니 주의해주세요!
지금까지 GTM으로 버튼 클릭 이벤트를 수집하는 새로운 태그를 만들어 보았습니다. 데이터가 GA4 대시보드에 반영되기까지 최소 24 시간에서 최대 48시간이 소요되니 대시보드에서 스크롤 이벤트를 바로 확인하지 못하더라도 너무 놀라지 마세요! GA4의 실시간 대시보드에서는 조금 더 빨리 새롭게 수집되는 스크롤 이벤트를 볼 수 있습니다.
혹시 이 글을 읽으면서 구성, 이벤트, 매개변수, 트리거 같은 용어들이 생소했다면 참고 자료에서 ‘Google 태그 관리자의 구성요소' 문서를 읽어보시길 추천합니다.
