구글 태그 관리자(GTM)를 이용하여 구글 애널리틱스 4 (GA4) 맞춤 이벤트 설정하는 방법

 

지난 포스팅에서 구글 애널리틱스 4 (GA4) 맞춤(커스텀) 이벤트 설정시 사용하는 방법 중에 첫 번째로 gtag를 사용하는 방법에 대해 알아보았습니다. 이번 포스팅에서는 맞춤(커스텀) 이벤트 설정시 구글 태그 관리자(GTM)를 이용하여 설정하는 방법에 대해 알아봅니다.

사전 작업으로 구글 태그 관리자(GTM) 회원 가입(계정 생성) 및 웹사이트( 블로그)에 태그 관리자 설치를 먼저 해야합니다. 

구글 태그 관리자를 사용하는 방법은 GTM의 컨테이너 태그를 html 소스에 추가하고 추적에 필요한 GA4 태그를 GTM을 통해 관리하는 것입니다. 이벤트 태그 역시 구글 애널리틱스 태그이기 때문에 GTM에 의한 관리가 가능합니다.GTM이 제공하는 다양한 유형의 트리거를 이용하면 복잡하거나 특이한 경우가 아닌 이상 대부분의 이벤트 발생 조건을 구현 할 수 있습니다.

구글 태그 관리자(GTM) 트리거 유형 4가지

1. 페이지뷰

페이지가 웹 브라우저에 로드될 때 태그를 실행하는 트리거입니다.

• DOM 사용가능
• 동의 초기화
• 창 로드
• 초기화
• 페이지뷰

2. 클릭

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

• 링크만 (<a> 태그에 의해 생성된 링크)
• 모든 요소 (링크를 제외한 클릭 요소 button, div, submit 등)

3. 사용자 참여

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

• YouTube 동영상
• 스크롤 깊이
• 양식 제출
• 요소공개 상태(지정 요소가 화면에 보여질때)

4. 기타

위의 3가지 유형으로 처리되지 않는 경우에 대한  처리를 할 수 있는 트리거 유형입니다.

• 기록 변경
• 맞춤 이벤트
• 자바스크립트 오류
• 타이머
• 트리거그룹

구글 태그관리자를 이용하여 맞춤 이벤트(Custom event)를 설정하는 방법

블로그 글 중에 본문 아래 영역에 있는 다른 글을 클릭했을 때 "클릭 이벤트"를 생성하여 방문자가 게시물을 클릭했을 때 실행될 이벤트를 만들어봅니다.

이벤트 설정 절차

1. 트리거 생성

2. 태그 생성

3. 애널리틱스 웹사이트에서 이벤트 확인

트리거 생성

클릭 이벤트 트리거를 생성하기 위해서는 클릭이벤트가 발생하는 태그에 대한 파악이 먼저 선행됩니다.

1. 다른 글 더 보기 개념의 게시물에서 마우스 우클릭하여 "검사" 메뉴를 클릭합니다.

2. 게시물의 링크 속성값을 확인합니다.  <a href=""> 태그를 사용하여 게시물로 이동되도록 되어 있습니다. 이 작업은 트리거를 생성할 기준을 파악하기 위함입니다.

a 태그를 바로 감싸고 있는 부모 태그의 class 이름을 확인합니다. 

우리가 Click Element 트리거로 사용할 값은 .item-title>a 입니다.

3. 구글 태그 관리자 웹사이트에 로그인합니다.

4. 작업공간 탭의 "트리거" 메뉴를 클릭합니다.

5. "새로 만들기" 버튼을 클릭합니다.

6. 트리거 구성 영역을 클릭하면 오른쪽에 트리거 유형 선택 레이어 팝업이 나타납니다.

7. 트리거 유형 중 클릭 이벤트 트리거 두 가지 중에 선택하여 생성할 수 있습니다. 만약 게기물이 <a>태그로 링크가 연결된 경우 "링크만"을 사용하면 되고, 그 외의 경우 "모든 요소" 트리거를 사용합니다.

8. "링크만"을 클릭 합니다.

9.  "일부 링크 클릭" 선택 해주고, 기본 제공 변수를 선택해줘야합니다. 이 때 "기본 제공 변수 선택..." 메뉴를 클릭합니다.

10. 기본 제공 변수 선택창에서 "Click Element" 를 선택합니다.

11. 생성하는 트리거의 이름을 지정합니다. (예, 다른글 더보기_트리거)

12. 두번째 조건에 CSS선택 도구와 일치를 선택합니다.

13. 위에서 미리 확인해 둔 태그 정보 .item-title>a 값을 세번째 빈칸에 입력해주고 "저장" 버튼을 클릭합니다.

14. 트리거 생성 작업이 끝났습니다. 

이제 이 트리거를 실행시킬 태그를 만들어줍니다.

태그 생성

왼쪽 메뉴 중에 "태그" 메뉴를 클릭 후 "새로 만들기" 버튼을 클릭합니다.

15. 최상단 태그 이름을 적어주고, "태그 구성" 영역을 클릭합니다.

16. Google 애널리틱스 GA4 이벤트를 선택합니다.

17. 태그 이름을 지정합니다. (다른글 더보기 TAG) 

18. 구성 태그를 선택합니다. (구성 태그를 만들지 않았다면 "구글 태그 관리자(Google Tag Manager, GTM)를 통해 내 웹사이트(블로그 등)에 구글애널리틱스(GA) 태그 설치(연동) 하는 방법" 포스팅 글을 참고하세요.)

19. 이벤트 이름을 지정합니다. 필자는 "more_post_click"로 지정했습니다.

 

20. 트리거 영역을 선택 후 좀 전에 추가했던 "다른글 더보기_트리거"를 선택해주고 "저장" 합니다.

21. 게시 버튼을 클릭 후 "버전이름" 과 "버전 설명"을 입력 후 "제출" 합니다.

22. 태그 리스트에서 태그를 확인합니다.

23. 이벤트 설정이 완료되었습니다. 이제 확인을 해볼 시간입니다.

애널리틱스 웹사이트에서 이벤트 확인

내 웹사이트(블로그)를  새로운 브라우저 창에서 엽니다. 그리고 글 하단의 다른글 링크를 2회 클릭해보세요.

그런다음  구글 애널리틱스 웹사이트로 이동 후 "보고서 > 실시간"메뉴를 클릭합니다. 

이벤트 이름 별 이벤트 수 대시보드를 보면 우리가 추가한 이벤트 "more_post_click" 이름을 실시간으로 확인할 수 있습니다. 이벤트 이름은 한글로 입력해도 무방합니다.

오늘은 구글애널리틱스 4 (GA4) 맞춤(커스텀) 이벤트 설정시 사용하는 방법 중 두 번째 방법인 구글 태그 관리자(GTM)를 이용하여 구글 애널리틱스 4 (GA4) 맞춤 이벤트 설정하는 방법에 대해 알아보았습니다. 

다음 포스팅에서는 구글 태그 관리자(GTM)를 이용하여 스크롤 트리거 및  맞춤 HTML 태그 생성 방법에 대해 알아봅니다.

Share this

마케터