구글 태그 매니저 클릭, 스크롤 이벤트 가이드 - 설치부터 활용사례까지

이 콘텐츠는 2020년 제작되어 현재와 다른 내용을 포함할 수 있습니다.

구글 태그 매니저 이벤트 가이드 📓

짤과 함께 따라하는 구글 태그 매니저 클릭, 스크롤 이벤트 가이드

변수, 태그, 이벤트... 이 글 저 글 검색은 하고 있지만 머리만 아프다면?

특정 이벤트가 발생했을 때, 방문자에게 메시지를 보내고 싶다면?

1시간만 투자하면 막막했던 스크립트 설치는 물론이고, 구글 태그 매니저로 만드는 클릭과 스크롤 이벤트 만들기, 만든 이벤트의 활용법까지 얻어가실 수 있습니다. 바로 시작하죠!

1. 구글 태그 매니저 설치

처음 구글 태그 매니저에 로그인 해 컨테이너를 만드시면 설치코드를 받게됩니다. 위의 이미지 1을 보면 설치 스크립트가 2가지로 나뉘어져있죠? 각각 head와 body에 코드를 붙여 넣으라고 하네요. 이 말을 바로 이해하셨다면 설명이 필요없이 설치를 하시면 됩니다. 그러나 카페24나 아임웹같은 빌더사를 통해 홈페이지를 제작하셨거나 외주 개발을 통해 제작하셨다면 영 이해가 가지 않을 수 있어요. 외주 개발을 맡겨 제작한 홈페이지를 운영중이시고, 직접 홈페이지의 html문서에 접근하실 수 없는 경우에는 외주제작사에 연락해 도움을 받으시는 것을 추천드립니다. 설치는 매우 간단해 통상적으로는 추가비용이 발생하지 않거나 수고비 정도로 설치가 가능합니다. 지금부터는 카페24나 아임웹 같은 빌더사를 통해 제작한 홈페이지에 구글 태그 매니저 설치 스크립트를 붙여넣는 방법을 알려드릴게요.

1-1. 카페24에 구글 태그 매니저 스크립트 설치하기.

카페 24의 관리자 센터에 로그인해 주세요. 우측의 운영관리 카테고리를 클릭해 검색엔진 최적화(SEO) 메뉴에서 고급설정을 선택하시면 이미지<2>와 같은 화면이 나올거예요. 이미지<1>의 구글 태그 관리자 설치 스크립트를 head용, body용에 맞추어 복사 + 붙여넣기 해 주신 후 저장을 눌러주시면 간단히 설치가 끝나게 됩니다.

1-2. 아임웹에 구글 태그 매니저 스크립트 설치하기

아임웹 관리자 센터에 로그인해 주세요. 우측의 환경설정 카테고리를 클릭해 SEO, 헤더설정 이라는 메뉴를 클릭해주세요. 스크롤을 내려보시면 이미지<3>와 같은 화면이 나올거예요. 이미지<1>의 구글 태그 관리자 설치 스크립트를 head용, body용에 맞추어 복사 + 붙여넣기 해 주신 후 저장을 눌러주시면 마찬가지로 간단히 설치가 끝나게 됩니다.

2. 쉽게 이해하는 구글 태그 매니저의 원리

구글 태그 매니저는 홈페이지 내의 감시원입니다. 이 감시원의 임무는 홈페이지에 방문한 사람이 마우스를 움직이거나, 페이지를 조회하거나, 어떤 버튼을 클릭하는 등 감시하고 싶은 일을 했을 때, 누군가에게 보고를 하는 일이죠. 보고받는 대상이 구글 애널리틱스 일 수도 있고, 제3의 다른 툴일수도 있어요. 감시원의 보고를 받으려면 다음의 세 가지 요소를 알아야 합니다.

• 변수

• 트리거

• 태그

페이지 URL이나 버튼의 이름처럼 그 내용은 변할 수 있지만 특정은 할 수 있는 '변수'라는 요소를 활용해서 'OO 페이지 URL(변수)이 불러와지면(트리거) 보고하기(태그)' 라는 임무를 감시원에게 줍니다. 감시원은 OO 페이지 URL이 불러와 질 때 마다 GA나, 제 3의 다른 툴에 보고를 하게 되죠. 이를 구분하기 위해 보고서에 'GA에 보고하기', '제 3의 툴에 보고하기' 등으로 이름을 붙여 주는 것을 태그라고 생각하시면 좀 더 이해하기 쉽습니다.

