페이스북 픽셀 설치하기

이 글은 와이즈케어 블로그에 게재된 글입니다.


저는 초보 부모를 위한 육아용품 구매가이드, 베베템을 아내와 함께 만들고 있습니다. 
국민 육아템이 궁금하시면 둘러보세요. bebetem.com


페이스북에서 광고 많이 하고 계실 겁니다.

그런데 말입니다…

광고 잘 하고 계시나요?

페이스북에서는 광고효과를 측정하기 위해서 페이스북 픽셀이라는 측정 도구를 제공하고 있습니다. 이 글에서는 페이스북 픽셀의 효과와 설치 방법에 대해서 알려드리겠습니다.

알림: 페이스북 픽셀 설치는 일정 수준의 웹 개발 지식이 필요합니다. 개발 지식이 없는 분이시라면 개발자에게 부탁하시거나, 설치 대행사에게 요청하시기 바랍니다.


1. 픽셀 설치 효과


페이스북 픽셀은 페이스북 광고 효과를 정확히 측정하기 위한 분석 도구입니다. 페이스북 광고관리자에서는 기본적으로 캠페인별 클릭수, 노출수 등 페이스북에서의 사용자 행동에 관한 데이터를 볼 수 있습니다.

와이즈케어 — 페이스북 픽셀 설치 이전 광고관리자 화면

픽셀을 설치하고 나면 각 캠페인으로 인한 직접적인 광고 효과를 캠페인별로 구분해서 분석할 수 있습니다.

전자상거래 사이트인 경우엔 실제 캠페인으로 인해 발생된 구매수, 구매액, 구매당 비용 등을 분석할 수 있고, 회원제 서비스 사이트인 경우엔 캠페인으로 인해 발생된 회원가입수, 회원가입당 비용을 분석할 수 있습니다.

와이즈케어 — 페이스북 픽셀 설치 이후 광고관리자 화면

효율적인 광고란 결국 비용 대비해서 더 많은 매출 / 가입전환을 일으키는 광고입니다. 비용을 효율적으로 집행하기 위해선 효과를 정확히 측정하는 것부터 시작해야 합니다. 그럼 이제부터 페이스북 광고의 직접적인 효과를 측정할 수 있는 페이스북 픽셀을 설치하는 방법을 알아보겠습니다.


2. 픽셀 설치


(1) 픽셀 만들기

  1. 페이스북 픽셀을 만들기 위해 페이스북 광고 관리자 페이지로 들어갑니다.
  2. 상단 메뉴에 광고관리자 > 자산 > 픽셀을 눌러 픽셀 만들기 페이지에 들어갑니다.

3. 픽셀 만들기 페이지에서 픽셀 만들기 버튼을 누릅니다.

4) 픽셀 이름을 넣습니다. 픽셀 이름은 원하시는 대로 적으시면 됩니다.

픽셀 이름을 넣으면 픽셀 코드가 나타납니다.

픽셀 코드는 아래와 같은 형식으로 되어있고, ID 값은 사용자마다 다르게 되어있습니다.

(아래는 픽셀 코드는 예시입니다. 페이스북 광고관리자에서 발급된 픽셀 코드를 사용하세요.)

<!-- 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', '#####################');
fbq('track', 'PageView');
</script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=##################&ev=PageView&noscript=1" /></noscript> <!-- DO NOT MODIFY --> <!-- End Facebook Pixel Code -->

(2) 픽셀 코드 설치하기

알림 : 여기서부터는 웹 개발 지식(HTML) 이 필요합니다.

페이스북 픽셀 코드는 웹사이트의 모든 페이지에 설치해야 됩니다. 페이스북에서는 </head> 태그 전에 픽셀 코드를 삽입하는 것을 권장합니다.

소스코드 예시 
<html>
<head>
...
<!-- 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', '#####################');
fbq('track', 'PageView');
</script> <noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=##################&ev=PageView&noscript=1" />
</noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
</head> 
<body>
...
</body>
</html>

(3) 픽셀 이벤트 코드 호출하기

