페이스북 광고를 새로 공부해보겠다는 분들이 은근 많습니다. 그 분들께 한결 같이 제일 먼저 묻습니다.
“우리 홈페이지나 쇼핑몰에 누가, 무슨 상품을, 몇 분이나 보고 나가는지 추적할 수 있는 픽셀을 설치해 두셨나요?”
픽셀이 뭔지도 모르겠다는 분, 그런 게 있는지 없는지 잘 모르겠다고 답하시는 분들께는 일단, 페이스북 광고 하지 마시라고 당부합니다.
페이스북 타겟 광고에서 추적 픽셀 없이 광고를 집행하는 것은 거의 밑빠진 독에 물 붓기 만큼이나 무모하기 때문입니다.

“페이스북 광고는 픽셀에서 시작해서 맞춤타겟에서 끝난다!” 고 해도 과언이 아닐 만큼, 추적 픽셀은 중요합니다.

문제는 이 추적 픽셀을 심는 과정이 개발자 지식과 실력을 요구합니다. 때문에, 픽셀의 추적 동작 원리를 모르거나 자신의 홈페이지(쇼핑몰) html 소스의 구조를 모르면 사실 픽셀을 정상적으로 심는 작업을 아무나 하기는 어렵습니다. 즉 픽셀은 어디서 발급받고, 받은 픽셀 코드를 어느 소스 파일의 어느 영역에 심어야 하는지 방법을 제대로 배우지 않고 덤비면 자칫 중요한 작업에 혼선이나 에러, 심하면 사고를 일으킬 수도 있습니다.  그래서 결국 픽셀 삽입에 실패하여 중단하거나, 페이스북 광고 해봐야 성과 없다고 내팽개쳐 버리는 경우가 많습니다.

페이스북이 이 문제를 고민하지 않을 수 없었겠지요. 그래서 픽셀 설치를 좀 더 쉽고 편하게 따라 할 수 있도록 끊임 없이 방법을 찾고 개선해나가고 있는데요.
얼마 전(2019년 4월경)에 픽셀 발급 프로세스에 한번 더 업데이트가 있었습니다. 이름하여 “이벤트 셋업 툴”이란 게 픽셀 설치 옵션에 새 프로세스로 등장한 건데요…^^
기존에 기본 픽셀까지는 어찌 어찌 공부하여 설치했다고 하더라도 특정한 웹 페이지에서 특정한 행동이 일어났을 때 그 행동(이벤트)의 발생 여부를 추적하는 것을 “이벤트 추적”이라고 하는데 바로 이 이벤트를 좀 더 세부적으로(중요한 것은 소스 코딩 과정 없이) 추적할 수 있는 설정 기능이 새로 제공된 것입니다.

지금까지는 우리 쇼핑몰에 방문한 사람들이 어떤 상품을 구경했는지(ViewContent), 그 상품을 장바구니에 넣었는지(AddToCart) , 주문서 작성을 시작했는지(Initiate Checkout), 결제를 완료했는지(Purchase), 상품 검색 행위를 했는지(Search) 와 같이 가장 자주 발생하는 행동(이벤트) 위주로 표준화된 행동을 추적할 수 있는 픽셀들을 제공해왔습니다. 이른바 ‘표준 이벤트 픽셀’이라고 불렀던 것들이지요.

최근의 변화는, 쇼핑몰이 아닌 일반 콘텐츠를 제공하는 웹페이지의 경우도 다양한 이벤트 행동을 추적할 수 있도록 기능을 추가한 것입니다.

예를 들어서, 특정한 버튼이 클릭되어 링크 페이지로 이동하게 될 때(회원 가입, 구독신청 완료 등), 예를 들면 “감사 페이지”로 가는 [링크] 혹은 [버튼]을 클릭할 경우 그 행동(이벤트)도 추적할 수 있게 된 겁니다. 즉,  Subscribe(구독신청),  Start Trial(체험판 시작), Complete Registration(등록완료), Contact(문의) 등등 쇼핑몰 이외 일반 페이지들에서 사용할 수 있는 기능들도 여러 가지가 추가된 것이지요.(현재 무려 23가지를 지원하네요. ^^)

