brunch

You can make anything
by writing

C.S.Lewis

⑱ 픽셀의 비밀, 맞춤 이벤트 픽셀과 표준 이벤트 픽셀

그로스마케팅 파트너, 허들러스

18. 페이스북 픽셀의 비밀, 맞춤 이벤트 픽셀과 표준 이벤트 픽셀

 

안녕하세요. 그로스마케팅 파트너, 허들러스의 유성민입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열여덟 번째 이야기를 진행해보도록 할게요. 



 지난 글에서 페이스북 장바구니 이벤트 픽셀을 직접 설치해보았습니다. 장바구니 이벤트 픽셀의 경우, 우리 장바구니 페이지 URL에 도착하면, AddToCart라는 이벤트를 전송하라는 명령어를 구글 태그 매니저의 태그, 트리거, 변수를 통해 정의해보았습니다. 


하지만 여러분들이 퍼포먼스 마케터라면 여기서 만족할 수는 없습니다. 단순히 Page URL 기반으로 이벤트 픽셀을 설치하는 것이 아닌, ‘특정 버튼을 클릭한 사람들을 리마케팅 모수로 생성’ 하거나, ‘스크롤을 70% 이상 했던 유저들에게 리타게팅’을 진행한다던가와 같은 고객들의 상세 이벤트를 기반으로 이벤트 픽셀을 설치하여 리마케팅을 구현할 줄 알아야 합니다. 


이렇게 고객의 행동(특정 버튼 클릭, 스크롤, 영상 조회)들을 기반으로 좀 더 자세하게 이벤트 픽셀을 구현하여 설치하는 방법이 페이스북 픽셀을 자유자재로 다루는 끝판왕의 단계라고 볼 수 있습니다. 이 상세 이벤트 픽셀을 태그 매니저를 통해 구현하기 위해서는, 두 가지 개념을 알고 가야 합니다. 이번 장에서는 본격적인 실습을 진행하기 이전에 페이스북 맞춤 이벤트 픽셀과 페이스북 표준 이벤트 픽셀을 배워봅시다.  



1. 페이스북 픽셀의 구조 


이번 글까지 읽으신 분들은, 페이스북 픽셀은 ‘페이스북 기본 픽셀’과 ‘페이스북 이벤트 픽셀’로 나뉘어 있다는 것을 알게 되었습니다. 잠깐 복습을 하고 넘어갑시다.  



페이스북 픽셀은 일반적으로 페이스북 기본 픽셀과 페이스북 이벤트 픽셀로 나뉩니다. 


페이스북 기본 픽셀은 말 그대로, 사용자가 우리 웹사이트를 방문하는 순간 PageView가 발생하며, 웹 페이지가 로딩되는 시점에 발동되기 때문에 트리거를 AllPageView로 설정하였습니다.  


페이스북 이벤트 픽셀은 용도가 다양하며, 사용자가 특정 이벤트를 발생시킬 때 별도로 발동되는 명령어입니다. 예를 들어, 장바구니 페이지에 사용자가 도착하면, AddToCart 이벤트를 전송하는 것입니다.   



기본 픽셀은 우리 웹사이트에 있는 모든 웹페이지에 있어야만 합니다. 그래야만 데이터를 정상적으로 보낼 수 있기 때문입니다. 하지만 이벤트 픽셀은 이벤트가 발생되는 시점에서만 데이터를 정상적으로 보내야 합니다. 



여기까지가 우리가 지난번 배운 내용입니다. 위 설명에서 보다시피, 이벤트 픽셀은 여러 가지 종류가 있었습니다. 예를 들어 장바구니 이벤트의 이름은 AddToCart , 결제 완료 이벤트의 이름은 Purchase입니다. 이렇게 페이스북에서는 고객들이 자주 할만한 이벤트들을 상황에 맞게 적절히 이용하게끔 구현하기 위해서, 이벤트 몇 가지를 미리 정의해놓았습니다. 이를 공식 명칭으로 ‘페이스북 표준 이벤트 픽셀’이라고 부릅니다. 



페이스북에서 제공 중인 표준 이벤트는 아래와 같습니다.   




위와 같이 많은 표준 이벤트 픽셀을 제공해주고 있습니다. 여기에 있는 표준 이벤트 픽셀을 모두 설치할 필요는 없습니다. 이 중 우리가 설치를 원하는 이벤트 픽셀만 선택하여 설치해주면 됩니다. 다시 한번 정리를 하자면 페이스북 표준 이벤트 픽셀은 페이스북에서 제공해주는 이벤트 픽셀의 종류로써 위 표에 있는 이벤트 픽셀들이 모두 포함됩니다. 


하지만 여기서 페이스북 이벤트 픽셀은 또다시 2가지로 나뉩니다. 바로 ‘페이스북 표준 이벤트 픽셀’과 ‘페이스북 맞춤 이벤트 픽셀’입니다.  


2. 맞춤 이벤트 픽셀의 정의 


위 표준 이벤트 픽셀을 보면, 스크롤, 유튜브 영상 조회, 특정 버튼 클릭과 같은 디테일한 행동에 대한 이벤트 픽셀은 따로 안내되어있지 않습니다. 그렇기 때문에 우리가 직접 픽셀 이벤트 이름을 정의하여 만들어줄 필요가 있는데, 이렇게 직접 이벤트 이름을 정의하여 만드는 픽셀의 이름을 ‘맞춤 이벤트 픽셀’이라고 부릅니다. 


즉, 페이스북 이벤트 픽셀은 다시 한번 ‘표준 이벤트 픽셀’과 ‘맞춤 이벤트 픽셀’ 2가지로 나뉩니다.  



