⑰ 개발 지식 없이, 페이스북 이벤트 픽셀 설치하기
그로스마케팅 파트너, 허들러스
17. 개발 지식 없이, 페이스북 이벤트 픽셀 설치하기
안녕하세요. 그로스마케팅 파트너, 허들러스 유성민 대표입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열일곱 번째 이야기를 진행해보도록 할게요.
지난 장에서, 페이스북 기본 픽셀을 삽입하는 방법에 대해서 간단히 얘기 나누어보았습니다. 페이스북 이벤트 픽셀은 기본 픽셀과는 달리 “이벤트가 발생하는 곳에서만 fired 되어야 한다"라는 대전제를 가지고 있습니다. 이번장에서는 장바구니 이벤트 픽셀을 삽입하고, 리마케팅 모수를 저장하여, 장바구니에 물건을 담았던 유저만 별도로 광고를 구현할 수 있는 실습을 진행하겠습니다.
1. 장바구니 이벤트 픽셀 삽입하기
페이스북 이벤트 픽셀은 크게 표준 이벤트 픽셀과 맞춤 이벤트 픽셀의 두 가지 개념으로 나뉘어 있습니다. 사람들이 자주 사용하는 행위를 기반으로 데이터를 전송하는 표준 이벤트 픽셀은 페이스북에서 미리 제공하는 이벤트 픽셀들의 목록이며, 맞춤 이벤트 픽셀은 마케터가 직접 정의하여 커스텀 형식으로 설치를 할 수 있는 픽셀을 의미합니다.
표준 이벤트 픽셀의 목록은 아래 링크에서 확인하실 수 있습니다.
상기 링크를 통해, 장바구니 이벤트 픽셀을 코드로 정리하면 아래와 같은 코드가 나타납니다.
<script>
fbq(‘ track ’, ‘ AddToCart ’);
</script>
이 코드를 장바구니 페이지에 도착하는 시점에 발동하도록 태그를 만들게 되면, 바로 장바구니 이벤트 픽셀이 구현 가능합니다. 하지만 지금 글에서 다루고 있는 실습용 티스토리 블로그는 장바구니 페이지가 없습니다. 그래서 카테고리 페이지를 장바구니 페이지라고 가정하겠습니다.
가정하는 장바구니 페이지 URL : http://onedge1.tistory.com/category/GA%28Google%20analytics%29
-> 이 곳을 장바구니 페이지라고 가정하고 여기다가 Add to Cart 이벤트 픽셀을 발생시키겠습니다.
위 이벤트 픽셀을 간단히 복사해두고, 태그 매니저로 이동해보겠습니다.
기본 픽셀을 만들었던 것처럼, 똑같이 [새로 만들기] 버튼을 클릭하여, 태그를 하나 만들어줍니다.
태그 타입은 당연히 [맞춤 HTML]로 지정합니다.
맞춤 HTML에는 복사해두었던 이벤트 픽셀을 그대로 붙여 넣기만 하면, 태그 명령어 정의가 끝이 납니다. 지금 복사한 코드를 붙여 넣음으로써 “AddToCart이벤트를 트래킹 하라"라고 명령하는 말을 우리가 정의해주었습니다.
이제는 아래의 트리거 설정을 해주기 위하여, 트리거 선택을 합니다. 트리거는 방아쇠라고 했지요? 페이스북 기본 픽셀은 말 그대로 , 기본적인 코드이기 때문에 , 우리 웹사이트를 구성하고 있는 웹 페이지에 모두 심어져있어져야 하지만, 이벤트 픽셀은 다릅니다. 이벤트 픽셀은 이벤트가 발생하는 곳에만 Fired 되어야 한다는 거죠. 하지만 지금 우리는 All page view 트리거만 가지고 있기 때문에, 우측 상단에 (+) 버튼을 눌러 트리거를 하나 직접 정의해줄 것입니다.
장바구니 페이지 뷰로 트리거의 이름을 여러분들이 알아볼 수 있게 적어주시고, 네모칸을 눌러, 바로 트리거의 유형을 선택합니다. 이번에 트리거의 유형은 당연히 , 페이지 뷰입니다. 우리는, “장바구니 페이지 뷰가 일어나면 ~” Add To Cart라는 이벤트를 Fired 시킬 것이기 때문입니다.
그러면 두 페이지뷰 타입에 두 가지 옵션이 등장합니다.
1) 모든 페이지 뷰
2) 일부 페이지 뷰
모든 페이지가 아닌 장바구니 페이지에만 이 이벤트 픽셀을 설치하기 때문에, 2번 옵션인 ‘일부 페이지 뷰'를 지정합니다.
일부 페이지뷰를 선택하면, 네모 칸 3개가 나옵니다.
왼쪽부터, 키값 - 수식 - Value 값이라고 부를 수 있습니다. 개발 영역에 있으신 분들은 매우 쉽게 이해하실 수 있을 것이라 생각됩니다. 하나의 객체 형식으로 변수를 정해준다고 생각해주면 되는 거죠. 하나씩 열거하여 설명해보겠습니다.
1) 키값(Key) : 여러분이 특정 변수를 정의할 때, 해당 변수를 정의하는 기준을 의미합니다.
2) 수식 : 기준과 기준의 Value 값을 수식으로 연결 지어줄 수 있습니다.
3) Value 값 : 우리가 지정한 기준에 맞는 값입니다.
가장 왼쪽 칸을 클릭해보면 키값이 4개가 있습니다. 4개의 키값 중, 장바구니 페이지를 정의하는데 가장 쉬운 기준이 무엇일까요? 당연히, Page URL입니다. 페이지 URL로 장바구니 페이지를 정의해줄 수 있습니다. 여기서 제가 장바구니 페이지라고 처음에 가정했던 웹페이지의 URL을 다시 적어보겠습니다.
http://onedge1.tistory.com/category/GA%28Google%20analytics%29
해당 장바구니 페이지가 고유하게 가지고 있을 만한 키워드가 무엇일까요? 저는 예를 좀 쉽게 들기 위해, 장바구니 페이지는 “무조건 category라는 키워드를 가지고 있다.”라고 가정해보겠습니다. 그러면 아래와 같이 간단히 작업해줄 수 있습니다.
이렇게 세팅을 하게 되면, “Category라는 키워드를 포함하고 있는 페이지 URL의 페이지 뷰가 발생하면, 장바구니 페이지 뷰 트리거를 발생시켜라.”는 트리거가 만들어집니다.
트리거가 완성된 장바구니 이벤트 픽셀의 모습
하지만 이벤트 픽셀은 여기서 끝이 아닙니다. 지금 태그에 복사해서 붙여 넣은 명령어, track , AddToCart는 단순히 장바구니 이벤트를 트래킹 할 뿐, 우리 광고 계정으로 보내지 않고 있습니다. 우리 광고 계정으로 보내주는 코드는 페이스북 기본 코드가 하는 역할이지요. 여기서 한 가지 중요한 점이 나타납니다.
“페이스북 이벤트 픽셀은 페이스북 기본 픽셀이 먼저 발생되고 난 후에서야 Fired 되어야 한다.”라는 것입니다. 이벤트 픽셀이 발생되기 전에, 페이스북 기본 픽셀을 발생시키기 위해서는, 태그들 간의 순서를 정해줘야 합니다. 그게 바로 [태그 시퀀싱]이라는 기능입니다.
태그 설정 영역에서 [고급 설정]을 눌러줍니다. [고급 설정] 가장 아래 [태그 시퀀싱]을 누르면 두 가지 옵션이 나타납니다.
기본 픽셀이 Fired 되고 난 다음에, 장바구니 이벤트 픽셀이 Fired 되어야 하니까, 당연히 첫 번째 옵션을 선택해줘야 합니다.
[태그 선택]을 누르면 우리가 지난 글에서 만들어놓은 페이스북 기본 픽셀이 보입니다.
이렇게 설정을 마치면, 페이스북 기본 픽셀이 먼저 발동한 다음에, 장바구니 이벤트 픽셀이 발동하게 되는 명령어들 간의 순서를 지정해주었습니다.
위 이미지와 같이 설정을 마치면 장바구니 이벤트 픽셀 설치가 모두 완료됩니다. 이벤트 픽셀은 크게 3가지의 순서로 제작됩니다.
1) 맞춤 HTML로 우리가 설치하고자 하는 이벤트 픽셀을 복사해서 붙여 넣기 한다
2) Page URL을 키값으로 설정하여, Value 값을 입력한다.
3) 이벤트 픽셀이 Fired 되기 전에 기본 픽셀이 Fired 되도록 태그 시퀀싱 순서를 정해준다.
2. 장바구니 이벤트 픽셀 설치 확인하기
그러면, 제 블로그에서 실제로 장바구니 이벤트 픽셀이 Fired 되었는지 살펴보겠습니다. 우선은 기본 픽셀을 발행했던 것처럼, 오른쪽 상단 [제출] 버튼을 클릭하여 만들어둔 태그를 발행합니다.
일정 시간이 지나면 발행이 완료됩니다.
다시 작업 공간으로 돌아가, [미리 보기] 버튼을 클릭하여, 실제로 장바구니 이벤트 픽셀이 잘 발동하는지 살펴봅시다.
미리보기를 진행할 URL을 입력해줍니다. 저는 티스토리 블로그의 메인 페이지 URL을 붙여 넣었습니다.
우선 메인 페이지의 경우, 기본 픽셀만 발행이 되고, 장바구니 이벤트 픽셀이 발행되지 않는 것을 확인할 수 있습니다. 당연히, 장바구니 이벤트 픽셀은 ‘category’라는 키워드를 가지고 있는 URL에서만 발생되도록 설정해두었기 때문입니다.
‘category’라는 키워드를 가지고 있는 URL에 로드가 되니, 장바구니 이벤트 픽셀이 정상적으로 발생하는 것을 볼 수 있습니다.
이렇게 미리보기를 통해 장바구니 이벤트 픽셀이 발생했다는 것을 확인했다면 비로소 장바구니 이벤트 픽셀 설치가 모두 마무리된 것입니다. 이제 우리는 이 이벤트를 발생시켰던 유저, 즉, 장바구니에 물건을 담았던 유저들을 대상으로 리마케팅을 구현할 수 있어야 합니다.
3. 리마케팅 구현을 위한 맞춤 타깃 생성하기
리마케팅 구현을 위해서는 페이스북 광고 관리자 메뉴에서, [타깃]이라는 영역으로 이동합니다.
우리 비즈니스와 상호작용을 실제로 행한 고객의 리마케팅 모수를 만들어주는 것이기 때문에, [맞춤 타깃]을 클릭합니다.
당연히 웹사이트에 이벤트 픽셀을 설치했으니, [웹사이트]를 맞춤 타깃의 소스 데이터로 선택합니다.
모든 웹사이트 방문자가 아닌, AddToCart 이벤트를 선택합니다.
그다음 2번 사항에 타깃의 이름을 지정해주면, 장바구니에 물건을 담은 사람을 대상으로 타깃 만들기 생성이 가능합니다.
추후 광고 관리자 광고 세트 영역 - [타깃] - [맞춤 타깃]에서 우리가 만들어준 장바구니에 물건을 담은 사람을 확인할 수 있습니다.
블로그 구독자 문의 주소 : info@hurdlers.kr