알림 : 여기서부터는 고급 웹 개발 지식 (HTML, Javascript, CSS, 웹서버 개발 언어(php, python, ruby 등등) 이 필요합니다.

간단히 픽셀 코드를 삽입하는 것으로 끝나면 좋겠지만, 그렇지 않습니다.

장바구니 담기, 상품 구매 등등 웹사이트의 사용자 행동을 이벤트라 부르고, 이런 이벤트가 일어날 때마다 페이스북에 알려주어야 합니다.

페이스북에서 주로 전자상거래 서비스에 알맞게 아래와 같이 표준 이벤트 코드를 만들어두었습니다. 해당 웹사이트 행동이 일어날 때, 표준 이벤트 코드를 호출해주어야 합니다.

이 글 처음에 예시로 들었던 구매건수, 구매액, 구매당 비용 등의 광고효과 분석을 위해 꼭 필요한 표준 이벤트는 ‘구매’ 이벤트입니다.
하지만 다른 표준 이벤트도 설정해두시면 페이스북 광고 캠페인을 통해 어떤 이벤트가 일어나는지 더 자세한 분석을 할 수 있으니, 표준 이벤트는 모두 설정하는 것을 권장해 드립니다.

https://www.facebook.com/business/help/402791146561655?helpref=faq_content

필수적인 구매 이벤트를 예로 들어 픽셀 이벤트 코드 호출 방법을 설명해드리겠습니다.

구매 이벤트 발생 시 해당 표준 이벤트 코드인 아래 코드를 웹페이지 내부에 설치해야 합니다.

fbq('track', 'Purchase', {value: '상품 가격', currency: 'KRW'});

여기서 value에는 실제 상품 가격을 넣으시고, currency(통화)는 우리나라 화폐인 경우엔 ‘KRW’, 그 이외 외국환일 경우에는 ISO 4217 표준 코드를 확인하시고 각 외국환에 알맞은 currency를 입력하시면 됩니다.


설치방법 a : 페이지별 설치

페이지별 설치방법은 구매가 완료된 뒤에 구매 완료 페이지 또는 구매 감사 페이지 등으로 페이지가 전환되는 경우에 사용할 수 있습니다.

만약 구매 후 /thanks.html 페이지로 이동하는 경우 /thanks.html 페이지에 아래와 같이 픽셀 이벤트 코드를 픽셀 코드에 추가하여 호출시킵니다.

소스코드 예시 
<html>
<head>
...
<!-- 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', '#####################');
fbq('track', 'PageView');
// 구매 이벤트 호출 fbq('track', 'Purchase', {value: '상품 가격', currency: 'KRW'});
</script> <noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=##################&ev=PageView&noscript=1" />
</noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
</head> 
<body>
...
</body>
</html>

‘상품 가격’은 실제 상품 가격으로 바꾸셔야 됩니다. 이 부분은 실제 결제 데이터를 가져와야 되기 때문에 개발 지식이 없으시면 진행하기 어렵습니다. 고객이 여러 개의 상품을 구매한 경우엔 상품 가격은 고객이 구매한 상품의 총합을 넣으면 됩니다.

알림 : 페이스북 픽셀은 개별적인 상품의 구매까지는 분석하지 못 합니다. 개별 상품의 분석을 원하시면 Google Anlaytics Enhanced Ecommerce를 설치가 필요합니다.


설치방법 b : 자바스크립트(Javascript) 이용

이용하고 계신 웹사이트 솔루션에 또는 구현 방법에 따라 구매 후 특정 페이지로 이동하지 않을 수도 있습니다. 이럴 경우엔 설치방법 a와 같은 방식으로 픽셀 이벤트 코드를 호출하기 어렵습니다.

이럴 경우엔 자바스크립트를 이용해서, 결제가 완료되는 시점에 아래 자바스크립트 코드를 호출해야 합니다.

//Javascript 파일 또는 <script> 태그 내부 
fbq('track', 'Purchase', {value: '상품 가격', currency: 'KRW'});

(4) 픽셀 설치 확인

픽셀이 제대로 설치되었다면, 광고 관리자의 픽셀 페이지에서 아래와 같이 픽셀 트래픽을 확인할 수 있습니다. 또 픽셀 이름 옆의 상태가 초록색 활성 상태로 변경됩니다.


3. 광고 관리자에서 픽셀 데이터 설정


페이스북 픽셀을 통해서 수집된 정보를 광고 관리자 화면에서 확인하려면 아래와 같이 설정이 필요합니다.

1) 광고관리자에서 원하는 보기 옵션을 선택합니다.

2) 열 선택 버튼을 눌러 열 맞춤 설정을 선택합니다.

3) 홈페이지 탭을 선택하면 픽셀로 수집된 데이터를 볼 수 있습니다. 직접적인 광고효과를 보기 위해서 구매건수, 구매당 비용, 구매 전환값(구매액)을 선택합니다.

4) 선택한 설정을 저장해 두면 계속해서 사용할 수 있습니다.


와이즈 케어 — 페이스북 픽셀 설치 대행
 페이스북 픽셀 설치에 어려움을 겪으시나요? 와이즈케어에선 페이스북 픽셀 설치/설정 대행을 진행하고 있습니다. 설치 대행을 원하시는 분은 와이즈케어 홈페이지 또는 sg.lee@wizehat.com(이성관 팀장)으로 연락 주시면 자세히 안내해 드리겠습니다.

About. 와이즈케어
 웹사이트나 앱을 개발하고 런칭하는 것만으로 끝나지 않습니다. IT 비즈니스는 고객과 시스템에 대한 정확한 측정과 분석, 그리고 이를 바탕으로 한 개선활동의 반복을 통해 성장합니다. 와이즈케어는 이러한 성장의 사이클을 IT 비즈니스의 데이터의 측정과 분석부터 엔지니어링까지 제공하는 토탈운영지원 솔루션입니다.


페이스북 픽셀 설치 방법에 알아보았습니다. 어떤 분석 툴이든 구매전환 / 가입전환을 측정하기 위해서는 일정 수준의 개발이 진행되어야 합니다. 하지만 페이스북 광고의 직접적인 효과를 측정하고 효과적인 페이스북 마케팅 전략을 수립하기 위해선 필수적입니다. 페이스북 광고를 집행하고 계신 분이라면 픽셀을 설치해서 마케팅 성과를 높여보시길 바라겠습니다.

끝 — 페이스북 픽셀 설치


광고

누구나 육아 베테랑이 될 수 있는, 초보 부모를 위한 육아용품 가이드.
베베템에서 내 아이에게 필요한 육아용품을 알아보세요.

bebetem.com