메타 픽셀 설치하기

메타 픽셀이 무엇인가요?

메타 픽셀은 로워드 브릿지 강의 호스팅에 방문한 사용자의 행동을 기록해서 광고에 활용할 수 있도록 도와주는 추적 도구입니다. 쉽게, 누가 우리 사이트에서 무엇을 했는지 메타에 알려주는 역할을 합니다.

메타 픽셀이 있으면 광고를 보고 누가 들어왔고, 그 사람이 어떤 행동을 했는지 추적이 가능합니다.

구글 애널리틱스랑 뭐가 다른가요?

구글 애널리틱스와 메타 픽셀은 기능적으로 다릅니다.

구분	메타 픽셀	구글 애널리틱스
목적	광고 최적화	통계 분석
주 사용처	페이스북, 인스타 광고	전체 방문 분석
핵심	누가 전환했는가?	어떻게 이용했는가?

메타 픽셀 설정 방법

메타 광고 관리자에 로그인하신 뒤, 아래 사진의 비즈니스 포트폴리오 만들기를 통해 광고 계정을 생성해야합니다.

해당 버튼을 클릭하면 아래 사진과 같은 팝업이 나타나게 되는데, 해당 팝업에서 빈 칸 없이 모든 내용을 채워주세요. 채워진 내용을 기반으로 담당자 설정등을 진행하실 수 있습니다.

광고 계정 설정이 완료되었다면, 아래 사진과 같은 화면으로 접근하여 메타 픽셀 설정을 진행해야 합니다. 좌측 관리자 메뉴 내에서 이벤트 관리자 메뉴를 클릭하여 이동해 주세요.

이벤트 관리자로 접근하면 데이터 연결 버튼이 나타나는데, 해당 버튼을 클릭하여 신규 데이터를 연결해 주세요. 데이터 연결을 클릭하면 새 데이터 소스 연결 팝업에서 웹을 클릭해 주세요.

만들기 버튼을 클릭하고 나면 아래와 같은 화면이 나타납니다. 이제 픽셀을 사이트에 설치해야 합니다. 'Meta 픽셀 설정' 버튼을 클릭해줍니다.

클릭하면 '코드 직접 설치'를 클릭하여 접근해 주세요.

아래 사진과 같은 화면이 나타납니다. 코드를 복사해서 로워드 브릿지 강의 호스팅에 연결하기 위해 코드 복사 버튼을 클릭해주세요.

코드 복사를 클릭할 경우 자동으로 클립보드에 저장됩니다. Ctrl + V 하면 붙여넣을 수 있습니다.

복사했다면, 로워드 브릿지 강의 호스팅 관리자로 들어가서 기본 관리 > 외부 코드 설정 페이지로 이동해 주세요.

외부 코드 설정에서 추가하기 버튼을 클릭해 주세요.

클릭하면 아래와 같은 상태로 나타나는데, 코드 타입을 <script> 삽입 형으로 설정한 뒤 복사한 코드를 그대로 붙여넣어 주세요.

붙어 넣을때 아래와 같은 값이 붙여넣어질텐데, 살짝 수정이 필요합니다.

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

<script>와 </script>를 지워주세요. 그럼 아래와 같이 최종적으로 입력됩니다.

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

이 상태에서 <noscript> ...... </noscript>를 복사하고 지워주세요. 지운 상태로 저장해 주시면 됩니다.

지운 것은 바로 외부 코드를 하나 더 추가해준 뒤, 아래와 같이 noscript 삽입 형으로 선택해 주세요.

똑같이 <noscript>와 </noscript>를 지워준 뒤 아래 코드와 같이 저장하면 끝입니다.

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2311164926059777&ev=PageView&noscript=1"
/>

시간이 지나면 실제 픽셀 이벤트가 발생하면 자동으로 집계됩니다다.