⑮ 페이스북 기본 픽셀과 이벤트 픽셀의 차이
그로스마케팅 파트너, 허들러스
15. 페이스북 기본 픽셀과 이벤트 픽셀의 차이
안녕하세요. 그로스마케팅 파트너, 허들러스의 유성민 대표입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열다섯 번째 이야기를 진행해보도록 할게요.
지난 장표에서 우리는 태그 매니저 컨테이너를 사이트에 삽입하는 방법까지 배워보았습니다. 이젠 페이스북 픽셀을 삽입하여야 합니다. 하지만, 페이스북 픽셀은 사실 두 가지의 종류가 있습니다. 기본 픽셀, 이벤트 픽셀입니다. 이번 글에서는 기본 픽셀과 이벤트 픽셀의 차이와 이벤트의 정의를 자세히 살펴봅시다.
1) 웹 사이트와 웹 페이지
페이스북 픽셀은 사실 2가지 종류가 있습니다. 2가지 종류의 이름은 바로, 기본 픽셀과 이벤트 픽셀입니다. 기본 픽셀은 단어 그대로와 같이 우리 웹사이트에 기본적으로 설치가 되어야 하는 픽셀이고, 이벤트 픽셀은 특정 이벤트가 발생할 때마다 설치되는 픽셀입니다. 페이스북의 기본 픽셀은 페이스북에서 리마케팅이나 사용자 행동 흐름을 파악하기에 필수적으로 필요한 픽셀입니다. 여기서 단어 두 가지만 배우겠습니다. 웹사이트와 웹 페이지입니다.
웹사이트 : 웹페이지 여러 개가 묶여있는 하나의 묶음 문서
웹페이지 : 웹에서 로드 시 , 사용자의 컴퓨터에 나타나는 단일 페이지 단위
웹사이트와 웹페이지
예를 들어 쇼핑몰을 하나 오픈했다고 가정할 때, 그 쇼핑몰에는 메인 페이지, 제품 카테고리 페이지, 제품 상세 페이지, 장바구니 페이지 등 각각의 단일 페이지들이 있을 것입니다. 이런 각각의 개별 페이지 단위를 웹 페이지(Web Page)라고 부릅니다. 웹 페이지가 묶여 있는 하나의 쇼핑몰을 웹 사이트(Web Site)라고 합니다.
2) 기본 픽셀과 이벤트 픽셀
웹사이트와 웹페이지의 차이를 인지한 상태에서, 본격적으로 페이스북 픽셀에 대한 내용을 다뤄보겠습니다. 페이스북 기본 픽셀은 광고 관리자에서 쉽게 받아볼 수 있습니다.
우선은 페이스북 기본 픽셀이 어떻게 생겼는지 살펴보기 위해, 이벤트 관리자로 이동합니다.
저는 이미 픽셀이 만들어져 있어서, [이벤트 추가]라는 항목을 클릭한 후, [새 웹사이트에서 추가]라는 메뉴를 눌렀습니다.
[픽셀이 아직 없는 사람이라면]
1. 이벤트 관리자로 이동합니다.
2. 데이터 소스 연결을 클릭하고 웹을 선택합니다.
3. Facebook 픽셀을 선택하고 연결을 클릭합니다.
4. 픽셀 이름을 추가합니다.
5. 웹사이트 URL을 입력하여 간편한 설정 옵션을 확인할 수도 있습니다.
6. 계속을 클릭합니다.
픽셀을 설치할 방법이 나타나면, [코드 직접 설치] 버튼을 클릭합니다.
그런 다음, 초록색의 [코드 복사] 버튼을 클릭하고, 복사한 코드를 메모장으로 옮겨봅시다.
[기본 픽셀 코드]
<!-- Facebook Pixel Code -->
<script>
! function(f, b, e, v, n, t, s)
{if(f.fbq) return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n, arguments):n.queue.push(arguments)};
if(! f._fbq) f._fbq=n;n.push=n;n.loaded=! 0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=! 0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s)}(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '870979713338978');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=870979713338978&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
페이스북 기본 픽셀 코드는 위와 같이 생겼습니다. 해당 코드에서 빨간색 글씨로 있는 부분에 주목합니다. 빨간색 글씨를 해석하자면, “PageView가 발생하면, 870979713338978번의 픽셀 번호로 데이터를 전송하라.”라는 의미가 됩니다.
‘페이지 뷰’는 말 그대로 우리 웹사이트에 있는 웹페이지들에 특정 고객이 방문해서, 웹페이지를 보았을 때 발생합니다.
즉 페이스북 기본 픽셀은 우리 웹사이트에 있는 특정 웹페이지에 방문할 때마다 데이터를 전송하게 됩니다.
자 웹페이지와 웹사이트의 개념에 대해서는 알 것입니다. 문제는 페이스북 픽셀입니다. 페이스북 기본 픽셀 ( Facebook Basic Pixel)은 반드시, 모든 웹페이지에 삽입이 되어야 합니다.
페이스북 기본 픽셀을 설치하는 방법은 생각보다 간단합니다. 웹사이트의 공통 Head에 픽셀 코드를 그저 복사하여 붙여 넣기만 하면 되기 때문입니다. 문제는 이벤트 픽셀입니다. 이벤트 픽셀에 대해서 살펴보기 이전에, ‘이벤트’가 무엇인지에 대해서 자세히 이야기를 다뤄보겠습니다.
3) 이벤트란?
예를 들어 고등학생 3학년의 성민이라는 학생이 있다고 가정합시다. 성민이는 학생이기 때문에 성민이의 본분은 ‘공부’입니다. 그런데 갑자기 어머니가 부릅니다. “성민아 ~ 밥 먹어라"라고 부르게 되면, 유성민이라는 학생은 어머니의 부름에 응답해야 합니다. 밥을 먹으러 가던, 어머니의 부름에 대답을 하던 성민이는 원래 하던 일을 멈추고 특정 반응을 보여야 합니다. 그래서 성민이의 입장에서 어머니의 부름은 하나의 우연한 사건, 이벤트(Event)가 됩니다.
웹 환경에서도 마찬가지입니다. 우리 웹 브라우저가 하는 일은 사용자가 인지하지 못하는 속도로 화면을 계속 깜빡거리며 띄워주는 것입니다. 하지만 사용자가 특정 버튼을 클릭했다거나, 특정 행동을 하게 되면, 웹사이트는 하던 일을 멈추고 사용자가 하는 행위에 맞게 창을 띄워주어야 합니다. 예를 들어, 장바구니 버튼을 클릭하면 웹사이트는 장바구니 페이지를 띄워주어야 합니다. 웹사이트의 입장에서 사용자의 행위(클릭, 스크롤, 키보드 입력 등)는 하나의 우연한 사건, 이벤트입니다.
우리는 위에서 기본 픽셀에 대해서 살펴보았습니다. 기본 픽셀은 어느 페이지에 방문하는 것과 상관없이, 우리 웹사이트에 들어오는 유저들이 모두 데이터를 전송하도록 하기 위해, 우리 웹 페이지 전체에 설치가 되어야 합니다. 이벤트 픽셀은 기본 픽셀과는 달리, 특정 이벤트가 발생하는 시점에서만 데이터를 전송해야 합니다. 예를 들어 장바구니 페이지 도착 이벤트 픽셀을 따로 설치하려고 합니다. 그렇다면, 장바구니 도착 이벤트 픽셀은 어디에 심어져야 할까요? 그렇습니다. 장바구니 페이지에’만' 설치가 되어있어야 합니다.
그렇다면 이벤트 픽셀은 어떻게 생겼을까요?
이벤트 픽셀의 생김새를 보기 위해, 하단의 [계속] 버튼을 클릭합니다.
한번 더 [계속] 버튼을 클릭해주세요.
[코드를 사용하여 이벤트를 설치하세요]라고 되어있는 링크를 클릭합니다. 그러면 다른 창이 하나 나타납니다.
페이스북 픽셀에 관한 안내문 웹페이지입니다. 여기서 [표준 이벤트]를 우선 클릭해봅시다.
표준 이벤트를 클릭하면 안내문에 표준 이벤트 카테고리로 스크롤이 이동되고, 보이는 이미지에서 [픽셀 표준 이벤트 참고 자료]를 클릭하여 다른 웹페이지로 이동합니다.
그러면 페이스북에서 제공해주는 다양한 표준 이벤트가 발생하며, fbq(‘track’)이라는 명령어로 구성이 가능하다는 안내가 나옵니다. 예를 들어 장바구니 이벤트를 웹사이트에 설치를 하고 싶다면, 이벤트 픽셀을 아래와 같이 생겼을 것입니다.
<script>
fbq(‘ track ’ , ‘ AddToCart ’);
</script>
여기서 <script>와 </script>는 명령어가 시작되고 끝나는 것은 의미합니다. 그리고 fbq(‘track’, ‘추적하고자 하는 이벤트 이름’)을 넣어주면 됩니다.
위 이벤트 픽셀은 장바구니 페이지에 도착했을 때만 명령어가 발동이 되어야 합니다. 이렇게 한 줄로 표시가 되어있는 코드를 우리는 이벤트 픽셀이라고 부릅니다. 다음 장에서는 기본 픽셀과 이벤트 픽셀을 실제로 설치하기 위해서, 명령어를 설치하고 관리할 수 있는 도구인 구글 태그 매니저에 대해서 자세히 살펴봅시다.
블로그 구독자 문의 주소 : info@hurdlers.kr