3. 구글 태그 매니저 트리거 만들기

바로 실전에 돌입해 보겠습니다. 트리거를 만들기에 앞서 준비하셔야 하는 사항이 있습니다. 바로 기본 변수를 추가해 주는 일인데요, 전혀 어렵지 않습니다.

구글 태그 매니저의 변수 메뉴를 클릭해주세요. 우측 상단의 구성을 클릭해주세요. 위의 영상을 따라 클릭과 스크롤 변수를 추가해주세요. 클릭 트리거와 스크롤 트리거를 만들기 위한 준비가 끝났습니다.

3-1. 클릭 이벤트 트리거 만들기

클릭 트리거를 만들 때, 유형은 두 가지가 있습니다. 모든요소와 링크만. '모든 요소'의 경우 페이지 내에 있는 링크, 이미지, 버튼 등 모든 요소의 클릭을 추적합니다. '링크만'의 경우 <a> 태그를 활용해 링크가 걸려있는 요소만을 추적할 수 있습니다. '모든 요소'가 조금 더 큰 영역을 추적한다고 보시면 간단합니다.

이제 어떤 행동을 추적하고 싶은지 결정해야 합니다. 예를 들어, 우리 홈페이지 내에 '장바구니'라는 버튼이 있다고 해 볼까요? 이 버튼을 클릭하는 고객을 추적해보겠습니다.

먼저, 개발자 도구를 열어주세요. 개발자 도구의 좌측 상단에는 요소검사 아이콘이 있습니다. 이를 클릭해 추적하고자하는 요소를 클릭해보세요. 더 간단하게는 추적하고자 하는 버튼을 우클릭해 검사(Inspect)를 클릭해주세요. 자동으로 하이라이트 되는 부분을 유심히 살펴보세요.

요소 검사를 해보니 아래와 같은 부분이 하이라이트 되었군요.

우리에게 필요한 부분은 중간의 class="btn default-cart" 부분입니다. 기본 장바구니 버튼을 의미하는 것 같군요! 장바구니 버튼을 class 이하의 내용으로 특정할 수 있게 되었으니, 이제 트리거 제작으로 넘어가볼까요?

트리거 메뉴로 들어가 새로 만들기를 클릭합니다. 트리거의 이름은 구분이 쉽도록 cartClick으로 만들어 주었습니다. 트리거 구성을 눌러 모든 요소를 클릭합니다. 모든 클릭이 아닌 일부 클릭으로 변경해주면 Click Classes 요소를 선택할 수 있습니다. 조건은 포함 또는 일치를 상황에 따라 선택 후 요소 검사를 통해 찾았던 class="이 부분의 내용"을 입력해주세요. 저장을 해주시면 끝입니다. 여러분은 첫번째 트리거를 성공적으로 만드셨습니다! 축하합니다.

3-2. 스크롤 이벤트 트리거 만들기

스크롤 이벤트는 더욱 만들기 쉽습니다. 트리거 메뉴에서 새로 만들기를 클릭해주세요. 스크롤을 70% 정도 내렸을 때 트리거가 발동하기를 원하기 때문에 이름은 scroll70으로 짓도록 하겠습니다. 트리거 유형은 사용자 참여의 스크롤 깊이를 선택해주세요. 세로 스크롤 깊이를 선택하고 원하는 깊이(퍼센트 기준)을 숫자로 입력해주세요. 절반 정도라면 50, 스크롤을 조금만 내려도 발동되길 원한다면 20-30을 입력해도 좋겠죠? 이 트리거는 페이지와 관계없이 발동하길 원하기 때문에 모든 페이지를 선택해주겠습니다. 저장을 눌러주면 여러분은 스크롤 이벤트를 성공적으로 만드셨습니다. 벌써 두 번째 성공이네요!

4. 만든 이벤트를 태그로 활용하기

구글 태그 매니저로 만든 트리거가 발동할 때 구글 애널리틱스를 사용해 해당 이벤트가 얼마나 많이 발생했는지 정보를 받아 보는 것은 많은 포스팅에서 다루고 있는 주제입니다. 그러나 정작 마케터들이 원하는 순간에 메시지를 보내는 방법에 대한 포스팅은 찾아보기 어렵더군요 🧐. 구글 태그 매니저와 마케팅 툴을 사용해 장바구니를 클릭할 때, 스크롤을 내리는 순간 팝업 메시지를 보내는 방법까지 알려드리도록 하겠습니다.

