GA4 : 버튼 입력 이벤트 생성하기

우리가 웹서비스를 만들어 사용자들에게 제공하기 위한 기능중에 버튼 기능이 정말로 많습니다. 그리고 사용자들이 이러한 버튼을 얼마나 언제 클릭하는지의 정보를 알 수 있다면 마케팅, 서비스 개선 등 다양한 곳에  사용할 수 있는 데이터가 되는 것이지요!

그래서 오늘은 버튼 클릭을 잡는 이벤트를 함께 만들어 가볼게요!

 

저는 제 블로그에서 목록 더보기라는 버튼을 누를때 추적할 수 있는 이벤트를 만들어 보겠니다.

 

1. 먼저 구글 테그 매니저에서 트리거를 생성합니다

 

2. 위에서 새로만들기 버튼을 클릭해주세요

그럼 이렇게 트리거를 구성하는 부분이 나올거에요

 

3. 이제 트리거 구성 박스에 마우스를 가져다 대면 연필모양의 아이콘이 뜨는데 그걸 클릭해주세요

그러면 이렇게 트리거 유형 선택이 나옵니다! 여기서 모든요소를 선택해주세요

 

4. 모든요소를 클릭하면 이런 화면이 뜨는데 가운데 체크박스를 모든클릭에서 일부클릭으로 바꿔주세요

5. 그후에 아래에서 기본제공 변수를 선택해주세요

 

6. 그러면 이제 아래와 같은 화면이 뜰겁니다

7. 이제 잠깐 우리가 설정하려 하는 웹사이트로 이동해서 해당 버튼을 우클릭 -> 검사를 눌러주세요

그럼 이런화면이 뜰텐데 제 경우에는 해당 버튼을 "btn view-more"라는 클래스로 구분이 가능하니 이걸 활용할게요

만약 class이름이 같은게 여러개 있고 id로 구분이 된다면 밑에서 제가 선택할 click classes대신 click id를 선택하시면 되요! 다른 요소(ex. target, url)들도 이렇게 변경하시면 됩니다.

 

8. 이제 다시 gtm으로 돌아와서 click classes를 선택한 후 같음 으로 설정하고 버튼의 클래스 이름을 넣어주세요

 

9. 저장을 누르고 트리거 이름을 설정해 주면 트리거 완성입니다!

10. 이제 태그로 이동해서 새로만들기를 클릭해주세요

 

11. 그 다음 태그 유형을 클릭하고 Google 애널리틱스 : GA4 이벤트를 클릭해주세요

12. 구성 태그는 자신의 웹사이트 구성이름으로 설정해 주시고 이벤트 이름을 만들어주세요

13. 아래로 내려와서 트리거를 설정해 줄거에요. 트리거에 마우스 커서를 대고 연필모양을 클릭하면 트리거 선택 부분이 나오는데 여기서 저희가 아까 설정한 트리거를 선택해줄게요

14. 선택하고 완료 후 태그의 이름을 정해주면 짜잔 이제 완성이에요!

웹사이트에 완벽하게 적용하기 전에 먼저 미리보기로 실험을 해볼게요

여기서 미리보기를 클릭해주세요

 

15. 아래 화면에 URL부분에 자신의 웹서비스를 넣어주고 connect를 눌러주세요

 

16. 그러면 아래처럼 자신의 웹사이트가 나오는데 해당 버튼을 클릭해주세요

17. 클릭하고 다시돌아오면 아래처럼 이벤트가 발생한것을 볼 수 있습니다.

cf) 추가적으로 variables를 클릭하면 아래처럼 해당 이벤트가 발생한 순간 다양한 이벤트 매개변수 값이 어떻게 설정되어 있는지 확인할 수 있어요! 만약 버튼을 눌렀을때 사이트가 이동한다면! 그런데 어디로 이동하는지 정확히 모르겠다면 매개변수를 click url등을 추가해서 보면 확인해 볼 수 있는 등 다양하게 활용이 가능할 것에요

 

18. 자 그럼 이제 마무리에요. 아래 화면으로 돌아가서 제출버튼을 누르면! 이제 ga4에 여러분이 만든 버튼 클릭 이벤트가 수집이 될거에요!