본문 바로가기
마케팅💡/온라인광고

[페이스북 광고] 페이스북 픽셀 쉽게 생성하는 법 _ 고객 행동 추적하기

by 마케터H 2020. 10. 31.

안녕하세요 여러분! 

혹시 페이스북 광고를 돌리실 예정인가요?

우리가 만든 광고 소재를 통해 우리의 랜딩페이지로 들어온 사람들이 어떤 행동을 하는지 제대로 알고 싶지 않으신가요?

그렇다면 페이스북 픽셀을 생성해서 우리의 랜딩페이지에 심어주시는 과정이 필요합니다.

이 방법은 컴공과가 굳이 아니여도 왕초보여도 다 할수 있지요~~

그럼 페이스북 픽셀을 쉽게 생성하는 법에 대해 알려드리겠습니다. START

 

페이스북 픽셀 쉽게 생성하기

일단 검색창에 페이스북 광고 관리자 설정 후 계정 및 페이지 생성을 할 것  > 이건 금방 하실거에요

 

 

그담에 홈버튼 아래 9개의 점으로 구성된 네모를 눌러서 이벤트 관리자에 들어갑니다.  

 

 

아무것도 생성하지 않은 처음의 상태라면 이렇게 나와요~ 

그럼 여기서 데이터 소스 연결 Click!

 

웹사이트로 연결할거면 웹을 선택해주시고 시작하기 Click

 

Facebook 픽셀을 설치 체크하고 연결 클릭해주세요.

 

 

웹사이트에 픽셀 코드 직접 추가를 눌러주시고~

직접이지만 크게 귀찮거나 어렵지 않아요.

 

 

자 그럼 픽셀 코드가 나와요. 그걸 그대로 쓰는게 아니라 코드 복사 (초록 버튼) 클릭해서 내가 추적하고자 하는 웹사이트 HTML에 등록해주시면 되요.

2번에 어느 공간에 넣으라고 나와있죠? </head>태그 바로 위에 붙여넣으라! 


HTML 완전 기본 구조 

 

<!DOCTYPE html>
<html lang="en">
<head>
<!--head는 안보여줄 정보-->

<meta charset ="UTF-8">  한글페이지를 제작하기 위해선 무조건 해야함, 안하면 글자가 깨진다하네요.
<meata name= "viewport" content="width=device-width, initial-scale=1.0"> 사이즈를 얘기해요
<meta http-equiv="X-UA-compatible" content="ie=edge">
<meta name="description" content="페이지 요약설명">
<meta name="keywords" content="혜동">
<meta name="copyright" content="저작권">
<meta name="publisher" content="퍼블리셔">
<title> 구조 </title>
</head>
<body>
<!-- body는 이용자에게 보여줄 정보-->
block- 실제 눈에 보이는 영역 외에 안보이는 영역으로 화면의 100%를 잡는다. 세로로만 정렬이 가능하다.
Inline- 실제 눈에 보이는 영역만큼만 잡는다. 가로정렬된다-->
</body>
</html>


여러분이 만든 랜딩페이지 </head> 바로 위에 이 픽셀 코드를 삽입하시면됩니다. 

 

imweb페이지에 픽셀코드 넣기 (IF 광고집행을 실습차 해보는 사람이라면 )

imweb를 사용하세요! imweb는 누구나 무료로 기본 템플릿을 이용해서 자신만의 랜딩페이지를 만들 수 있어요.

imweb.me/

(만드는 것은 무료이나 실제로 광고 집행과 연결해서 쓰기 위한 상업용 페이지로 활용하려면 유료로 전환하셔야해요.

기본 22,000원 부터 시작)

 

 

페이지를 만드시고 상단 메뉴에서 내 사이트를 누르면 만든 사이트의 목록이 나옵니다.

도구에 관리를 클릭 Click~ 

 

 

그럼 왼쪽 검정 메뉴바에 톱니바퀴로 된 환경설정을 볼 수 있을거에요.

그걸 누르시면 아래의 리스트가 촤라락 나오고 거기서 SEO, 헤더설정을 클릭합니다.  헤더 헤드 어디서 들어봤져? 

 

자 픽셀코드를 심으란 곳이 어디었죠? 바로 헤드! </head> 바로 앞이라고 했죠!

근데 아임웹은 저렇게 Header Code가 따로 있어서 저 곳에 넣으셔도 되요 

 

Tistory와 같은 코드 안에 추가해야하는 경우

 

아까 말했던대로 </head>앞에 써주세요~

코드를 심고 다시 페이스북 이벤트 관리자에 들어가서 쭉 파란 버튼을 눌러 넘어갑니다.

이벤트 설정 도구열기를 하면 URL을 적는 곳이 있어요.

내가 페이스북 픽셀 코드를 넣었던 사이트의 URL을 넣어주시면 됩니다. 

여기까지 하셔야해요!

 

자 그럼 이렇게 완료!!! 완료 되었다 .

PageView가 활성화되어있다고 뜨져?

 

이벤트 테스트란에 들어가서 내 픽셀이 잘 들어갔는지 이벤트 테스트를 해보실 수도 있어요. 

 

 

저는 잘 처리되었다고 나오네요~~ 

 

 

 

저는 처음부터 생성한 과정을 보여드렸는데, 실제 광고를 집행해서 쌓은 데이터를 보여드리자면

 

이렇게 나와요. 총 이벤트 2.3천회 . 2.3천회의 페이지 방문이 있었다는 뜻으로 해석하시면 됩니다. 

그럼 끝~~~~

 


제가 인트로에서는 페이스북 픽셀을 통해 고객들의 행동을 추적한다고 했었죠?

맞는 말이지만 페이스북 픽셀의 표준 이벤트로만은 추적가능한 행동이 무척 제한적이에요ㅠ  

 

developers.facebook.com/docs/facebook-pixel/reference#standard-events

 

참고 자료 - Facebook 픽셀 - 문서 - Facebook for Developers

Facebook 픽셀 함수에 대한 참고 자료입니다.

developers.facebook.com

이곳에 표준 이벤트 리스트가 나와있으니 참고해주세요! 

 

 

그래서 다음에는 페이스북 픽셀을 바로 웹사이트에 생성하는게 아니라 구글 태그매니저의 컨테이너로 담는!

그니까 페이스북 픽셀 > 구글 태그매니저 > 웹사이트 순으로 코드를 생성하는 구조로 알려드릴게요.

WHY? 구글 태그매니저의 태그들이 더 많고 자세하게 고객행동을 추적할 수 있는 이벤트를 생성해주거든요.

데이터가 많으면 많을수록 더 나은 광고의 개선점을 찾을 수 있겠죠??~

 

그 방법은 다음 포스팅에서 알려드리도록 하겠습니다~ 그럼 bye

페이스북 픽셀설치에 관한 공식적인 튜토리얼은 페이스북 광고관리자 고객센터에서 확인하실 수 있습니다.

www.facebook.com/business/help/952192354843755?id=1205376682832142&recommended_by=490934944618455