㉖ [페이스북 픽셀] 쇼핑몰 리뷰 조회 추적하기 2
그로스마케팅 파트너, 허들러스
26. [태그 매니저 X 페이스북 픽셀] 쇼핑몰 리뷰 조회 추적하기 2
안녕하세요. 그로스 해킹 플랫폼, 허들러스의 유성민 이사입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 스물여섯 번째 이야기를 진행해보겠습니다.
지난번 장에서 우리는 리뷰 영역을 ID 기반으로 정의하여, 리뷰 영역을 7초 이상 조회한 유저들에게 이벤트를 전송하는 실습을 진행하였습니다. 하지만 웹사이트에 있는 모든 영역이 ID를 가지고 있는 것은 아닙니다. 그렇기 때문에 특정 영역을 7초 이상 조회할 때, 특정 영역을 정의하기 위해서는 CSS 선택 자라는 개념을 가지고 있어야만, 모든 영역을 제대로 추적할 수 있습니다.
지난 장에는 ID값을 가지고 있는 DIV 태그를 영역으로 지정하여 구글 태그 매니저에 영역 정의를 하였습니다. 하지만 커서가 잡힌 부분을 자세히 살펴보면, 리뷰 영역뿐만이 아니라, 리뷰 영역을 포함하고 있는 리뷰를 작성하는 영역까지 커서가 잡혀있는 것을 볼 수 있습니다.
그래서 이번에는 정확하게 리뷰 영역만 정의하기 위한 ‘commentList’라는 이름의 Class 값을 가지고 있는 DIV 태그를 리뷰 영역이라고 정의하고 싶습니다. 하지만 보다시피, 이 영역은 ID를 가지고 있지 않다 보니, 구글 태그 매니저 요소 공개 트리거를 활용하는 경우, ID로 잡을 수가 없는 문제가 발생합니다.
그래서 우리는 태그 매니저에서 [CSS 선택 도구]라는 메뉴를 통해서 위 리뷰 영역을 새롭게 정의할 것입니다. 물론 그저 따라 하기만 하면 바로 추적이 가능하겠지만 원리를 알고 가야 다른 영역을 추적하는 데에도 활용할 수 있을 것입니다. CSS 선택 도구가 무엇인지 자세히 살펴봅시다.
1. CSS 선택자란?
CSS 선택 도구는 사실 구글 태그 매니저에서만 쓰이는 명칭이며, 정확한 명칭은 ‘CSS 선택자'라고 부릅니다. CSS는 우리가 페이스북 픽셀의 정체에 대해서 이야기할 때, 간단히 언급하고 넘어간 적이 있습니다. CSS는 웹사이트를 구성하는 3가지 주요 언어 중 하나로써, ‘디자인'을 관장하는 언어를 의미합니다.
웹사이트를 만드는 개발자가 특정 요소에 배경색을 입히거나, 글자의 폰트, 글자의 크기, 글꼴과 같은 디자인적인 요소들을 입힐 때 사용하는 것인 바로 CSS 선택자입니다. 간단히 예를 들어 봅시다.
위 이미지는 실습용 티스토리 블로그에서 [Submit]이라는 버튼에 마우스의 오른쪽 버튼을 눌러 [검사] 메뉴를 클릭한 모습입니다. 파란색으로 커서가 되어있는 HTML 코드가 바로 [Submit] 버튼을 의미하는 것을 우리는 직관적으로 알 수 있습니다.
<button type="button" class="btn btn-default btnComment btn-sm" onclick="addComment(this, 76); return false;" id="labbit"> submit </button>
위 파란색으로 커서가 잡혀있는 영역을 그대로 복사해왔습니다. 해당 버튼의 태그 이름은 <button>입니다. 또한 해당 버튼의 클래스 이름은 ‘btn btn-default btnComment btn-sm’입니다. 제가 개발자라면 이제 이 버튼에 디자인을 입혀야 합니다. 글자 크기는 흰색이어야 하고, 해당 버튼의 배경색은 검은색이어야 합니다. 그럼 CSS 코드를 짜 봅니다.
. btn btn-default btnComment btn-sm {
background-color:# black;
font-color : white
}
위 코드를 한글로 직역하면 아래와 같습니다.
“‘btn btn-default btnComment btn-sm’라는 클래스 명을 가지고 있는 요소에 배경색은 검은색으로, 글자색은 흰색으로 처리해라.”라는 문장이 됩니다.
여기서 우리는 ‘. btn btn-default btnComment btn-sm’에 주목해야 합니다. 여기서 클래스 이름 앞에 ‘.’이라고 되어있는 부분이 바로 CSS 선택자입니다. CSS 선택자는 이처럼 우리 웹사이트에 있는 특정 요소에 디자인을 적용하는 경우에 사용하는 특수기호입니다. 선택자의 종류는 여러 가지입니다. 다만, 선택자를 공부하는 시간이 아니기 때문에 선택자에 대해서 잘 정리된 글이 있어 링크로 대체합니다. 가볍게 읽어보시길 추천드립니다.
CSS 선택자가 잘 정리된 글 : https://www.nextree.co.kr/p8468/
이 CSS 선택자를 통해서, 우리는 특정 요소에 ID가 없더라도, 리뷰 영역을 정의할 수 있습니다.
2. 리뷰 영역 선택자 가져오기
우리는 CSS 선택 도구를 통해, [요소 선택 도구] 란에 CSS 선택자를 이용하여 리뷰 영역을 넣어야만 합니다.
id 값이 없는 해당 리뷰 영역을 커서로 잡습니다.
해당 요소에 마우스의 오른쪽 버튼을 클릭하여 [Copy] - [Copy selector]를 통해 해당 요소의 선택자 값을 복사할 수 있습니다. [Copy selector] 메뉴를 클릭했다면 태그 매니저로 돌아가 그대로 붙여 넣기 해봅시다.
실습을 진행하는 여러분과 선택자 값은 각각 다를 것입니다. 이번 실습에서는 “#entry76Comment > div > div” 값이 나타났습니다. 이 선택자를 그대로 해석하면 아래와 같습니다.
“‘entry76Comment’라는 id값을 가지고 있는 요소 아래에 있는 div 태그 아래에 있는 div 태그”를 의미합니다. 실제 HTML 코드를 보면서 선택자가 맞는지 확인해보겠습니다.
위 이미지에서 우리가 정의하려고 한 영역은 회색으로 커서 처리된, ‘commentList’ 라는 영역이고 우리는 이 영역의 선택자를 복사해왔습니다. 위쪽으로 올라가 보면, ‘entry76Comment’ 라는 id 값을 가지고 있는 요소가 하나 나오고, 그 요소 아래에 있는 div태그 아래에 있는 div태그가 바로 우리가 복사하려는 영역이 맞습니다. 이처럼 [Copy selector] 기능을 이용해 우리가 추적하고자 하는 영역의 선택자 값을 가지고 있습니다.
다만, 모바일 사이트와 PC 사이트의 선택자 값은 달라질 수 있으므로 항상 주의하여 트리거를 설정해야 합니다. 만약에 모바일 사이트의 A영역과 PC 사이트의 A영역이 다르다면, 선택자로 달리하여 트리거를 2개로 만든 뒤 OR 조건으로 설정할 필요가 있습니다.
그럼 실제로 [저장] 버튼을 클릭하고 태그를 게시한 뒤, 명령어가 잘 발생되는지 확인해봅시다.
캐시를 지우고 다시 돌아와 리뷰 영역을 보았습니다. 아직 어떤 이벤트도 발생되지 않는 것을 알 수 있습니다.
7초 정도 있으니 지난번 글과 똑같이 리뷰 이벤트가 발생되는 것을 확인할 수 있습니다. id값이 아니더라도 특정 요소를 [Copy Selector]를 통해서 정의하여 [요소 공개 트리거] 설정을 진행해 이벤트 픽셀을 설치해보았습니다.
이 선택자는 활용하게 되면 무궁무진하게 사용할 수 있으니, 반드시 개념을 익혀보시길 추천드립니다.
다음 장표에서는 리뷰 이벤트를 발생시킨 유저들을 대상으로 리마케팅을 구현해봅시다.
긴 글 읽어주셔서 감사합니다.
블로그 구독자 문의 주소 : team@hurdlers.kr
