㉑ [태그 매니저 활용] 페이스북 스크롤 픽셀
그로스마케팅 파트너, 허들러스
21. [태그 매니저 활용] 페이스북 스크롤 픽셀
안녕하세요. 그로스마케팅 파트너, 허들러스입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 스물한 번째 이야기를 진행해보겠습니다.
지난번 장표에서 맞춤 이벤트 픽셀을 통해, 실제로 버튼을 클릭한 유저들을 대상으로 리마케팅 모수를 확보하고, 전환 캠페인을 집행해보며, 맞춤 전환을 만들어 성과 지표를 파악하는 방법을 다루어보았습니다. 이번 글에서는 우리 웹 사이트 내에서 스크롤을 했을 때, 이벤트 픽셀을 발생시키는 방법에 대해서 자세히 다뤄보겠습니다.
이전 글을 읽지 않으신 분들이라면, 다소 이해하기가 어려울 수 있으니, 혹시라도 이전 연재 글을 읽지 않으신 분들은 아래 글을 순서대로 참고해주세요.
지난번, 버튼 클릭 이벤트 픽셀과 유사하게 스크롤 이벤트 픽셀을 설치하는 방법도 간단합니다. 버튼 클릭 이벤트 픽셀을 구현할 때에는 아래 순서와 같이 진행했습니다.
1) 버튼 클릭과 관련된 변수 설정하기
2) 맞춤 HTML 기반의 태그 생성하기
3) 트리거 세팅하기
스크롤 픽셀도 마찬가지입니다.
1) 스크롤과 관련된 변수 설정하기
2) 맞춤 HTML 기반의 태그 생성하기
3) 트리거 세팅하기
위 순서와 같이 스크롤 이벤트 픽셀을 설치해보도록 하겠습니다.
1. 스크롤과 관련된 변수 설정하기
우선, 구글 태그 매니저의 [변수] 메뉴로 이동하여, 스크롤과 관련된 변수를 추가해주기 위해, [기본 제공 변수] 목록 오른쪽 상단에 있는 [구성] 버튼을 클릭합니다.
그럼 다양한 기본 제공 변수들이 나타나 있습니다. 모든 변수를 체크해줄 필요는 없고, 역시 스크롤과 관련된 변수만 찾아서 체크를 해줍니다.
기본 제공 변수의 아래쪽을 살펴보면 [스크롤]이라는 메뉴에 변수가 3개가 있는 것을 볼 수 있습니다. 이 변수들이 의미하는 내용은 아래와 같습니다.
1) Scroll Depth Threshold : 스크롤의 정도를 숫자로 반환해주는 변수입니다.
2) Scroll Depth Units : 스크롤의 정도를 숫자로 반환할 때, 퍼센티지로 표기할지 픽셀로 표기할지에 대한 단위를 반환해주는 변수입니다.
3) Scroll Direction : 세로 스크롤인지, 가로 스크롤인지 여부를 반환해주는 변수입니다. 물론 실무에서는 세로 스크롤을 주로 사용합니다.
위 이미지와 같이 스크롤과 관련된 변수를 3개 체크하면 됩니다.
2. 맞춤 HTML 기반의 태그 설정하기
그런 다음 구글 태그 매니저의 [태그] 메뉴로 이동합니다. 이전에 만들었던 페이스북 기본 픽셀이 있네요. 페이스북 기본 픽셀이 설치되어있는 상황에서 [새로 만들기] 버튼을 클릭하여 스크롤 이벤트 픽셀을 만들어봅시다.
새로운 태그를 만들면 태그 및 트리거 설정 박스가 나타납니다. 우선 이번 실습에서는 태그의 이름을 ‘FB_스크롤 이벤트 픽셀’이라고 이름 붙였습니다. 이름을 붙였다면 [태그 구성] 영역의 빈 공간을 클릭합니다.
당연히 태그의 유형은 [맞춤 HTML]로 선택합니다.
그런 다음 위 이미지와 같이 이벤트 픽셀 코드를 적어주면 간단하게 이벤트 픽셀 정의가 끝납니다.
코드는 보기 어렵다면 아래 코드를 그대로 복사하여 붙여 넣습니다.
<script>
fbq(‘track’,’scroll’);
</script>
그런 다음 [고급 설정] - [태그 시퀀싱] 메뉴로 들어가 [FB_스크롤 이벤트 픽셀 태그가 실행되기 전에 태그를 실행합니다.]라는 메뉴를 클릭합니다. 이전에 언급하였듯이, 이벤트 픽셀이 발생되기 전에는 기본 픽셀 태그가 먼저 발동이 되어야 합니다. 옵션 체크박스를 체크한 후, 나타나는 [태그 선택] 메뉴를 클릭합니다.
위 이미지와 같이 FB_기본 픽셀을 설정 태그란에 넣으면 태그 간의 순서가 만들어집니다.
지금 우리가 만들고 있는 스크롤 태그는 기본 픽셀 태그가 발동되고 난 후에 발동이 되도록 설정한 것입니다.
3. 트리거 설정하기
태그 설정이 끝났으면 트리거 설정을 해야 합니다. [트리거] 영역의 빈 공간을 클릭합니다.
우리는 스크롤이 될 때마다 태그를 발동시키는 스크롤 트리거를 만들어야 합니다. 하지만 지금 목록에 나타나는 트리거는 All Pages 트리거 밖에 없습니다. 그렇기 때문에 오른쪽 상단 [+] 버튼을 클릭하여 새로운 스크롤 트리거를 만들어줍니다.
트리거에도 이름을 붙여주어야 합니다. 이번 실습에서는 ‘스크롤 트리거’라고 이름을 붙이겠습니다. 트리거의 이름을 적어두었다면, [트리거 구성]의 빈 공간을 클릭하여 새로운 트리거를 만들어줍니다.
트리거 유형은 직관적으로 [스크롤 깊이]를 선택하면 됩니다. 이 트리거가 바로 고객들이 우리 웹사이트에 방문하여, 특정 페이지에서 스크롤 행위를 했을 때, 태그를 발동시켜주는 트리거입니다.
트리거 유형을 [스크롤 깊이]로 설정하면 위 이미지와 같은 설정란이 나타납니다. 우선 첫 번째로 [세로 스크롤 깊이]와 [가로 스크롤 깊이] 중 선택합니다.
[세로 스크롤 깊이]를 클릭하면 [비율], [픽셀]의 두 가지 옵션이 있습니다.
비율 : 특정 웹페이지의 전체 세로 길이 대비 몇 %를 스크롤할 때마다, 발동시키도록 하는 옵션입니다.
픽셀 : 특정 웹페이지에서 몇 px을 스크롤할 때마다 발동시키도록 하는 옵션입니다.
픽셀의 경우 다른 웹페이지들의 전체 길이에 상관없이 특정 세로 길이를 넘어가게 되어야만 발동이 됩니다. 하지만 만약 쇼핑몰을 운영하고 있다고 가정했을 때, 우리가 원하는 것은 ‘상세페이지의 관심도’입니다. 상세페이지의 관심도를 측정해야만 하는 것이 목적이지만 상세페이지 별로 그 제품의 설명이 얼마나 많이 있느냐에 따라 전체 세로 길이는 달라지게 됩니다.
그래서 고정적인 픽셀보다는 “전체 세로 길이에 대비해서 몇% 스크롤을 했는가?”에 정답을 줄 수 있는 [비율] 옵션을 선택하는 것이 가장 적합합니다. 이러한 이유로 이번 실습에서는 [비율] 옵션을 사용하겠습니다.
비율의 경우 딱히 정답이 정해져 있는 것은 아니지만, 보통 실무에서는 위 4가지 값을 기입합니다.
‘25,50,75,99’라고 값을 표시해 두었습니다. 이 말은 웹 페이지에서 전체 세로 길이에 대비하여 25% 스크롤을 한 경우, 50% 스크롤을 한 경우, 75% 스크롤을 한 경우, 99% 스크롤을 한 경우에 태그가 발생되도록 설정한 것입니다. 25% 스크롤은 필요 없다고 생각한다면 단순히 ‘50,75,99’를 적어주면 됩니다.
스크롤 비율은 정해진 답은 아니니 자유롭게 작성해도 무방합니다.
스크롤 트리거 설정의 아래쪽으로 내려가면. [모든 페이지] 옵션과 [일부 페이지] 옵션이 있습니다. 이렇게 Page URL을 가지고 특정 웹페이지에서만 스크롤 트래킹을 할 수도 있습니다.
우선 이번 실습에서는 [모든 페이지]를 선택하여 티스토리 블로그에 있는 모든 웹 페이지들의 스크롤을 추적하는 트리거를 설정해보겠습니다.
위 이미지가 모든 설정이 끝난 이미지입니다. 웹사이트에 존재하는 모든 웹 페이지에 스크롤이 25%,50%,75%,99% 발생하면 ‘scroll’이라는 이름의 이벤트 픽셀을 발동시키는 하나의 태그가 완성된 것입니다. 위 이미지와 똑같이 설정이 끝났다면, 오른쪽 상단 [저장] 버튼을 클릭합니다.
[저장] 버튼을 클릭하면 태그 목록에 [FB_스크롤 이벤트 픽셀]이라는 이름의 태그가 저장된 것을 볼 수 있습니다. 실제로 잘 발생하는지 관측해보기 위해, [미리 보기]를 클릭합니다.
미리보기를 클릭하게 되면 URL을 기입하는 태그 매니저의 안내 팝업이 나타납니다. 스크롤 트리거를 설치한 URL을 적고, [Start] 버튼을 클릭하면 됩니다. 이번 실습에서는 모든 웹페이지에 스크롤 트리거를 설치하도록 설정하였기 때문에, 티스토리 블로그의 도메인 주소만 기입하고 [Start] 버튼을 클릭하겠습니다.
[Start] 버튼을 클릭하면 위 이미지와 같이 티스토리 블로그의 썸네일이 아닌, 태그 어시스턴트의 썸네일이 나타납니다. 여기서 실제로 스크롤을 해보고 페이스북 픽셀 헬퍼를 살펴보겠습니다.
지금은 웹페이지 내에서 어떤 스크롤을 하지 않았기 때문에, 페이스북 픽셀 헬퍼에서는 기본 픽셀인 PageView만 나타나는 것을 볼 수 있습니다. 이 상태에서 스크롤을 해보겠습니다.
스크롤을 어느 정도 하니, scroll 이벤트가 나타난 것을 볼 수 있습니다. 이번에는 끝까지 스크롤을 해보겠습니다.
4. 스크롤 트래킹 이슈
티스토리 블로그의 최하단까지 스크롤을 하니, scroll 이벤트의 노란색의 경고창이 나타납니다. 같은 이름의 이벤트가 4번이 발생했기 때문에 경고창이 나타난 것입니다. 25% 스크롤을 했을 때, 50%,75%,99% 스크롤을 했을 때까지 총 4번의 같은 이벤트가 발생한 것입니다. 여기서 문제가 하나 생깁니다.
나중에 이벤트 픽셀을 가지고 리마케팅 모수를 생성할 때에는 25% 스크롤을 했던 사람과 75%를 스크롤했던 사람들은 엄연히 다른 품질을 가지고 있는 사람들이기 때문입니다. 하지만 scroll이라는 이벤트가 4번이 발생했다는 경고가 나온 것으로 보아, 현재 페이스북 픽셀 헬퍼는 각기 다른 퍼센티지까지 스크롤을 한 이벤트임을 구별하지 못하고 있습니다.
이러한 오류가 생기기 때문에, 우리는 이전에 설정해두었던 scroll 이벤트에 추가적인 정보를 제공해줄 수 있어야 합니다. 추가적인 정보는 바로 ‘스크롤의 정도’를 비율에 따라 다른 값이 들어갈 수 있도록 코드를 설정해주어야 한다는 것입니다. 이처럼 이벤트 픽셀에 추가 정보를 페이스북에 전달할 때에 ‘매개 변수’라는 개념이 쓰입니다. 태그 매니저로 돌아가 봅시다.
태그 매니저 [작업 공간] - [태그]에서 방금 만들어주었던 [FB_스크롤 이벤트 픽셀]을 클릭합니다.
위 이미지와 같이 코드를 작성합니다. 코드를 작성하는 순서는 아래와 같습니다.
1) 기존 이벤트 픽셀 코드
<script>
fbq(‘track’, ‘scroll’);
</script>
2) 매개변수가 추가된 이벤트 픽셀 코드
<script>
fbq(‘track’,’scroll’, {} )
</script>
이벤트 이름을 표시하는 scroll 옆에 쉼표를 하나 더 붙여 중괄호를 적습니다.
3) 매개변수가 추가된 이벤트 픽셀 코드
<script>
fbq(‘track’,’scroll’, {
(현재 비어있는 공간)
})
</script>
여는 중괄호와 닫는 중괄호 사이 엔터 키를 눌러, 코드 가독성이 좋도록 만듭니다. 비어있는 공간에 매개변수를 추가할 것입니다.
scroll로 값을 담을 키값을 정의하고, 중괄호를 두 개 적습니다. 중괄호를 두 개 적으면 목록이 나타납니다. 여기서 ‘스크롤의 정도’를 의미하는 ‘Scroll Depth Threshold’ 변수가 있는 것을 볼 수 있습니다.
이 변수는 가장 처음 스크롤과 관련된 변수를 추가할 때 체크 박스를 통해 추가해주었던 변수입니다.
코드를 완성하면 위 이미지와 같은 모습입니다. 우리는 지금 scroll이라는 이름의 이벤트에 ‘scroll’의 정도를 추가해주는 매개변수를 하나 만들었습니다. 그 매개변수의 이름은 ‘scroll’입니다. 그리고 ‘scroll’이라는 매개변수의 값 영역에는 {{Scroll Depth Threshold}}가 들어가 있는 것을 볼 수 있습니다. 이 중괄호가 의미하는 바는 중괄호 안에는 웹사이트를 방문하는 사용자의 행동에 따른 값이 자유롭게 들어간다는 의미입니다.
예를 들어 고객이 25% 이상 스크롤을 하게 되면, {{Scroll Depth Threshold}} 는 자연스럽게 25로 바뀌게 됩니다. 하지만 고객이 99% 까지 스크롤을 하게 되면, {{Scroll Depth Threshold}} 는 99로 바뀌는 것입니다. 이렇게 고객의 행동에 따라 값이 바뀌는 변수를 ‘동적 변수’라고 합니다. 그리고 이 ‘동적 변수’는 scroll이라는 이벤트의 추가적인 정보를 붙여주는 매개변수의 역할을 합니다.
동적 변수와 매개변수의 용어 차이를 자세히 구분해놓도록 합시다.
코드를 수정한 뒤, [제출] 버튼을 클릭하여 태그를 최종 발행합니다. 그런 다음 캐시를 삭제한 후, 다시 티스토리 블로그로 들어옵니다.
다시 방문을 했어도 여전히 기본 픽셀 태그만 발행이 된 것이 보입니다. 아직 스크롤을 하지 않았기 때문입니다. 그러면 스크롤을 시도해보겠습니다.
스크롤을 끝까지 했더니 위 이미지와 같이 나타납니다. 아까와 같은 중복 발생 에러가 일어나지 않고, 각각의 다른 scroll 이벤트가 4번 발생한 것을 알 수 있습니다. 동적 변수를 활용하여 scroll 이벤트에 매개변수를 붙여주었기 때문입니다.
픽셀 헬퍼를 자세히 보면, 각 스크롤마다 scroll 동적 변수 값이 들어간 것을 볼 수 있습니다. 50, 75, 99 순으로 스크롤이 발생했습니다. 이렇게 나타난다면 스크롤 이벤트가 제대로 설치된 것입니다.
이제 데이터가 정상적으로 들어오는지 확인하기 위해 페이스북 광고 관리자로 이동하여 [이벤트 관리자] 메뉴로 들어가 봅시다.
이벤트 관리자에 들어갔더니 scroll 이벤트가 정상적으로 발생합니다. 이렇게 스크롤 이벤트가 이벤트 관리자 영역에서도 정상적으로 발동을 한 것이 확인되었다면, 스크롤을 했던 사람들을 리마케팅 모수로 생성하거나, 맞춤 전환을 만들어서 성과 확인을 할 수도 있습니다. 스크롤 이벤트 픽셀 설치는 다소 어려운 수준이지만, 전문적인 광고 대행사들도 이렇게 구현하지는 못하고 있습니다.
이번 장에서는 스크롤 이벤트 픽셀을 설치해보았습니다. 다음 장에서는 이 스크롤 이벤트를 가지고 맞춤 전환 및 리마케팅 모수를 생성하는 방법에 대해서 자세히 살펴보겠습니다.
긴 글 읽어주셔서 감사합니다.
블로그 구독자 문의 주소 : team@hurdlers.kr
