언론사나 블로그 등 글로 작성된 콘텐츠 위주의 웹사이트에서는 글을 어디까지 읽었는지가 꽤 중요한데, 많은 분이 Google Tag Manager를 이용해 Google Analytics 이벤트로 페이지 스크롤 깊이를 측정하고 있다. 이 때 Google Analytics 안에서 세그먼트를 만들어 스크롤 깊이를 이용한 광고를 Adwords에서 할 수 있지만 뭐니뭐니해도 광고는 역시 페이스북이 아닌가? 그래서 이번 글에선 페이스북 픽셀을 활용해 스크롤 깊이를 측정하고 그것을 이용해 맞춤타겟을 만드는 과정을 이야기해보려고 한다.

참고: Tracking Scroll Depth with Google Tag Manager (Google Analytics 스크롤 측정 이벤트 만들기)

[업데이트] 2017.10.19 - GTM의 스크롤 트리거 지원으로 글 내용 수정

이 글에서 다루는 도구

• Google Tag Manager
• Facebook Pixel
• Facebook Analytics

구글 태그 매니저를 이용하여 페이스북 픽셀 이벤트 설정하기

먼저 Google Tag Manger(줄여서 GTM이라고 하겠다.)를 이용해 스크롤을 측정하고 이벤트를 내보내는 Facebook Pixel을 설정해야 한다.

1. 스크롤 트리거 만들기

첫번째로 스크롤 깊이로 트리거를 만들어야 한다. 최근 GTM에 동영상 행동과 함께 추가된 스크롤 깊이 유형을 사용하면 쉽다. GTM에 접속한 후 [트리거] → [새로만들기]를 선택하고 [트리거 구성]에서 [스크롤 깊이]를 선택한다. 트리거 이름은 쉽게 구분할 수 있는 이름을 설정하자. 이 글에서는ScrollDepth로 설정했다.

스크롤 깊이로 트리거 유형을 선택하면 어떤 스크롤 깊이를 측정할지 체크하는 부분이 생겨난다. 세로와 가로 스크롤을 측정할 수 있는데, 이번에는 세로 스크롤 측정을 기준으로 설명하겠다. [세로 스크롤 깊이]에 체크하고 [비율]을 선택, 측정하고자 하는 기준을 콤마(,)로 구분하여 입력하면 된다. 여기서는 25,50,75,100으로 설정했다. 이제 [저장]을 누르자.

2. 스크롤 관련 변수 만들기

이번에는 위에서 만든 스크롤 트리거가 실행될 때마다 25%, 50%, 75%, 100% 이런 식으로 측정된 값을 GTM에서 저장하는 변수를 만들 차례다.

[변수] → [구성]을 선택하고 스크롤을 내려보면 [스크롤] 항목이 나온다. 이 변수들을 모두 체크하자. 각 변수의 설명은 아래와 같다.

• Scroll Depth Threshold: 스크롤 깊이(25, 50, 75, 100)
• Scroll Depth Units: 표시 기준(픽셀, 퍼센트)
• Scroll Depth Direction: 스크롤 방향(세로, 가로)

3. 페이스북 픽셀 이벤트 태그 만들기

이제 GTM 설정이 끝나간다. 마지막으로 페이스북 픽셀 이벤트 태그를 만들 차례다. 먼저 픽셀 기본 코드 태그를 만들자. [태그] → [새로만들기]를 선택하고 [태그 구성]에서 [맞춤 HTML]을 선택한다. 그리고 아래와 같은 형태의 픽셀 코드를 페이스북 픽셀 페이지로 가서 찾아 입력한다.

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '픽셀코드입력'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?
  id=픽셀코드입력
  &ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

<!-- 이 소스코드를 그대로 복사하여 붙여넣지 마세요! -->

그리고 아래의 [트리거]를 눌러 [All Pages]를 선택한 후 [저장]한다.

이제 GTM 설정 마지막 단계인 페이스북 픽셀 스크롤 이벤트 태그를 만들어보자. [태그] → [새로만들기]를 선택하고 [태그 구성]에서 [맞춤 HTML]을 선택한다. 그리고 아래의 소스코드 링크에서 소스코드를 복사하여 붙여넣자.