단지 이벤트 픽셀의 가지 수만 추가된 것이 아니라, 해당 이벤트 픽셀을 심는 방법도 크게 개선된 것으로 보입니다. 매개변수를 셋팅하는 데까지 나아가지는 못했지만 그래도 버튼이나 링크 클릭을 추적할 수 있게 된 것만 해도 나름의 발전이라 할 수 있습니다. (매개변수는 상품으로 치자면, 상품의 이름이나 가격 등과 같이 고정된 값보다 동적으로 변동되는 값들을 추적해야 하기 때문에 표준화된 코드를 제공하기 어렵고, 해당 사이트나 쇼핑몰마다 사용하는 변수명과 이벤트명이 달라서 일괄 적용하기 어렵습니다.)

이번 글에서는 새로 업데이트된 [페이스북 이벤트 픽셀] 설치 및 활용법에 대해 알아보도록 하지요…^^

미리 일러둘 것은 페이스북 픽셀 설치는 사전 지식이 일부 필요합니다.
페이스북 픽셀을 발급 받으려면 일단 [광고 계정]이 있어야 하고, 광고 계정은 개인 계정으로도 생성은 가능하지만, 길게 보면 회사 업무용 [비즈니스 관리자] 계정을 일단 생성한 뒤에 거기에서 업무용 광고계정을 만들고, 그 광고 계정으로부터 픽셀을 받는 것이 바람직하다는 점만 언급해 두고 넘어 갑니다.

[비즈니스 관리자] 계정이 무엇이고 어떻게 만드는지, 그리고 광고 계정은 어떻게 만들고, 기본 픽셀을 어떻게 생성하는지에 대해서는 작년 말에 출간한 [페이스북 인스타그램 통합 마케팅] 43쪽부터 87쪽까지를 참고하세요.
* 1-3. 비즈니스 관리자, 무엇이고 어떻게 쓰나 (43~63쪽)
* 1-4. 페이스북 픽셀은 무엇이고 어떻게 설치하나 (64~87쪽)

본 홈페이지의 두 글을 근거로 쓴 대목이므로 아래 글들을 참고해 보셔도 됩니다.
https://sonet.kr/1238  [페이스북] 비즈니스 관리자, 왜 만들고 어떻게 쓰나?
https://sonet.kr/1039  [페이스북] 다이내믹 광고, 해 보셨나요?(2)_페이스북 픽셀 설치가이드

 

1. 페이스북 기본 픽셀 설치하기

1-01. 비즈니스 관리자(또는 광고관리자)를 실행한 후, 메인 관리자 모드(모든 도구)에서 [픽셀] 메뉴를 클릭합니다.

[비즈니스 관리자]–> [광고 계정]–> [모든 도구]–> [픽셀] 클릭!페이스북_이벤트픽셀설치

1-02.[이벤트 관리자] 메뉴창이 뜨면 왼쪽 상단 펼침 메뉴를 열어서 픽셀을 발급받고 싶은 [광고 계정]을 선택하고, 우측 하단의 [설정 안내 보기] 버튼을 누릅니다.

페이스북_이벤트픽셀설치

1-03. [픽셀 설치] 팝업창이 뜨면 가운데 있는 [픽셀 코드 직접 설치]를 클릭합니다.

페이스북_이벤트픽셀설치