4-1. 구글 애널리틱스에서 이벤트 추적하기

만든 이벤트를 태그를 활용해 구글 애널리틱스로 보내봅시다. 구글 태그 매니저의 태그 메뉴에 들어가 새로 만들기를 클릭해주세요. 태그의 이름은 가능하면 영문을 사용해줍니다. 먼저 하단의 트리거부터 설정해보겠습니다. 저는 장바구니 클릭을 추적하고 싶으니 위에서 만들어둔 장바구니 클릭 트리거를 선택해주겠습니다.

상단의 태그 구성이 중요합니다. 클릭 이벤트를 추적하는 것이기 때문에 추적유형은 이벤트, 카테고리는 클릭으로 적어주겠습니다. 작업에는 어떤 버튼을 클릭했는지 보기 위해 클릭된 텍스트(내용)이 입력되도록 설정하였습니다. 라벨에는 어떤 페이지에서 해당 클릭이 일어났는지 보기 위해 Page Path를 설정해 주도록 할게요! 마지막으로 Google 애널리틱스 설정에서 현재 사용중인 GA계정을 연결해주면 설정이 완료됩니다.

구글 태그 매니저 공식 사용법 👀

• 구글 태그 관리자 고객센터 바로가기

4-2. 이벤트가 발생할 때 접속자에게 메시지 보내기

아! 이거 클릭할 때 메시지 보내면 바로 전환될 것 같은데 😭

스크롤 많이 내린 고객에게 따로 푸시를 보낼 순 없을까? 🧐

채널톡, 브레이즈와 같은 이벤트 기반 마케팅 툴을 사용하고 있다면 트리거가 발동한 순간 고객에게 메시지를 보내도록 설정할 수 있습니다. 특히, 이벤트가 발생했을 때 적절한 메시지를 보내면 페이지를 보고 있는 고객을 전환하는데 큰 도움이 됩니다. 이 글에서는 채널톡의 마케팅 기능을 활용해 이벤트가 발생한 순간 메시지를 발송하는 예를 보여드릴게요.

👀 채널톡을 사용중이라면? 더 자세한 가이드 보기

사전 준비

구글 태그 매니저의 템플릿 메뉴를 클릭하고, 태그 템플릿을 추가해주세요. 채널톡의 템플릿을 추가하기 위해 Channel.io를 검색해주세요. 태그 템플릿 목록에 'Channel.io'가 잘 보인다면 성공입니다!

템플릿을 활용해 이벤트 보내기

이제 미리 만들어둔 스크롤 트리거를 활용해 이벤트를 보내볼게요. 태그 구성에서 미리 받아둔 Channel.io를 선택하고, Action은 Track(Send event)를 선택해줍니다. 트리거는 기존에 만들어 둔 스크롤 이벤트를 활용하도록 할게요. 같은 방식으로 클릭과 같이 다양한 이벤트를 보낼 수 있습니다.

스크롤을 내렸을 때 푸시 메시지 발송

페이지 지정과 메시지 입력은 채널톡을 통해 미리 해 두었습니다. 구글 태그 매니저로 만든 이벤트가 발생하면 채널톡으로부터 메시지가 도착하는 것을 볼 수 있습니다. 구글 태그 매니저는 유저의 행동을 추적하는 것 뿐만 아니라 전환을 이끌어 낼 수 있는 액션을 적용하기에도 필수적인 툴입니다. 이렇게 구글 태그 매니저를 활용해 추적 뿐만 아니라 직접적으로 고객에게 원하는 메시지를 보내는 방법까지 알아봤습니다. 수고 많으셨습니다!

이벤트 기반의 마케팅 툴이 처음이라면? 🤓

채널톡 마케팅 기능 바로가기

--- 👀 함께 보면 도움되는 마케팅 시리즈

• SEO 마케팅이란? 10배의 트래픽을 모으는 SEO 전략과 성공사례

• 리텐션 마케팅이란? 전략과 성공사례를 소개합니다. 👍

• CRM 마케팅이란? 전략과 성공사례를 소개합니다. 🤓

• 트로이아르케 마케팅 사례: 고객을 남기는 것이 마케팅 전략

• 마케팅 프로그램 모음(종류, 사례 포함)