개발자를 위한 구글태그매니저
by saegeul
구글태그매니저
구글 태그매니저는 구글에서 개발한 태그를 관리할 수 있는 툴이다. 태그란 html, javascript 코드를 지칭하는 것으로 이를 직접 사이트에 심지 않아도 구글 태그매니저를 통해 필요한 태그가 필요한 시점에 사이트의 특정위치에 로드되어 실행되는 것처럼 활용할 수 있다.
Dependency
이 글에서 설명하는대로 구글 태그매니저를 활용하기 위해서는 다음의 dependency가 클라이언트(프론트엔드)에 설치되어야 한다. 또한 아래의 링크 문서를 읽어보고 이해하고 적용해야 한다. 이 패키지는 구글 태그매니저를 웹사이트에 적용하기 쉽게 도와준다.
npm install react-gtm-module --save태그매니저가 필요한 이유
웹사이트에 꼭 필요한 기능 중 하나는 사용자들의 특정 행동을 트래킹하는 것이다. 예를들어 가벼운 학습지 웹사이트에서 사용자들이 광고를 보고 특정 언어 패키지의 랜딩페이지에 도달 후 랜딩페이지를 읽어보고 원한다면 장바구니에 해당 패키지를 담고 구매를 할 것이다.
즉, 일반적인 이커머스 서비스에서는 랜딩페이지 뷰 → 콜투액션(ex. 구매 유도 버튼 클릭) → 장바구니 담기 → 구매의 과정을 거친다. 사용자들이 각 과정에서 얼마나 이탈하는지, 얼마나 장바구니에 물건을 담는지, 얼마나 구매를 하는지를 정확히 파악하는 것은 굉장히 중요하다.
이러한 사용자 일련의 행동 패턴을 트래킹하여 마케팅을 포함한 비즈니스의 중요한 의사결정을 하는데 참고해야 하고 이는 마케터의 역할이다. 개발자는 마케터와 잘 협력하여 웹사이트에서 발생하는 사용자 행동패턴이 잘 트래킹되도록 도와야 한다.
마케터는 외부의 다양한 광고 플랫폼을 활용하여 광고를 집행한다. 일반적으로 페이스북, 네이버, 카카오, 구글 광고(유튜브, 배너광고 등) 등이 있다. 위에서 언급한 사용자의 행동 패턴을 측정해야하는 이유는 각 광고플랫폼의 특정 광고 캠페인의 효율을 알아야 어떤 광고 플랫폼에 또는 어떤 광고 캠페인에 더 많은 광고비를 써야하는지 의사결정 할 수 있기 때문이다.
구글 태그매니저를 통해 사용자의 행동 데이터들을 각 광고 플랫폼에 보낼 수 있다. 위의 이미지는 페이스북 광고 플랫폼인데 페이스북의 특정 광고 캠페인을 통해 웹사이트에서 발생한 구매 데이터를 확인할 수 있다. 마케터는 이를 보고 효율이 좋은 광고는 끄고 효율이 좋은 광고에 더 많은 비용을 지출하여 구매를 극대화 시킬수 있다.
각 광고 플랫폼 뿐만 아니라 구글에서 개발한 웹 분석 도구인 구글 애널리틱스를 포함한 구글의 다양한 웹 분석 플랫폼과 구글과 제휴된 다양한 써드파티 플랫폼에도 데이터를 보낼 수 있다.
구글 태그매니저를 반드시 사용해야 하는 것은 아니지만 이를 사용하면 마케터들이 코드를 보는대신 더 손쉬운 인터페이스에서 필요한 트래킹을 조정할 수 있다. 개발자의 관점에서는 프론트엔드 코드가 더 깔끔해진다. 각 광고 플랫폼으로 사용자 행동데이터를 보내는 코드를 웹사이트에 일일이 심는대신 해당 코드를 구글 태그매니저에서 관리하면 되기 때문이다.
태그매니저의 역할
태그매니저의 역할을 한눈에 보자면 아래의 이미지와 같다. 하나의 웹서버로서 웹사이트에서 발생하는 이벤트들을 각 광고 플랫폼의 서버로 포워딩해주는 게이트웨이 역할을 한다. 아래의 설명 상 용이하게 웹사이트에서 발생하는 이벤트들을 구글태그매니저로 보내는 것을 1번 구간, 구글태그매니저에서 각 플랫폼으로 포워딩해주는 것을 2번 구간이라고 해보자.
태그매니저 인터페이스
태그매니저를 다루기 위해서는 위의 이미지 왼쪽 메뉴 부분에 보이는 트리거, 태그, 변수의 개념에 대해 이해하는 것이 중요하다.
트리거
트리거는 사용자의 특정 행동을 캐치하기 위해 필요하다. 위의 태그매니저의 역할에서 1번 구간의 책임을 맡는다. 즉, 트리거는 웹사이트에서 발생하는 회원가입, 로그인, 장바구니 담기, 구매와 같은 사용자 이벤트가 발생했음을 알리는 신호를 구글태그매니저로 보내주는 역할을 한다. 트리거를 정의하기 위해서는 다음의 두가지 작업을 해야한다.
첫번째, 웹사이트에 트리거를 정의하기 위한 코드를 심는다.
두번째, 태그매니저에서 트리거를 설정한다.
하지만 간단한 트리거를 정의하기 위해서는 웹사이트에 코드를 심어야 하는 첫번째 과정을 생략해도 된다. 구글태그매니저는 몇몇 표준화된 사용자 일련의 행동을 측정하기 위한 기본적인 트리거 정의 방법(트리거 유형)들을 제공한다. 예를들어 사용자가 특정 페이지로 이동한다면(페이지뷰 이벤트 발생) 해당 페이지만의 고유한 url path가 있을 것이다.
또한 사용자가 웹사이트의 특정 버튼을 클릭한다면(버튼 클릭 이벤트 발생) 해당 버튼의 고유한 텍스트(ex. 회원가입)가 있을 것이다. 이렇게 간단한 사용자 이벤트를 측정하고 싶다면 코드를 심는 과정을 생략하고 두번째인 태그매니저에서 트리거를 다음과 같이 설정함으로써 트리거를 정의할 수 있다.
하지만 더 디테일한 사용자 행동을 트래킹하기 위해서는 코드를 반드시 심어야 한다. 예를 들어 다음의 코드는 사용자가 로그인을 했을때 이를 트리거로 정의하기 위한 코드이다. 사용자가 로그인했을때 signInFunc 이라는 함수가 호출된다고 가정하자.
아래의 코드는 login 이라는 이벤트 명과 함께 사용자가 로그인을 한 방법(카카오, 구글, 이메일 등)에 대한 데이터를 태그매니저에 보내준다.
03_sign_in 트리거를 클릭해보면 다음과 같은 화면이 나온다. 트리거 유형을 맞춤 이벤트로 하고 이벤트 이름을 login으로 설정했다. 위의 코드에서 dataLayer 객체의 event 키에 login을 값으로 지정했기 때문에 태그매니저에서는 들어오는 이벤트를 이 값을 보고 고유한 이벤트로 인식한다. 따라서 웹사이트에서 설정하는 event 명은 유니크해야 한다. 참고로 dataLayer는 태그매니저에 보내주기를 원하는 데이터를 정의하기 위한 프로퍼티이다.
다음과 같이 더 많은 데이터를 보내줄 수도 있다. 참고로 다음의 코드는 구글 애널리틱스의 향상된 전자상거래 기능을 구글태그매니저를 활용하여 구현하기 위한 방법이다. 구글 애널리틱스의 향상된 전자상거래 기능을 구현해야 한다면 구글 공식문서를 읽어볼 것을 추천한다.
태그
태그란 웹사이트에서 특정 시점(사용자의 특정 행동 이벤트 발생)에 실행되기를 원하는 코드 뭉치이다. 위의 태그매니저의 역할에서 2번 구간의 책임을 맡는다. 특정 시점이란 위에서 정의한 특정 트리거가 실행되는 시점을 의미한다.
예를들어 페이스북 광고 플랫폼에 사용자 구매 데이터를 보내주기 위해서는 다음의 코드가 실행되어야 한다. 아래의 코드는 페이스북 documentation 에서 확인할 수 있다. 여기서는 구매를 했다는 데이터와 함께 어떤 제품을 구매했는지 해당 제품의 가격은 얼마인지에 대한 데이터를 같이 보내준다.
참고로 {{ }} 안에 들어있는 값들이 무엇인지는 아래의 변수 부분을 읽어보면 된다.
<script>
fbq('track', 'Purchase', {content_name: {{Complete ProductName}}, value: {{Complete Price}}, currency: 'KRW'});
</script>광고 플랫폼들은 사용자의 행동 데이터를 트래킹하기 위해 필요한 코드들을 정의해놓는다. 즉, 각 광고플랫폼에서 정의한 코드들이 실행되어야 해당 광고 플랫폼에서 어떤 광고 캠페인을 통해 사용자가 웹사이트에 방문했으며 장바구니 추가 또는 구매와 같은 중요한 행동들을 했는지 확인할 수 있다. 따라서 각 광고플랫폼을 위한 태그가 각각 정의되어야 한다.
네이버 광고 플랫폼에 사용자 구매 데이터를 보내주기 위해서는 다음의 코드가 실행되어야 한다.
<script type="text/javascript"src="https://wcs.naver.net/wcslog.js"> </script>
<script type="text/javascript">
var _nasa={}; if(window.wcs) _nasa["cnv"] = wcs.cnv("1","300000"); </script>태그는 특정 트리거가 실행될때 실행될 수 있도록 정의된다. 예를 들어 아래의 이미지에서 03-로그인-GA 태그는 위의 트리거 부분에서 언급한 03_sign_in 트리거가 실행되면 실행된다.
이미 정의된 태그를 클릭해보면 다음과 같은 화면이 나온다. 어떤 트리거가 실행되었을 때 어떤 코드가 실행되어야 하는지를 설정한다.
변수
변수는 말그대로 변수이다. 태그매너저 전역에서 사용하는 글로벌 변수라고 이해하면 된다. 태그매니저에서 기본으로 제공하는 기본 변수가 있고 사용자가 직접 정의하는 사용자 정의 변수가 있다. 태그 또는 트리거의 여러곳에서 중복되어 사용되는 데이터들을 변수로 정의해놓으면 편리하게 사용할 수 있다.
예를들어 위의 태그 파트에서 설명한 페이스북 광고플랫폼에 구매 데이터를 보내주기 위해 실행되어야 하는 태그에 변수가 포함되어 있다. 어떤 패키지를 구매했는지와 해당 패키지의 가격을 나타내는 Complete ProductName, Complete Price 변수이다.
<script>
fbq('track', 'Purchase', {content_name: {{Complete ProductName}}, value: {{Complete Price}}, currency: 'KRW'});
</script>Complete Price 라는 변수를 클릭해보면 다음과 같은 화면이 나온다. 변수 유형과 함께 데이터 영역 변수 이름을 지정해야 한다.
데이터 영역 변수는 트리거와 관련이 있다. 다음은 트리거 마지막 부분에서 예시로 든 코드인데 dataLayer 객체의 price 라는 프로퍼티가 구글태그매니저 변수의 ‘데이터 영역 변수 이름’에 맵핑된다.
따라서 사용자가 특정 패키지를 구매했을때 어떤 패키지인지(name), 그리고 해당 패키지가 얼마인지(price)를 태그매니저를 통해 각 광고 플랫폼에 보내줄 수 있게 된다.
마치며
이번 포스팅에서 구글태그매니저가 무엇인지 그리고 어떻게 사용하는지에 대해 대략적으로 설명하였다. 하지만 직접 개발하기 위해서는 태그매니저 개발환경을 셋팅할 줄 알아야 하고 마케터와 잘 협력하여 각 광고플랫폼에 실제로 태그매니저에서 보내주는 데이터들이 잘 들어오고 있는지를 확인 할 수 있어야 한다.
또한 구글 애널리틱스를 어느정도 활용할 줄 아는 것이 좋다. (그리고 반드시 사용해야 한다.) 그래야 태그매니저를 통해 보내는 데이터들이 구글 애널리틱스에 잘 도달하는지를 확인해보며 개발할 수 있다. 즉, 디버깅 툴로써 활용할 수 있다. 마케터의 도움없이 디버깅할 수 있는 확실한 도구이다.
다음 포스팅에서는 구글 태그매니저 개발환경을 셋팅하는 방법을 작성해보겠다.