1-04. [Install Pixel] 안내 창에서 [2. 전체 픽셀 코드를 복사하여 웹사이트 헤더에 붙여넣으세요. ] 아래있는 코드를 복사합니다.
페이스북_이벤트픽셀설치
– 복사한 코드를 웹사이트나 쇼핑몰 구조에 따라 적정한 위치(공통 레이아웃 파일의 <head> ~ </head> 사이에 붙여넣으세요.
–> 워드프레스로 구성된 사이트는 주로 페이스북 픽셀 설치 플러그인을 이용하거나, 테마별로 [Header and Footer Script] 설정 메뉴를 찾아서 입력창 안에 붙여넣습니다.
–> 카페24쇼핑몰, 고도몰, 메이크샵 등 국내 대표적인 쇼핑몰 빌더 서비스들의 경우 위에서 받은 페이스북 픽셀 내용중 추적 픽셀 id 넘버만 확인해서 각 서비스별 페이스북 픽셀 설치 메뉴의 옵션창에서 입력해주고, 필요한 추적 이벤트들을 선택해주기만 하면 됩니다.

이상의 작업이 탈 없이 끝나면 모든 웹사이트 페이지에서 페이스북 기본 픽셀이 동작하게 됩니다.

 

2. [픽셀 설치] 프로세스 2단계에서 [이벤트 픽셀] 추가하기

이벤트 픽셀은 Facebook으로 전송할 추적 정보에 세부 정보를 추적하는 명령 코드(스크립트)입니다. 이같은 이벤트 추적을 통해 페이스북은 잠재고객들이 방문한 페이지뿐만 아니라 구매 (또는 등록, 리드, 검색 등)를 비롯해 아래와 같은 다양한 행동들이 완료되었음을 추적하고 알 수 있습니다.

2019년 5월말 현재, 표준 픽셀 이벤트에는 다음과 같은 것들을 포함해 모두 23개의 이벤트가 제공됩니다. (괄호안은 한글 메뉴 이벤트 이름)
View Content (콘텐츠 조회) : 상품 상세페이지 보기
Search (검색) : 방문한 내 사이트 안에서 검색하기
Add to Wishlist (위시리스트에 추가) : 구경한 상품 찜하기
Add to Cart (장바구니에 담기) :
Initiate Checkout (결제시작) : 주문서 작성 시작
Add Payment Info (결제정보 추가)
Purchase (구매)
Subscribe (요청 제출) : 구독 신청하기
Start Trial (체험판 시작): 둘러보기 시작
Complete Registration (등록 완료) : 회원가입/신청 완료
Contact (문의) : 연락하기/전화하기
Find Location (위치 찾기)
Schedule (예약) …

이벤트는 ‘전환’ 달성 여부 추적 및 캠페인 목표에 따른 광고 ‘최적화’ 작업에 특히 유용합니다.
한 가지 더 부연해두자면, 페이스북은 앱 광고 성과를 높이기 위해 작년 6월에 “코드 프리 이벤트 설정” 도구를 개발하여 공개한 바 있습니다.
* 관련 링크 : https://www.facebook.com/business/news/introducing-codeless-events-setup-for-better-app-advertising-outcomes

여기에서 1차 선보였던 “코드 프리(소스 코딩이 따로 필요 없는)” 기술이 이벤트 픽셀 설정에도 추가 적용되기 시작한 셈이지요.
아래에서 이벤트 픽셀 설치방법을 추가로 알아보죠.

2-01. 위의 1-04까지 과정을 마치고 [계속] 버튼을 누르면 2단계 [Set Up Event] 단계로 넘어갑니다. 여기서 윗행 [Facebook 의 이벤트 설정 도구 사용]을 클릭하세요.

페이스북_이벤트픽셀설치

 

2-02. 다음 단계를 선택하기 전에 URL 링크나 버튼을 클릭할 때 이벤트 픽셀이 동작하게 될 웹페이지를 먼저 결정하세요.
해당 버튼(또는 링크)을 클릭할 때 이동하게 될 페이지의 URL 주소를 아래(아래 그림 오른쪽 박스 창)에 입력하세요.
(예를 들어, 가장 최근 글 제목의 링크를 눌렀을 때 이동하게 될 글의 포스트 링크 주소를 복사합니다.)
페이스북_이벤트픽셀설치_
– 이 때 해당 웹사이트에 설치되어 있는 페이스북 기본 픽셀 아이디가 광고 계정에서 사용하고 있는 픽셀 아이디와 일치하지 않을 경우 “해당 픽셀에 대한 이벤트를 받지 못했다”는 경고 알림이 뜹니다.
– 이 경우 광고 계정에서 발급받은 픽셀이 추적하려는 웹사이트에 설치된 픽셀과 다르다는 뜻이므로, 실제 웹사이트에 설치된 픽셀과 연동된 광고 계정과 픽셀 아이디를 찾아서 변경(선택)한 뒤에 다시 작업하셔야 합니다.
– 이미 설치된 픽셀이 있을 경우 구동중인 이벤트 내역이 나오고, 오른쪽 상단 [설정] 메뉴를 펼쳐서 [새 이벤트 설정]을 선택하면 위의 2-01, 2-02 화면 입력창이 뜹니다.

2-03. 위 단계에서이 페이지의 URL을 입력 한 후 [웹 사이트 열기]를 클릭하세요.
페이스북_이벤트픽셀설치

2-04. 위에서 연결(이동)할 페이지의 화면이 열리면서 왼쪽 상단에 [Facebook 이벤트 설정] 도구 상자가 팝업 화면으로 뜹니다.
페이스북_이벤트픽셀설치

이 때 해당 페이지에 기존에 이미 설정되어 있는 이벤트 추적 픽셀이 있으면 위의 사례와 같이 해당 이벤트 항목 옆에 이벤트 종류 아이콘과 정의된 내역이 자동으로 검출 되어 나타나고, 해당 페이지에 아무런 추적 이벤트가 없을 때는 [ No events found on this page (이 페이지에는 이벤트가 없습니다.)] 라는 안내문이 팝업 창에 나타납니다.

*참고: 이벤트 픽셀 설정 도구를 처음으로 사용하는 경우 아래와 같은 안내문이 먼저 친절하게 나타납니다.페이스북_이벤트픽셀설치

여기서 [버튼 추적]과 [URL 추적] 두 가지 종류의 이벤트 추가 설정이 가능합니다. 각각의 이벤트 추가 설정 방법을 살펴 보지요.

3.  [URL 추적] 이벤트 픽셀 설정 프로세스

누군가 특정 URL을 클릭하여 새 페이지를 띄울 때(로드하는 경우) 그 전환이 완료되었음을 추적하는 것입니다.
예를 들어, 신청서 등록 또는 제품 구매 완료 후 ‘접수성공 확인 및 감사인사 페이지’가 대표적인 사례가 될 수 있겠지요.
여기서 유의할 점은 이 페이지는 사용자가 한 번만 방문 할 수있는 페이지여야 합니다. (특정 행동이 완료되었을 경우, 같은 정보로 두 번 중복 신청(또는 구매)할 경우는 에러나 실수일 가능성이 높으므로 동일한 이벤트(행동)을 중복 집계하는 오류가 발생할 수 있기 때문입니다.)

3-01. 위의 2-4 화면에서 [URL 추적] 버튼을 클릭합니다.
페이스북_이벤트픽셀설치

3-02. [URL을 사용하여 이벤트 추적] 항목 창이 뜨면 [이벤트 선택] 끝의 펼침 버튼을 클릭하여 추적하려는 이벤트 종류를 먼저 선택해 줍니다.

3-03. 위의 3-02 화면에서 [이벤트 선택] 펼침 버튼을 클릭하면 아래쪽으로 선택 가능한 이벤트 종류가 뜨고 세로 스크롤 버튼으로 원하는 이벤트를 선택할 수 있습니다. (해당 이벤트 앞쪽 선택 동그라미 박스에 체크되도록 클릭을 해주면 됩니다. 2019년 5월말 현재 23개의 이벤트 항목을 제공하고 있으므로 원하는 이벤트에 가장 가까운 행동을 선택해주면 됩니다.)

3-04. 이벤트 종류를 선택한 뒤, 아래쪽 행에서 [전체 URL 또는 URL의 일부를 추적하세요] 항목에서 [URL이 다음과 같음:] 또는 [URL에 다음 포함:] 옵션 중 하나를 선택하고 링크 클릭시 이동하게 되는(추적하려는) 페이지 주소의 전부 또는 일부를 입력해 주고 [확인] 버튼을 클릭합니다.

페이스북_이벤트픽셀설치

– [URL이 다음과 같음:]  옵션을 사용하게 되면 해당 페이지 주소와 정확히 일치하는 페이지가 클릭될 때만 이벤트가 달성된 것으로 포착합니다.
– [URL에 다음 포함:] 옵션을 이용하면 URL 뒷쪽에 추가 매개변수나 방문자마다 다른 코드가 붙어서 인식되더라도 이벤트가 발생된 것으로 집계합니다.

3-05. 이벤트 픽셀이 정상적으로 추가되었는지 확인하는 박스가 팝업으로 뜹니다.
페이스북_이벤트픽셀설치
– 2-04 그림에는 보이지 않았던 새 이벤트(콘텐츠 조회)가 새로 추가된 것이 확인되면 이벤트 픽셀 추가 작업이 정상적으로 완료된 것입니다.


4.  [버튼 추적] 이벤트 픽셀 설정 프로세스

이 글에서 소개하는 [이벤트 설정 도구] 중에서 가장 중요하고 요긴한 활용 방법일 것입니다. 특정한 페이지에서 특정한 링크가 첨부된 요소(텍스트, 버튼, 배너 이미지)가 클릭될 경우 해당 이벤트(전환 행동)를 추적하기 위해 추적용 코드를 삽입하는 작업은 매우 기술적인 영역이고 난이도도 높은 작업입니다.  당연히 자바스크립트나 html 문법을 아는 개발자들이 아니면 엄두를 내기 어려운 작업이었는데, 이것을 코딩을 모르는 일반인들도 소스 코드 삽입 작업 없이 따라서 실행할 수 있도록 제공하는 것입니다. 

4-01. [새 버튼 추적] 버튼을 누릅니다.

페이스북_이벤트픽셀설치

–  이 샘플에서는 2-04에서 보듯이 오른쪽 사이트에 [뉴스레터 구독신청]용 버튼에 이미 이벤트 추적 픽셀이 심어진 상태여서 기존 이벤트 픽셀(잠재 고객) 내역이 검출된 상태로 나타납니다. 이것 말고 다른 버튼에 대한 클릭 이벤트를 추적하려면 [새 버튼 추적] 버튼을 누릅니다.

4-02. 위 버튼을 누르면, 전체 페이지가 어두운 음영(회색)으로 표시되고 아래와 같이 하이퍼링크가 붙어 있는 텍스트(메뉴/탭) 또는 배너 이미지 등에 파란색 굵은 테두리선이 나타나고, 화면 아래쪽으로 [Facebook 이벤트 설정] 제목의 안내 팝업 창이 뜨면서 [Click on a hilighted button to set up your event.] 라는 안내문이 뜹니다.

페이스북_이벤트픽셀설치

– 여기서 원하는 링크(텍스트 박스) 또는 버튼(이미지 배너)을 선택하면 Facebook은 앞으로 그 페이지 방문자 중에서 누군가 그 요소를 클릭할 때마다 해당 이벤트에 대한 보고를 시작합니다. (샘플로 우측 사이드에 있는 [카카오모먼트 구조분석 스터디모임] 배너가 클릭될 때를 추적 대상 이벤트로 선택해 봅니다.)

4-03. 추적을 원하는 버튼이나 링크(배너)를 선택하면 [이벤트 설정] 팝업 창이 뜨면서 어떤 이벤트에 연결할 것인지 [이벤트 종류]를 펼쳐서 적당한 이벤트 유형을 선택한 뒤에 [확인] 버튼을 눌러 줍니다.
페이스북_이벤트픽셀설치

– 여기서는 편의상 [위시리스트에 추가] 항목을 선택합니다.
– 필요하다면 [콘텐츠 보기]나 [문의] 등을 선택해서 다른 이벤트와 구별하는 것도 방법입니다.
다만, 동일한 이벤트명을 여러 개 생성하면, (짧은 설명이 아래줄에 표시되기는 하지만) 나중에 어떤 이벤트인지 서로 혼동될 수 있으므로 잘 기억하시기 바랍니다.

4-04. [확인] 결과, [Facebook 이벤트 설정] 팝업 화면의 이벤트 목록 중에 새로 추가한 [버튼 추적] 이벤트 내역이 제대로 나타나는지 확인합니다.

페이스북_이벤트픽셀설치


5.  [이벤트 픽셀] 정상 동작 여부 확인 테스트

5-01. 위의 [Facebook 이벤트 설정] 팝업 화면에서 작업을 최종 종료하기 전에 이벤트를 편집(수정)하거나 삭제할 수 있습니다.
작업이 모두 끝나 더이상 수정 사항이 없다고 판단되면 오른쪽 상단의 [Finish Setup]을 클릭하십시오.
페이스북_이벤트픽셀설치

5-02. [Finish Setup] 팝업 화면이 뜨면, 추가된 이벤트 내역을 확인하고, 잘못 되었으면 [삭제]하고, 이상이 없으면 [완료하기]를 누릅니다.

페이스북_이벤트픽셀설치

5-03. [완료하기]를 누르면 페이스북에서 [평가]를 요청합니다. 적당한 별점을 체크하고 경험한 내용이나 문제점을 입력한 뒤에 [완료] 버튼을 클릭합니다.

페이스북_이벤트픽셀설치

5-04. Facebook의 [이벤트 관리자] 화면으로 이벤트 설정이 완료되었다는 알림이 팝업 창으로 뜹니다.
페이스북_이벤트픽셀설치

5-05. 파란색 [이벤트 테스트] 버튼을 클릭하여 이벤트 픽셀이 정상 동작하는지를 테스트하십시오.
다음과 같은 페이지가 나타납니다.
페이스북_이벤트픽셀설치

–  테스트 모드에서 해당 웹사이트를 방문하여 이벤트 추적이 설정된 항목들을 실제로 클릭하여, 이벤트가 올바로 추적되는지 실시간으로 확인해 보세요.

– 트리거된 이벤트에 대해서만 테스트 이벤트 도구에 표시되며, 다른 웹사이트 사용자의 활동은 표시되지 않습니다.
– 방금 작업한 페이지에 대한 링크가 테스트 작업 창에 있다고 가정하고(미리 URL 주소란이 채워져 나와야 함)  [웹 사이트 열기]를 클릭해 보세요.

– [URL 추적] 옵션을 이용했다면, 해당 페이지 URL 주소를 클릭해서 화면이 열린 순간에 이미 이벤트가 트리거(동작)된 것입니다.
– [버튼 추적] 옵션을 이용했다면,  해당 페이지의 [링크] 또는 [버튼](혹은 배너 이미지)를 클릭하십시오.

– 그런 다음 [이벤트 관리자]의 [테스트 페이지]로 다시 돌아가 보면 앞서 방문했던 웹사이트에서 발생한 이벤트 목록들이 죽 나열됩니다.

5-06. [실시간 테스트 이벤트] 화면에서 설정한 이벤트들이 모두 [활동 수신 중]으로 뜨고 최근 발생한 이벤트 내역과 발생 시각이 정확히 검출되는지 확인하면 됩니다.
페이스북_이벤트픽셀설치

이미 예전에 설정해두었던 이벤트 추적 픽셀이 있다면 함께 테스트 목록에 나타날 수 있지만 무시하고, 방금 새로 추가한 두 가지 이벤트 (콘텐츠 조회 및 위시리스트에 추가)가 함께 나오는지 확인합니다.  오른쪽 끝열에 이벤트가 마지막으로 트리거된 시간이 표시되면 정상적으로 이벤트 추적이 되고 있는 것입니다!

함께 축하합시다!
이제 개발자가 아닌 우리들도 페이스북에 이벤트 픽셀을 셋업할 수 있게 되었습니다. 자바 스크립트를 몰라도, html 태그를 몰라도…. 이벤트 활동 추적이 가능해진 겁니다!!

[유의사항] 
다만, 위에서 설명한 [픽셀 셋업 도구]로 아직 할 수 없는 과제가 있습니다!
특정한 버튼이나 링크가 클릭되었는지 여부, 클릭된 횟수를 추적하는 것은 이벤트 추적에서 매우 기초적인 단계에 속합니다. 실제 실무 현업에서 요구되는 것은 대부분 그보다 더 세부적인 추가 정보 추적을 요구하는 경우가 많습니다. 그럴 때 사용하게 되는 것이 바로 파라미터(매개 변수) 설정이라고 하는 것입니다. 
매개 변수는 발생한 이벤트에 대한 추가 세부 정보를 말합니다.

예를 들면, 위의 설정 과정을 통해 “구매”이벤트를 만들 수 있는데, 그렇게 하면 누군가가 특정 페이지를 보거나 앞으로 버튼을 클릭할 때 [구매 여부](이벤트 발생 여부)를 추적할 수도 있습니다. 그렇지만 정확히 무엇을 얼마 어치나 구매했는가? 를 알아보려면 매개 변수를 추가해야 합니다.
아쉽게도 현재까지는 [픽셀 셋업 도구]로 매개변수까지 자동으로(코딩 작업 없이) 구현할 수는 없다고 합니다.
[픽셀을 수동으로 설정]하는 방법을 이용해야만 보고서에 추가 세부 정보를 제공하는 매개 변수를 포함시킬 수 있으니 이 점 착오 없으시기 바랍니다. ^^