㉓ [태그 매니저 활용] 페이스북 유튜브 영상 추적하기
그로스마케팅 파트너, 허들러스
23. [태그 매니저 활용] 페이스북 유튜브 영상 추적하기
안녕하세요. 그로스마케팅 파트너, 허들러스의 유성민 이사입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 페이스북 퍼포먼스 마케팅에 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 스물세 번째 이야기를 진행해보겠습니다.
지난번 장표에서 스크롤 픽셀을 설치하고 활용하는 내용들을 배워 보았습니다. 21장에서 스크롤 픽셀을 설치한 것처럼, 이번 글에서는 유튜브 영상을 조회한 유저들을 대상으로 리마케팅을 구현해보겠습니다. 이전 글을 읽지 않으신 분들이라면, 다소 이해하기가 어려울 수 있으니, 혹시라도 이전 연재 글을 읽지 않으신 분들은 아래 글을 순서대로 참고해주세요.
위 이미지와 같이 티스토리 블로그에 유튜브 영상을 하나 배치해두었습니다. 해당 블로그에 들어오는 유저들이 유튜브 영상을 얼마나 보는지에 대한 조회율이 궁금하여, 유튜브 영상을 재생했을 때와, 전체 영상 길이에 대비하여, 2%, 4%, 6%를 조회했을 때, 이벤트 픽셀을 발동시키고자 합니다. 또한 영상을 조회했던 사람들을 대상으로 리마케팅도 함께 구현해 보겠습니다.
지난번, 스크롤 이벤트 픽셀과 유사하게 유튜브 영상 조회 이벤트 픽셀을 설치하는 방법도 간단합니다. 순서는 아래와 같이 진행할 예정입니다.
1) 유튜브 영상 조회라는 고객의 행동과 관련된 변수 설정하기
2) 맞춤 HTML 기반의 태그 생성하기
3) 트리거 세팅하기
1. 유튜브 영상 조회와 관련된 변수 설정하기
우선 구글 태그 매니저의 [변수] 탭으로 이동하여 [기본 제공 변수] 항목의 [구성] 버튼을 클릭하여 영상을 조회할 때 추적할 수 있는 변수들을 추가해줍니다.
구성을 클릭하고, 스크롤을 조금 내리다 보면, [동영상]이라는 카테고리에 영상과 관련된 다양한 변수가 있는 것을 볼 수 있습니다. 하나씩 열거하여 설명해보겠습니다.
1) Video Provider : 말 그대로 비디오의 공급 회사를 문자로 반환합니다. 유튜브 영상을 추적하는 것이기 때문에, 당연히, ‘Youtube’라는 값을 반환할 것입니다.
2) Video Status : 영상의 현재 상태를 반환합니다. 재생, 일시중지, 재생 중, 재생 완료 등의 값들을 반환하는 변수입니다.
3) Video URL : 각 유튜브 영상은 고유한 URL을 가지고 있습니다. 각 영상의 URL을 반환하는 변수입니다.
4) Video Title : 영상의 이름을 문자 데이터로 가져옵니다.
5) Video Duration : 영상 재생의 지속 시간을 숫자 데이터로 가져옵니다. 예를 들어, 영상을 3초 동안 조회했다면 ‘3’이라는 숫자 데이터가 반환됩니다.
6) Video Current Time : 데이터를 전송하는 시점에 웹사이트 방문자가 보고 있던 영상의 시점을 반환합니다. 예를 들어 데이터를 보내는 순간이 영상 시간 1분일 때는 , ‘1:00’을 반환합니다.
7) Video Percent : Scroll Depth Threshold와 유사하게, 영상 전체 길이의 대비하여 조회한 비율을 반환합니다. 예를 들어 100초짜리 영상을 10초 동안 조회한 시점에 데이터를 전송하면 Video Percent는 ‘10’이라는 값을 반환합니다.
8) Video Visible : 영상이 재생되는지 여부와 상관없이, 방문자가 현재 보고 있는 화면에 나타나 있는지 여부를 반환합니다. 영상이 재생되어도 화면에 나타나 있지 않으면 ‘false’를, 화면에 나타나 있으면 ‘true’를 반환합니다.
저 변수들을 모두 외울 필요는 없습니다. 해보면서 자연스레 익히게 될 것입니다. 우선은 위 영상 조회와 관련한 변수들을 모두 체크해줍니다.
모두 추가를 해주면 [기본 제공 변수] 메뉴에서 다양한 영상과 관련된 변수들이 나타나는 것을 알 수 있습니다. 이제 변수 설정은 모두 끝났습니다.
2. 맞춤 HTML 기반의 태그 설정하기
이제 [태그] 영역으로 이동해 이벤트 픽셀 명령어를 만들어봅시다. [새로 만들기] 버튼을 클릭합니다.
우리가 설치하고자 하는 유튜브 영상 조회 이벤트 픽셀 역시, 페이스북 픽셀이기 때문에 태그의 유형을 [맞춤 HTML]로 설정합니다.
[맞춤 HTML] 태그 유형을 설정함과 동시에, 코드를 작성할 수 있는 란이 나타납니다. 스크롤 픽셀을 설치해준 것처럼 이벤트 픽셀 코드를 직접 정의할 수 있습니다.
위 이미지처럼 코드를 작성하면 됩니다. 작성이 어렵다면 아래 코드를 복사하여 붙여 넣기 해주세요.
<script>
fbq(‘ track ’, ‘ Youtube ’);
</script>
3. 트리거 설정하기
태그 설정이 끝났다면 아래쪽에 있는 트리거 설정 영역으로 이동합니다. 트리거 설정을 위해 트리거 영역의 빈 공간을 클릭합니다.
트리거를 선택하라는 창이 나타나지만 영상 조회와 관련된 트리거는 현재 없습니다. 처음 만들어주는 것이기 때문입니다. 오른쪽 상단에 [+] 버튼을 클릭하여 새로운 트리거를 만들어줍니다.
이름 없는 트리거를 ‘유튜브 영상 조회 트리거'라고 이름을 붙였습니다. 이름을 붙였다면 트리거 구성의 빈 영역을 클릭합니다.
트리거 유형을 살펴보면 [사용자 참여] 카테고리에 [Youtube 동영상]이라는 이름의 트리거 유형이 있는 것을 확인할 수 있습니다. 해당 트리거가 웹사이트 내에 있는 유튜브 영상을 데이터 기반으로 추적할 수 있는 트리거입니다. Vimeo와 같은 다른 플랫폼의 영상의 경우, 직접 코드를 짜야하지만 유튜브 영상의 경우, 아무래도 구글이 가지고 있는 플랫폼이기 때문에 쉽게 설치할 수 있는 트리거를 마련해놓았습니다.
[YouTube 동영상] 트리거를 선택하게 되면 [캡처], [고급], [트리거 실행 조건] 등의 설정들이 나타납니다. 해당 설정들을 하나씩 배워봅시다.
우선 [캡처] 설정입니다. [캡처]라는 것은 ‘포착하다.’라는 의미를 가지고 있습니다. 사용자가 영상을 보게 되면, 재생 시작, 재생 완료, 일시 중지, 버퍼링 등 다양한 경우의 이벤트를 하게 됩니다. 그 경우들을 모두 열거한 것 중에, “어느 시점에 태그를 발생시킬 것인가?”를 지정해주는 영역입니다.
이번 실습에서는 이해를 돕기 위해서 영상을 재생하는 [시작] 부분에 태그를 한번 발동시킬 것이고, 나머지 완료, 일시중지 때는 별도 태그를 발생시키지 않겠습니다. 그리고, 기존에 하려고 했던, 영상 재생 진행률에 따라 이벤트 픽셀을 발동시킬 것이기 때문에 [진행률]에 체크를 하였습니다.
보통 실무를 할 때는 전체 영상의 10%, 50%, 99% 정도의 비율을 적습니다만, 좀 더 빠르게 보여주기 위해, 전체 영상 길이의 2%, 4%, 6% 시점에 데이터를 전송하도록 설정하겠습니다. [비율]이라고 선택된 란에 ‘2,4,6’을 적습니다.
[비율] 아래쪽에는 [기준 시간]이라는 항목이 있습니다. 특정 영상에서 특정 시간이 지나면 데이터를 전송할 경우에는 [기준 시간] 메뉴를 선택하면 되지만, 일반적으로 유튜브 영상이 하나일 경우가 드물고, 다른 영상들마다 길이가 제 각각이기 때문에, 스크롤 트래킹과 같은 이유로, [비율]로 데이터를 전송하는 것을 추천합니다.
두 번째 설정은 [고급] 메뉴입니다. 가끔 웹사이트에 따라 Iframe 형태로 유튜브 영상을 재생시켜주는 경우가 많습니다. Iframe이란, 외부에서 특정 웹페이지나 유튜브 영상과 같은 콘텐츠를 가져와 띄워주는 기능을 가지고 있는 HTML의 한 종류입니다.
Iframe을 통해 유튜브를 재생할 경우, 외부에서 가져온 콘텐츠이기 때문에 구글 태그 매니저가 제대로 잡지 못할 수 있습니다. 그래서, 고급 영역을 체크하여 Iframe으로 영상을 가져왔어도 트래킹이 가능하게끔 설정해주는 메뉴입니다. 해당 부분을 체크합니다.
나머지 설정은 [트리거 실행 조건]입니다. ‘DOM 사용 가능'이라고 표시가 되어있으면 웬만한 유튜브 영상은 모두 다 트래킹이 가능합니다. 별도로 세팅값을 바꾸지 않고 넘어갑니다.
유튜브 영상 조회 트리거가 설정이 완료되면 위 이미지와 같은 모습입니다. 설정이 끝났다면 오른쪽 상단 [저장] 버튼을 클릭하여 태그 설정 영역으로 되돌아갑니다.
트리거까지 세팅이 끝난 태그의 모습입니다. 유튜브 영상이 재생되거나, 전체 길이의 2%, 4%, 6%를 조회하는 시점에 트리거가 발동하여, ‘Youtube’라는 이름의 이벤트가 발생될 것입니다. 하지만 한 가지 우리가 잊은 것이 있습니다. 이벤트 픽셀이 발동되기 전에는 기본 픽셀이 먼저 발동되어야만 합니다.
태그의 빈 영역을 클릭하여 [고급 설정] - [태그 시퀀싱]으로 이동합니다.
유튜브 영상 조회 이벤트 픽셀이 발생되기 전에 기본 픽셀이 먼저 발동되게끔 태그들의 순서를 지정하면 비로소 이벤트 픽셀 만들기가 모두 끝이 납니다.
위 이미지와 같이 설정이 된다면 모두 만들어진 것입니다. 오른쪽 상단 [저장] 버튼을 클릭하여 만든 태그를 저장합니다.
오른쪽 상단 최종 [제출] 버튼을 클릭하여 태그를 실제 웹사이트에 발행합니다.
4. 유튜브 영상 조회 트래킹 이슈
페이스북 픽셀 헬퍼를 통해서 유튜브 영상을 조회할 때 이벤트 픽셀이 잘 발동되는지 확인하는 절차를 시작합니다. 하지만, 페이스북 픽셀 헬퍼의 경우, 캐시를 지워주지 않으면 이벤트 픽셀을 설치하기 전 시점이 계속 남아있어 제대로 된 확인을 하기가 어렵습니다. 그렇기 때문에, 캐시를 지워주어야 합니다.
크롬 브라우저에서 오른쪽 상단 끝에 있는 점 3개를 클릭하고, [도구 더보기] - [인터넷 사용 기록 삭제] 메뉴를 클릭합니다.
모든 쿠키나 사용기록을 지울 필요는 없습니다. [캐시 된 이미지 및 파일]만 지워도 충분히 이벤트 픽셀을 검토할 수 있습니다. 다른 정보들까지 삭제를 하면 로그인을 다시 해야 하는 불편함이 있을 수 있으니, [캐시 된 이미지 및 파일]만 체크를 하고 [인터넷 사용 기록 삭제] 버튼을 클릭합니다.
캐시를 삭제하고, 티스토리 블로그로 되돌아와서 새로고침을 해보았습니다. 아직 영상이 재생되지 않았기 때문에, PageView 이벤트만 발생하는 것을 확인할 수 있습니다. 그렇다면 영상을 한번 재생해보겠습니다.
영상을 재생하는 시점에 Youtube 이벤트 픽셀이 발생된 것을 페이스북 픽셀 헬퍼에서 확인할 수 있습니다. 태그 매니저 설정에서 [캡처] 설정의 [시작]을 추적하겠다고 설정을 해두었기 때문에 이벤트가 정상적으로 발생됩니다. 이제 영상 전체 길이의 2%를 조회했을 때 데이터를 전송할 것이고, 4%를 조회했을 때 데이터를 전송할 것이고, 6%를 조회했을 때 데이터를 전송하여 총 3번 더 태그가 발동될 것입니다.
그런데 문제가 발생했습니다. 영상 길이의 2%를 조회한 시점에 Youtube 이벤트가 발동되었는데, 노란색의 경고창이 나타납니다.
왜 그런지 살펴보기 위해 Youtube 이벤트 픽셀의 오류 정보를 조회해보았습니다. 지금 보니 “같은 이벤트가 2번 발생되었으니, 오류의 여지가 있다.”라는 오류 안내 창이 나타납니다. 스크롤 이슈와 같이 유튜브 영상의 경우도, 데이터는 재생 시점과 전체 길이의 2%, 4%, 6%를 조회한 시점에 전송하지만, Youtube 이벤트에 추가 정보가 없으니 페이스북 픽셀 입장에서는 같은 이벤트로 인식하기 때문입니다.
전체 영상 길이의 4%를 조회한 시점에 페이스북 픽셀 헬퍼의 모습입니다. 이번에는 같은 이벤트가 3번 발생되었다고 오류가 나타납니다. 트리거는 다른 시점에 데이터를 전송하고 있으나, 데이터의 형태가 같으니 같은 이벤트라고 인식이 된다는 것입니다.
그렇다면 코드를 수정할 필요가 있습니다. 구글 태그 매니저에서 만들어준 ‘FB_유튜브 영상 조회'태그로 이동합니다. 태그로 이동하면 스크립트가 나타나는데 해당 스크립트에 추가적인 정보인 매개변수를 붙여줍니다.
스크롤 픽셀과 마찬가지로 같은 문법을 사용해 매개변수를 붙입니다. 첫 번째 정보는 video_name이라고 이름 붙였습니다. 그런 다음 중괄호를 2개 붙이면 Video Title이라는 변수가 드롭다운 메뉴에 나타납니다. 이제 어떤 영상을 볼 때마다 그 영상의 제목을 추가적인 데이터로 전송할 수 있습니다.
두 번째 변수는 video_percent입니다. 영상 조회 비율을 각각 다르게 보내주기 위해서 드롭다운 메뉴 중 Video Percent라는 동적 변수가 있는 것을 볼 수 있습니다. 이 변수를 넣습니다.
코드가 완성된 모습은 위 이미지와 같습니다. 보내고 있는 데이터가 같은 이벤트가 아님을 보여주기 위해 ‘Youtube’라는 이름의 이벤트에 추가적인 정보를 더 제공하여 페이스북으로 데이터를 보내게끔, 태그 매니저에서 사용 중인 동적 변수를 Youtube 이벤트의 매개변수로 추가한 모습니다. 코드를 작성하기 어렵다면 아래 코드를 그대로 복사해서 사용합니다.
<script>
fbq(‘track’,’Youtube’, {
video_name : {{Video Title}},
video_percent : {{Video Percent}}
});
</script>
위 이미지와 같이 설정이 끝났다면 [저장] - [게시] 버튼을 클릭하여 태그를 발행합니다.
다시 한번 캐시를 지우고, 새로고침을 한 다음 영상을 재생해보겠습니다.
역시나 재생 시점에 Youtube 이벤트는 동일하게 나타납니다. 관건은 2%를 조회한 시점에 데이터를 보낼 때에는 엄연히 다른 이벤트를 전송할 것이기 때문에, 노란색의 경고창이 나타나면 안 됩니다. 그렇다면 영상을 계속 재생해 보겠습니다.
영상을 계속 재생했더니 이름은 같지만 다른 이벤트가 한 개 더 나타나면서 노란색의 경고창이 뜨지 않습니다. 이 이벤트 픽셀은 이름만 같을 뿐, 매개변수가 보내주고 있는 값이 다르기 때문입니다.
한번 더 재생해도 동일합니다. 각기 다른 Youtube 이벤트가 3번 전송되고 있는 것을 볼 수 있습니다.
이벤트를 자세히 보았더니, video_percent라고 이름 붙여준 변수의 값이 모두 다릅니다. 재생 시점에 전송했던 Youtube 이벤트의 경우 video_percent의 값이 ‘0’으로 나타납니다.
두 번째 Youtube 이벤트는 2, 세 번째 Youtube 이벤트는 4가 나타나는 것으로 보아, 각각 다른 매개변수로 같은 이름의 이벤트를 전송하고 있는 것을 확인하였습니다. 이제 데이터를 제대로 받고 있는지 확인하기 위해 페이스북의 [이벤트 관리자] 메뉴로 이동해봅시다.
이벤트 관리자로 이동하니 Youtube 이벤트가 나타나는 것을 볼 수 있습니다. 이렇게 데이터가 들어오는 것이 잘 확인되었다면, Youtube 이벤트 픽셀 설치도 모두 성공적으로 해낸 것입니다.
꽤 긴 내용이었지만 이전 스크롤 픽셀 실습을 했더라면 그리 어렵지 않게 영상 조회 이벤트 픽셀을 설치할 수 있었을 것입니다. 다음 장에서는 유튜브 영상 조회 이벤트 픽셀이 성공적으로 발동되었으니, 해당 이벤트 픽셀의 활용법에 대해서 자세히 살펴보겠습니다.
블로그 구독자 문의 주소 : team@hurdlers.kr
