구글 태그 관리자(GTM)를 이용하여 스크롤 트리거 및 맞춤 HTML 태그 생성 방법

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

참고로, 구글 태그 관리자와 구글 애널리틱스가 서로 연동 되어 있어야합니다. 아직 설치 및 연동을 하지 않은 경우 구글 태그 관리자(Google Tag Manager, GTM)를 통해 내 웹사이트(블로그 등)에 구글애널리틱스(GA) 태그 설치(연동) 하는 방법 또는 구글 태그관리자(GTM) 회원 가입(계정 생성) 및 웹사이트( 블로그)에 태그 관리자 설치 하는 방법 포스팅 중에 편한 방법을 참고하여 설정을 먼저 하세요.

스크롤(Scroll) 트리거(Trigger) 생성하는 방법

스크롤 트리거란 내 웹사이트(블로그 등) 방문자가 게시물을 볼 때 스크롤하는 행동을 추적하기 위해 활용됩니다.  세로 스크롤 깊이 등을 설정하여 방문자가 해당 게시물을 어디까지 읽었는지 가늠할 수 있어요. 

1. 구글 태그 매니저 웹사이트에 로그인합니다.

2. 작업공간 탭 > 트리거 메뉴를 선택  > "새로 만들기" 버튼을 클릭합니다.

3. 트리거 이름을 지정합니다. (필자는 "스크롤_80_트리거"로 명명했습니다.)

4. 트리거 구성영역을 클릭 후 "트리거 유형 선택" 팝업에서 사용자 참여 유형중 "스크롤 깊이"를 선택합니다.

5. 세로 스크롤 깊이를 체크 합니다.

6. 비율 선택 > 비율을 입력합니다.  가령, 나는 50%까지 읽어 내려간 방문자를 트리거 하고 싶다면 "50"을 입력하시면 됩니다.

7. 트리거 실행 조건은 "창 로드(gtm.load)" 선택합니다.

8. 트리거 실행 조건으로 모든 페이지를 선택합니다.

9. 미리보기 버튼을 눌러서 연결이 되었는지 확인하셔도 됩니다.

10. "제출" 버튼을 누른 후 "버전 이름 및 버전 설명"을 간력히 입력해주고 "게시" 버튼을 눌러서 마무리 합니다.

다음 작업으로 태그를 생성하고, 캠페인에서 이벤트를 불러올 차례입니다. 구글 태그 관리자를 통해서 이벤트를 생성하는 경우 항상 트리거를 먼저 생성 후 다음 작업으로 태그를 생성하는게 순서이고 반드시 2개의 작업을 모두 제출 후 게시해야만 동작합니다.

태그 생성하기 - 맞춤 HTML 태그 

태그를 생성할 때 어떤 태그 유형을 선택하느냐에 따라 이벤트가 달라집니다.

우리는 사용자가 50% 이상 읽어 내려갔을 때 사용자에게 감사의 메세지를 보여주는 태그를 생성해볼거에요. 

1. 작업공간 > 태그 메뉴 선택 > "새로 만들기" 버튼을 클릭합니다.

2. 이름 없는 태그를 지우고 태그명을 지정합니다.

3. 태그 구성을 클릭하여 태그 유형 선택 레이어 팝업에서 "맞춤 HTML" 를 선택합니다.

4. HTML 영역에 다음 스크립트를 추가해주세요.

<script>

  alert( '게시물을 끝까지 읽어주셔서 감사합니다. 좋은 하루 보내세요.' );

</script>

5. 다음 작업으로 트리거를 선택시 좀 전에 생성한 "스크롤_80_트리거"를 선택해주고 "저장"합니다.

6. 제출 버튼을 클릭 후 게시 버튼을 클릭하여 마무리 합니다.

만약, 나는 방문자들이 50%이상 읽은 게시물이 어떤 것들인지 확인하고 싶으신경우

태그 유형 선택시 "맞춤 HTML 대신 "Google 애널리틱스:GA4 이벤트"를 선택하세요.

구성태그를 선택해주시고, 이벤트 이름을 지정합니다.

그리고 트리거를 선택해주시고 저장하세요. "제출" 및 "게시" 합니다.

오늘은 구글 태그 관리자(GTM)를 이용하여 스크롤 트리거를 생성하는 방법과 맞춤 HTML 태그를 생성하는 방법에 대해 알아보았습니다. 다음 포스팅에서는 구글 태그 관리자(GTM)를 이용하여 내 웹사이트(블로그 등) 방문자 IP 주소 수집하는 방법에 대해 알아봅니다.

Share this

마케터