<script>
	fbq('trackCustom', 'ScrollTracking', {
	content_title: document.title, // 페이지의 제목
	scroll_depth: '{{Scroll Depth Threshold}}%' // 스크롤 깊이
	});
</script>

이제 아래로 내려가서 [ > 고급 설정]을 누르고 아래로 내려가 [ > 태그 시퀀싱]을 눌러 ‘OOO태그가 실행되기 전에 태그를 실행합니다.’ 에 체크하고 [설정 태그]를 위에서 만든 [페이스북 픽셀 기본 태그]로 선택한다.

그리고 좀 더 아래로 내려가 [트리거]를 눌러 처음에 만든 [ScrollDepth] 트리거를 선택하고 [저장]한다.

5. 작동 확인

이제 페이스북 픽셀로 페이지 스크롤을 측정하기 위해 갖춰야 할 것들이 모두 갖춰졌다. [미리보기]를 통해 페이스북 픽셀이 잘 작동하는지 확인해보자. 픽셀의 작동을 확인하는 방법에는 크게 2가지가 있는데 첫 번째는 [페이스북 애널리틱스]의 [이벤트 디버깅]으로 확인하는 방법이 있고, 두 번째는 크롬 확장 프로그램인 [Facebook Pixel Helper]를 이용하는 방법이 있다.

참고: Facebook Pixel Helper 안내

우리는 가장 간편한 방법인 Facebook Pixel Helper를 이용해서 확인해보자. GTM에서 [미리보기]를 실행하고 적용할 사이트로 접속해보자. 그리고 크롬 브라우저에 있는 Facebook Pixel Helper 버튼을 눌러 ScrollTracking 이벤트가 실행되고 있는지 확인하면 된다.

위 이미지와 같이 잘 작동하는게 확인됐으면 페이스북 픽셀로 스크롤 측정은 성공이다. 이제 GTM으로 돌아와 [미리보기]를 종료하고 [제출]하자.

이벤트에 대한 더 자세한 부분은 Facebook Analytics에 접속해 [이벤트] 메뉴로 들어가면 자세한 내용을 확인할 수 있다.

스크롤 데이터를 이용하여 페이스북 맞춤타겟 만들기

이제 어느 정도 시간이 지나고 이벤트가 쌓였을 때, 위에서 설정한 이벤트를 가지고 맞춤타겟을 만들 수 있다. 예를 들어 ‘우리 콘텐츠에 관심이 많은 사람은 스크롤을 절반 이상 내린다.’라는 가설을 잡고 맞춤타겟을 만들어 볼 수 있다.

자, 그럼 실전으로 넘어가서 페이스북의 [타겟] 메뉴로 들어가 [타겟 만들기]를 눌러 [웹사이트 트래픽]을 선택한다.

다음 화면으로 넘어가면 [모든 웹사이트 방문자 ▾]를 눌러 [ScrollTracking]을 선택하고, 아래 [세분화 기준]을 눌러 [URL/매개변수]를 선택한다. 그리고 [URL ▾]를 눌러 [scroll_depth]를 선택하고 아래에 ‘50%’를 입력하고 타겟을 만든다.

이제 잠시 기다리면, 50% 이상 스크롤을 내린 사용자의 맞춤타겟이 만들어진다.

정리

초보자에게는 다소 어려운 부분이 있을 수 있지만, 이미 맞춤타겟/유사타겟을 생성해보거나 페이스북 광고를 운영해본 경험이 있다면 쉽게 따라올 수 있을거라고 생각한다. 작업 순서를 정리해보면 아래와 같다.

1. GTM으로 스크롤 트리거와 페이스북 픽셀 이벤트 설정
2. Facebook Pixel Helper로 작동 확인
3. ScrollTracking 이벤트와 매개변수로 맞춤타겟 생성

마지막으로 지금까지 따라한 내용에 구글 애널리틱스 이벤트 태그만 추가하면 구글 애널리틱스에서도 스크롤을 측정할 수 있으니 여유가 있을 때 시도해보길 추천한다.