픽셀을 자유자재로 다루기 위해서라면 표준 이벤트 픽셀뿐만이 아니라, 맞춤 이벤트 픽셀의 개념도 알아야만 합니다. 그래서 페이스북 픽셀의 전체 구조는 위 이미지와 같은 형태를 띱니다. 그렇다면 표준 이벤트 픽셀과 맞춤 이벤트 픽셀은 단순히 이름만 다를까요? 당연히 아닙니다. 표준 이벤트 픽셀과 맞춤 이벤트 픽셀의 차이에 대해서 자세히 살펴봅시다.  


3. 표준 이벤트 픽셀과 맞춤 이벤트 픽셀의 차이



위 표로 올라가 구매 이벤트가 있는지 살펴봅시다. 구매 이벤트 픽셀은 아래와 같이 되어있습니다. 



fbq('track', 'Purchase', 

{value: 0.00, currency: 'USD'}

);



단순히 소괄호에 track, Purchase만 있는 것이 아니라, value, currency라는 문자 데이터도 함께 있는 것을 볼 수 있습니다. Purchase라는 이벤트는 구매 이벤트이기 때문에 당연히 ‘구매’라는 행위가 발생했을 때, 어떤 제품이 팔렸고, 그 제품이 얼마짜리 제품이며, 화폐 단위는 원화인지 달러인지 등의 추가적인 정보를 전달해야만, 추후 성과 추적 및 리타게팅이 잘 구현될 수 있습니다.


즉 Purchase라는 이벤트에 추가적인 정보를 페이스북에 전달하게 됩니다. 위 이벤트 픽셀 코드에는 두 가지 정보를 제공해주고 있습니다.


1) value : 0.00 : 직관적으로 이해가 될 것 같습니다. 그 상품의 가격 값을 추가 정보로 제공해주고 있습니다.


2) currency : ‘USD’ : 당연히 1) 번 사항에 있는 가격 값이 어떤 화폐 단위를 사용하는지에 대한 정보를 제공해주어야 사용이 가능하기 때문에 2번 정보는 화폐 단위입니다. 대한민국 기준으로 하게 되면 ‘USD’가 아니라, ‘KRW’ 이겠지요.


주목해보면 USD라고 되어있는 부분에는 홑 따옴표가 있고, 0.00이라고 되어있는 부분은 홑 따옴표가 없습니다. 이 부분은 데이터를 컴퓨터가 알아볼 수 있게 처리하는 문법인데, 문자 데이터는 홑 따옴표, 숫자 데이터는 아무런 특수기호 없이 적어주시면 됩니다. 이를 데이터의 타입이라고 합니다만, 데이터 타입에 대해서는 별도의 개발 문서에서 자세히 다뤄보겠습니다.



즉 정리를 해보면 Purchase에는 추가 정보를 제공해주는 value라는 정보와, currency라는 정보가 들어가야 합니다. 자세히 본다면 ‘value : 0.00’과 ‘currency:’USD’ ’라는 추가 정보가 변수의 형태를 띠고 있습니다. 콜론을 기준으로 좌항에는 키값이 들어가 있고, 우항에는 벨류 값이 들어가 있습니다. 


철수가 가지고 있는 돈, 모두 기억하시죠?

변수에 대한 내용이 기억나지 않는다면, 다음 글로 이동하여 다시 한번 살펴보고 옵시다.

https://brunch.co.kr/@seongminyoo/81


Purchase라는 이벤트에 추가적인 변수 형태의 정보를 담아서 데이터로 전송하고 있습니다. 이 변수의 역할은 웹사이트와 웹사이트의 데이터를 페이스북으로 전달하는 매개체의 역할을 하기 때문에 ‘매개변수’라고 부릅니다.  


표준 이벤트 픽셀은 매개변수가 정해져 있습니다. 이벤트 이름이 Purchase 라면 value, currency 매개변수를 붙여주는 것이 정해져 있다는 의미입니다.   




물론 매개변수를 누락하고 그냥 이벤트만 발생시켜도 데이터는 정상적으로 전송이 됩니다만, 추후 페이스북 이벤트 관리자에서 매개변수가 누락되었다는 오류가 나타날 수 있습니다. 하지만 추가 정보가 없다는 의미일 뿐 데이터가 정상적으로 들어오는 데에는 문제가 없습니다. 


표준 이벤트 픽셀은 필수적으로 들어가야 할 매개변수가 있지만, 맞춤 이벤트 픽셀(예를 들면 스크롤, 버튼 클릭, 영상 조회)은 직접 이벤트를 창조하여 설치하는 것이기 때문에, 매개변수가 없어도 되고, 직접 매개변수를 만들 수도 있습니다. 


물론 자바스크립트를 활용할 줄 아는 분들이라면, 직접 매개변수를 만들고 픽셀을 자유자재로 다룰 수 없지만, 개발 지식이 없는 분들이라면 매개변수를 다루기가 다소 어렵게 느껴질 수도 있습니다. 



그래서 다음 글부터는 태그 매니저를 활용하여 버튼을 클릭하거나, 스크롤을 내리거나, 영상을 조회하는 등의 실습 내용들을 자세히 다뤄보도록 하겠습니다. 

긴 글 읽어주셔서 감사합니다. 



블로그 구독자 문의 주소 : team@hurdlers.kr


페이스북 광고 가이드 만나보기  

그로스마케팅 파트너, 허들러스 바로가기

구글 애널리틱스 가이드 만나보기


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari