⑲ 태그 매니저를 활용한 버튼 클릭 이벤트 픽셀 만들기
그로스마케팅 파트너, 허들러스
19. 태그 매니저를 활용한 버튼 클릭 이벤트 픽셀 만들기
안녕하세요. 그로스마케팅 파트너, 허들러스의 유성민입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열아홉 번째 이야기를 진행해보도록 할게요.
지난번 장표에서는 맞춤 이벤트 픽셀과 표준 이벤트 픽셀에 대해서 살펴보았습니다. 맞춤 이벤트 픽셀은 말 그대로 내가 원하는 시점에 이벤트 픽셀을 발생시켜서, 해당 이벤트를 달성한 사람들에게 리마케팅 광고를 구현하는 방법입니다. 다양한 경우의 수에 기반하여 원하는 시점을 선택할 수 있습니다. 예를 들면 맞춤 이벤트 사용 예시는 아래와 같습니다.
“스크롤을 50% 이상 했을 때, 이벤트 픽셀을 발동시켜줘!”
“우리 블로그에서 ‘공유하기 버튼’을 클릭했을 때, 이벤트 픽셀을 발동시켜줘!”
“우리 쇼핑몰에서 리뷰를 10초 이상 조회했을 때, 이벤트 픽셀을 발동시켜줘!”
와 같은 여러 가지 상황에 알맞게 입맛대로 맞춤 이벤트 픽셀을 설치할 수 있습니다.
이번 장에서는 제가 운영하고 있는 티스토리 블로그에서 ‘공유하기 버튼’을 클릭했을 경우, 이벤트가 발동되도록 태그 매니저를 활용하여 실습해 보겠습니다.
제 티스토리 블로그의 메인 페이지 상단에는 검은색 바탕의 Share This Post라는 버튼이 있습니다. 이 버튼을 클릭할 때마다 이벤트 픽셀을 발생시키고, 그들을 대상으로 맞춤 타깃을 만들어 리타게팅을 구현해보겠습니다.
우선은 [공유하기 버튼 클릭]을 정의해줄 수 있는 변수를 만드는 것이 첫 번째입니다. 변수 탭을 이동해보겠습니다.
지금 변수 쪽으로 들어가면 Page URL, Page Path 등의 이름을 가지고 있는 변수가 있습니다. 예를 들어, “장바구니 페이지에 도착했을 때, 이벤트를 발생시켜라.”라고 한다면 장바구니 페이지 URL을 적어 해당 페이지 URL에 페이지뷰가 발생하면 이벤트를 발생시키도록 하는 트리거를 만들 수 있습니다.
하지만 버튼을 클릭한 시점에 데이터를 전송해야 한다면, Page URL 변수로는 구현하기가 어렵습니다. 그렇기 때문에 웹사이트에 방문한 사람이 클릭을 하는 경우에 클릭을 하게 되는 특정 요소(버튼, 메뉴, 링크 등)를 정의해주기 위해서는 클릭과 관련된 변수를 추가해주어야 합니다. 오른쪽 상단의 구성 버튼을 눌러봅시다.
[구성] 버튼을 클릭하면, 다양한 변수들이 있는 것을 확인할 수 있습니다. 이 중 [클릭 수]라는 카테고리에 포함된 6가지 변수가 있는 것을 확인할 수 있습니다. 각각 어떤 것을 의미하는 변수인지는 모르겠지만, 클릭을 했을 때, 어떤 요소를 클릭했는지에 대한 정의를 내려줄 수 있는 역할을 합니다. 우선은 이 변수들을 모두 사용한다고 가정하고, 체크를 해서 추가해봅시다.
체크를 하면 [변수] 항목에 우리가 새롭게 추가해준 클릭과 관련된 변수들이 있는 것을 확인할 수 있습니다. 정상적으로 변수를 만들어주었다면, [태그] 메뉴로 이동하여 본격적으로 이벤트 픽셀 태그를 만들어봅시다.
태그 쪽으로 이동하면 이전 장에서 만들어서 설치까지 진행했던 페이스북 기본 픽셀만 있는 것을 알 수 있습니다. 페이스북 기본 픽셀 설치가 안된 분들이라면 아래 글로 이동해서, 기본 픽셀 설치부터 진행하고 와주셔야 합니다.
기본 픽셀이 설치되었다면, [태그] 메뉴에서 [새로 만들기] 버튼 클릭 후, 알아볼 수 있는 태그 이름을 지정해줍니다. 저는 FB_공유하기 버튼 클릭 이벤트 픽셀이라고 이름 지었습니다.
태그 영역의 빈 공간을 클릭하면 태그의 유형을 선택하는 옵션 창이 나타납니다. 다양한 태그를 쉽게 설치할 수 있도록 구글과 관련된 태그 상품들이 들어가 있는 것을 확인할 수 있습니다.
하지만 페이스북 태그를 쉽게 설치할 수 있는 유형은 제공되고 있지 않기 때문에, [맞춤 HTML]을 선택하여 직접 스크립트를 정의해줍니다.
이벤트 픽셀은 아래 문법에 따라 똑같이 작업해주면 됩니다.
<script>
fbq(‘track’,’{{이벤트 이름}}’);
</script>
이벤트 이름이 들어가는 곳에 영어로 여러분이 알아볼 수 있는 이벤트 이름을 적어주면 됩니다. 저는 공유하기 버튼을 클릭하는 행위를 트래킹 하는 것이기 때문에 단순히 share로 이벤트 이름을 설정하였습니다. 해당 코드는 아래와 같습니다.
<script>
fbq(‘track’,’share’);
</script>
태그 설정이 끝나면 바로 아래 네모칸에 트리거 설정을 진행합니다. 트리거 설정을 누르면, [트리거 선택]이라는 메뉴가 나타납니다. 명령어가 발동하는 시점을 정의해주어야 하는데, 공유하기 버튼 클릭 트리거는 목록에 따로 없습니다. 오른쪽 상단 [+] 버튼을 클릭하여 새로운 트리거를 만들어줍니다.
트리거에도 이름을 붙여줍니다. 저는 ‘공유하기 버튼 클릭 트리거’라고 알아보기 쉽게 이름을 붙여주었습니다.
그런 다음, 트리거 구성의 빈 공간을 클릭하면 트리거의 유형을 선택하라는 옵션이 나타납니다. 트리거의 유형은 당연히 클릭 카테고리에 있는 [링크만] 유형과 [모든 요소] 유형 중 하나일 것입니다. [링크만] 유형은 HTML a태그와 같이 링크를 가지고 있는 요소를 트래킹 할 때 사용하는 트리거 유형입니다.
하지만 제가 지금 추적하고자 하는 공유하기 버튼은 어떠한 링크를 가지고 있지 않습니다. 그래서 트리거 유형을 [모든 요소]로 선택해줍니다.
모든 요소 클릭 트리거 유형을 선택하면, [모든 클릭] 메뉴와 [일부 클릭] 메뉴가 나타납니다. [모든 클릭]을 선택하면 당연히 공유하기 버튼뿐만이 아니라, 우리 웹사이트에서 발생하는 모든 영역의 클릭을 잡습니다. 그렇기 때문에 공유하기 버튼을 클릭할 때에만 이벤트 픽셀을 발동시키고 싶다면, [일부 클릭] 메뉴를 선택해주어야 합니다.
그러면 위 이미지와 같이, 변수를 설정하는 텍스트 박스 3개가 나타납니다. 가장 왼쪽부터 오른쪽 순으로 설명드리겠습니다.
가장 왼쪽 텍스트 박스 : 특정 요소를 정의할 때의 키값(Key Value)입니다.
중간 박스 : 좌항과 우항의 조건을 정의하는 ‘수식’을 입력합니다.
오른쪽 박스 : 키값에 대응하는 특정 요소의 벨류 값(Value)을 입력합니다.
우선 가장 왼쪽을 지정해주기 위해서는, 제가 추적하고자 하는 버튼이 어떤 변수 속성을 가지고 있는지 살펴보아야 합니다. 티스토리 블로그로 돌아가 보겠습니다.
상기 이미지 버튼에 마우스를 올린 상태로 [검사] 버튼을 눌러봅니다. 해당 기능은 크롬 브라우저에서만 쉽게 구현이 가능합니다.
그러면 버튼 쪽이 커서가 선택되면서, 오른쪽 콘솔 창에, ‘div class= “shareButton~~~”’이라는 파란색 영역이 나타납니다. HTML 코드라 개발 지식이 없는 분들은 이해가 어려울 수 있겠지만, 적어도, 저 파란색 영역으로 처리가 되어있는 부분이 버튼을 지칭한다는 것을 알 수 있습니다.
저 버튼을 자세히 보면 ‘Class’라는 속성이 있는 것을 확인할 수 있습니다. 이 버튼은 Class라는 속성 이름을 가지고 있기 때문에 구글 태그 매니저에서 Click Classes 변수를 활용하여 정의를 내릴 수 있습니다.
다시 태그 매니저로 돌아와 공유하기 버튼을 정의해보겠습니다. 위 이미지와 같이 설정을 마치면, “공유하기 버튼은 클릭했을 경우, 그 버튼의 Class값이 ‘shareButton’이라는 키워드를 포함하고 있다.”라고 해석할 수 있습니다.
다시 한번 문장을 바꿔서 말하면 아래와 같습니다.
“어떤 요소가 클릭이 발생했을 때, Class 값으로 ‘shareButton’이라는 문자를 가지고 있으면, 공유하기 버튼 클릭 트리거로 간주해라"라는 트리거 설정이 완료됩니다.
오른쪽 상단 저장 버튼을 눌러줍시다.
저장 버튼을 누르면 다시 태그를 설정하는 영역으로 들어옵니다. 이 태그를 다시 한번 해석하면 아래와 같은 문장이 됩니다.
“어떤 요소에 클릭이 발생했을 때, 해당 요소의 Class 이름이 ‘shareButton’이라는 문자를 포함하고 있으면, 공유하기 버튼 클릭 트리거로 간주하고, 공유하기 버튼 클릭 트리거가 발생하면, share라는 이름의 이벤트 픽셀을 발동시켜라!”
이 문장을 이해하고 넘어가도록 합시다. 하지만 아직 설정이 모두 끝난 것은 아닙니다. 페이스북 이벤트 픽셀은 말 그대로 이벤트를 발동시키는 역할이지 우리 광고 계정으로 데이터를 보내주는 역할을 가지고 있지는 않습니다. 광고 계정으로 데이터를 보내주는 역할은 페이스북 기본 픽셀이 하는 일입니다.
그렇기 때문에 구글 태그 매니저를 통해 설치하게 되는 모든 페이스북 이벤트 픽셀은 기본 픽셀이 먼저 발동되고 난 후에 발동이 되어야만, 정상적으로 데이터를 보내게 됩니다. 그래서 우리는 태그 설정에서 기본 픽셀이 먼저 발동되고 난 후에 지금 설치 중인 이벤트 픽셀을 발동시키는 태그의 순서를 정하는 작업을 해주어야 하며, 이를 태그 시퀀싱(Tag Sequencing)이라고 부릅니다.
태그 시퀀싱 작업은 간단합니다. [태그 구성] 옆 메뉴에 연필 모양의 수정 버튼을 클릭합니다.
태그 설정 하단에 [고급 설정]이라고 되어있는 DropDown 메뉴를 펼치고, [태그 시퀀싱] 메뉴를 한번 더 클릭하여 옵션 창이 나타나도록 펼칩니다.
그리고 이벤트 픽셀이 발생되기 전에 기본 픽셀이 발생되어야 하기 때문에, 이벤트 픽셀이 실행되기 전에 특정 태그를 선택하는 첫 번째 옵션을 체크 박스 표시를 합니다. 그리고, 위 이미지와 같이 우리가 이전에 만들어 놓은 기본 픽셀을 태그 시퀀싱 [설정 태그] 란에 넣어주면 됩니다.
위 이미지와 같이 설정을 마치면 오른쪽 상단 [저장] 버튼을 누르고 태그를 저장합니다.
그런 다음 오른쪽 상단 [제출] 버튼을 클릭하여 최종 태그를 발행합니다.
이제 우리는 공유하기 버튼 클릭 이벤트 픽셀 생성을 완료하였고, 구글 태그 매니저를 통해 해당 픽셀 명령어를 웹사이트에 실제 발행하였습니다. 그러면 티스토리 블로그로 돌아가 Facebook Pixel Helper를 사용하여, 공유하기 버튼 클릭 이벤트 픽셀이 제대로 발생되는지 확인해보겠습니다.
쿠키를 삭제하고, 티스토리 블로그로 들어가 보았습니다. 페이스북 픽셀 헬퍼를 확인하니 기본 페이지뷰 태그만 발동이 되고 있습니다. 이 상태에서 공유하기 버튼을 클릭해보겠습니다.
공유하기 버튼을 클릭했더니, share라는 이벤트가 발생되는 것을 확인할 수 있습니다. 이렇게 Facebook Pixel Helper에서 맞춤 이벤트 픽셀이 정상적으로 발동되는 것을 확인하였다면, 페이스북 이벤트 관리자에서도 데이터가 들어오는지 확인할 수 있습니다. 페이스북 이벤트 관리자 영역으로 넘어가 보겠습니다.
이벤트 관리자에 들어가 보니 일정 시간이 지난 후, share라는 이벤트가 발생된 것을 알 수 있습니다. 장바구니 이벤트의 경우, 장바구니 모양의 아이콘이 들어가 있습니다. 이는 페이스북에서 제공하는 표준 이벤트 픽셀이기 때문에 나타나는 것입니다. 하지만 share 이벤트의 경우 맞춤 이벤트로 직접 만들어주었기 때문에, 맞춤 이벤트 픽셀은 보이는 이미지와 같은 아이콘으로 통일되어 나타납니다.
이제 버튼 클릭 맞춤 이벤트 설정은 끝났습니다. 다음 장에서는 share 이벤트를 만들었으니, 실제 광고 관리자에서 집행하게 되는 광고별로 [맞춤 전환]이라는 기능을 활용해 광고 성과를 판단하는 방법과, share 이벤트를 기반으로, 맞춤 타깃을 만드는 방법에 대해서 살펴보겠습니다. 긴 글 읽어주셔서 감사합니다.
블로그 구독자 문의 주소 : team@hurdlers.kr
