⑭ 마케터를 위한 구글 태그 매니저와 페이스북 픽셀
그로스마케팅 파트너 허들러스
14. 마케터를 위한 구글 태그매니저와 페이스북 픽셀
안녕하세요. 그로스마케팅 파트너 허들러스의 유성민 대표입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열네번째 이야기를 진행해보도록 할게요.
1. 구글 태그 매니저 소개
지난 글에서, 페이스북 픽셀은 페이스북 바깥에서 떨어지는 트래픽들에게 GPS와 같은 추적장치를 달아 그들의 행동을 관찰하고, 특정 행동을 완료한 유저들을 리마케팅 모수로 묶어주는 역할을 하는 자바스크립트 명령어의 일종이라고 설명하였습니다.
자 근데, 문제가 하나 생겼습니다. 명령어를 웹사이트에 설치해야 한다는 것이지요. 만약 인간의 뇌에 명령어가 너무 많이 동시에 발생하면 어떻게 될까요? 우리는 혼란에 빠지게 됩니다. 웹사이트도 마찬가지입니다. 명령어가 너무 많으면 심할 경우, 사이트가 다운될 수 있지요. 또, 자바스크립트를 바로 웹사이트에 복사하여 설치하는 것은 굉장히 위험합니다. 명령어들끼리 충돌할 수도 있고, 명령어의 기능이 제대로 작동안될 수가 있습니다.
그래서 우리는 페이스북 픽셀을 Container 라는 가상의 그릇을 만들어 설치합니다. 명령어를 바로 사이트에 넣거나 수정하는건 너무나도 위험하고, 개발지식이 필요한 일이기 때문에, 우리는 페이스북 픽셀은 컨테이너(Container)라는 곳에 담아 둘 것입니다. 기억해두세요. 페이스북 픽셀을 설치하기 이전에 우리는 이 ‘가상의 그릇’을 웹사이트에 심어야만 합니다. 그래서 우리는 잠시 페이스북 픽셀을 잊고, 이 컨테이너를 먼저 웹사이트에 삽입하는 방법에 대해 알아봅니다.
컨테이너를 만들어주는 계정 단위의 시스템을 Google Tag Manager 라고 합니다. 줄여서 GTM이라 부르는데, 해당 가이드북은 GTM에 대한 가이드가 아닌 , 페이스북 픽셀이기 때문에, GTM에 대한 자세한 설명은 생략하겠습니다. 여튼, GTM은 페이스북 픽셀과 같은 다양한 명령어들을 웹이나 앱에서 유동적으로 설치했다가 삭제했다가 하면서 관리할 수 있는 툴입니다. GTM은 첫째로 안전하고, 둘째로는 개발지식이 없는 사람들 명령어들을 쉽게 관리할 수 있다는 점입니다.
모두 , 구글 창에서 Google Tag Manager 라고 검색합니다. Web & Mobile 로 시작하는 링크를 클릭합니다.
[무료 사용] 버튼을 클릭해주세요.
간단한 약관 동의 후 구글 태그 매니저 계정을 처음으로 만드는 단계에 도달합니다. 계정을 적으라고 나오는데, 여러분들이 알아볼 수 있는 계정을 생성해주시면 됩니다. 국가는 당연히 대한민국으로 해주세요.
계정을 만들었다면, 이 계정에 상속될 컨테이너를 생성해줄 수 있습니다. 지금 만들 이 컨테이너가 페이스북 픽셀과 같은 명령어들을 넣었다 뺐다가 유동적으로 관리할 수 있게 도와주는 것입니다.
여러분들이 알아볼 수 있는 컨테이너 이름을 설정하고, 컨테이너를 사용할 위치가 나옵니다. 웹, IOS, Android, AMP가 있습니다. 웹은 말그대로 우리가 생각하고 있는 웹사이트, IOS와 Android는 어플리케이션이고, AMP는 구글에서 자체적으로 개발한 웹이라고 보시면 됩니다. 나머지 것들은 개발지식이 상당한 수준에서 필요하기 때문에, 우리는 웹을 중심으로만 페이스북 픽셀을 삽입한다고 가정하고, 진행해보겠습니다.
계정을 만들면, 팝업창이 하나 나타납니다. 여기 보이는 2개의 코드가 사이트 내 컨테이너를 넣을때에 삽입해야하는, 컨테이너 코드입니다. 말 그대로, 빈그릇 그자체를 웹사이트에 넣어주는 역할을 해주는 코드입니다. 우리는 이 코드를 통해 컨테이너를 웹사이트에 넣고, 그 후에서야 페이스북 픽셀 코드를 컨테이너에 넣어보겠습니다.
2. 구글 태그 매니저 설치 방법, 확장 프로그램 소개
여러분들은 이 코드를 복사해서 붙여넣을 만한 웹사이트가 없으니, 실습이 조금 어려울 것이라 생각됩니다. 대신, 제가 앞으로 보여드릴 티스토리 블로그는 네이버 블로그와 달리 FTP(사이트 관리자 계정)에 접근이 가능하여, 우리가 직접 HTML을 수정할 수 있습니다. 최근 초대장 기능도 없어져, 티스토리 블로그는 다음 아이디만 있다면 쉽게 만들 수 있습니다. 그래서 혹시, 사이트가 없어서 태그매니저 실습이 어려우신 분들은 티스토리 블로그를 만들어주세요.
위의 보이시는 사이트는 제가 대학시절 작성했던 디지털 마케팅에 관한 글을 다루는 티스토리 블로그입니다. 이 티스토리 블로그에 구글 태그매니저 컨테이너 코드를 넣어보겠습니다.
관리자 창으로 이동하여 FTP 파일에 접근한 다음 , 다시 구글 태그매니저로 갑니다.
구글 태그매니저 컨테이너 삽입을 위해, 위의 코드는 <head> 에서 가능한 한 높은 위치, 아래의 코드는 <body> 가 열리는 바로 뒤에 코드를 붙여넣어달라고 합니다. 시키는 대로 위 코드는 <head>가 열리는 부분에, 밑의 코드는 <body>가 열리는 부분에 붙여넣었습니다. 전혀 어렵지 않죠 ? 이렇게 하면 컨테이너(Container)를 웹사이트에 삽입하는 것은 모두 끝이 납니다.
1) 컨테이너를 도와주는 확장 프로그램
컨테이너를 심었어도 아무 것도 변하는 것이 없다.
웹사이트에 컨테이너가 심어졌는지 안 심어졌는지 확인하는 것은 쉽지 않습니다. 사이트 코드를 설치 후에, [미리보기] 버튼을 눌러, 디버깅 모드로 접속 시, 정상적으로 연결되었다는 안내가 나타납니다.
새 창이 열리면서 URL을 입력하고 , Start 버튼을 누르면 디버깅 모드로 이동합니다.
그런 다음 디버깅 모드 상태에서 티스토리 블로그가 나올때, Debugger Connected 라는 안내가 나타나면 정상적으로 설치가 된 것입니다.
이런 연결을 정상적으로 진행하기 위해서는 확장 프로그램 설치가 필요합니다. 크롬 브라우저라면, 브라우저 최상단 오른쪽에, 점이 세로로 세 개 있는 모양이 하나 있을 것입니다.
확장 프로그램은 크롬을 좀 더 원활하게 사용하게끔 도와주는 소프트웨어 프로그램을 의미합니다. 우리는 크롬 웹스토어로 이동하여, 컨테이너 확인을 위한 확장 프로그램을 다운로드 받을 것입니다.
크롬 웹스토어에서는 다양한 확장 프로그램을 다운로드 받을 수 있습니다. 우리는 컨테이너가 잘 나타나도록 도와주는 Tag Assistant 확장 프로그램을 검색하여 설치합니다.
Tag Assistant를 설치하면, 크롬 브라우저 창 오른쪽 상단에 아이콘이 하나 생기게 됩니다. 이게 정상적으로 나타난다면, 우리는 성공적으로 컨테이너 도우미를 설치한 것입니다.
2) Facebook Pixel의 설치여부를 확인해주는 확장 프로그램
확장 프로그램을 한 개 더 다운로드 하겠습니다. 그 이름은 Facebook Pixel Helper 입니다. Pixel Helper를 사용하면, 여러분이 사이트의 소유권이 없더라도, 특정 사이트에 페이스북 픽셀이 설치되어있는지 여부를 확인할 수 있습니다, 이 페이스북 픽셀 확장 프로그램으로 내가 방문한 사이트에 페이스북 픽셀이 잘 설치되었는지 쉽게 알 수 있습니다.
실제 페이스북 픽셀이 설치된 사이트에 들어가면 픽셀 확장 프로그램이 활성화 되면서, 픽셀이 설치되어 있다는 것을 보여주고 있습니다. 페이스북 픽셀이 사이트에 설치되어있지 않다면, 픽셀 헬퍼의 불이 꺼져있는 것도 확인할 수 있습니다.
우리는 페이스북 픽셀을 웹사이트에 설치하기 위해 간단한 원리를 알아보았습니다. 개발 지식이 없는 상태에서 페이스북 픽셀을 웹사이트에 바로 설치하는 것은 매우 위험하기도 하고, 제대로 작동되기도 어렵습니다. 그렇기 때문에 컨테이너라 불리는 가상의 명령어를 담아둘 수 있는 빈 그릇을 만들어서 웹사이트에 설치해보았습니다. 이제 남은 것은 빈 그릇안에 페이스북 픽셀을 설치하는 것입니다. 다음 장에서 본격적으로 빈그릇을 관리해주는 명령어 관리 시스템, 구글 태그매니저를 자세히 살펴봅시다.
블로그 구독자 문의 주소 : team@hurdlers.kr
