GA4 : 삽입된 유튜브 시청 추적하기

우리의 웹서비스에는 유튜브 영상을 보여줄때도 있습니다.

그리고 이러한 영상들을 추적하고자 할때가 많이 있죠

 

오늘은 첫번째! 우리 웹서비스 사용자들이 웹서비스에 올라온 유튜브 영상을 보는지, 얼마나 보는지를 확인하고자 합니다.

그리고 두번째! 우리 웹서비스를 이용하는 사용자들 화면에 영상이 있을 때만 이벤트가 발생하도록 하고 매개변수에 몇%를 보고있는지 추적하도록 해보겠습니다.

 

첫번째 : 유튜브 영상 시청 추적하기

1. 웹사이트 영상 분석

 

영상이 웹사이트에 어떤식으로 들어가 있는지를 확인해 보아야 해요

저는 임시로 제 영상을 넣어봤는데요. 

youtube가 심어져 있는 것을 확인하려면 iframe으로 심어져 있어야 합니다.

 

만약 iframe으로 설정이 안되어 있다면

원하는 영상을 우클릭해서 소스코드복사를 선택해서 html에 심어주면 됩니다.

 

2. GTM 설정

iframe으로 잘 심어져 있다면 이제 gtm을 설정하면 됩니다. 

먼저 템플릿으로 이동해서 youtube iframe API loader를 가져와주세요. 저는 이미 가져왔어서 아래처럼 뜨는 겁니다.

그 다음 태그로 이동해주세요

태그로 이동해서 아래와 같이 세팅해주세요. 트리거를 페이지뷰로 설정하는 이유는 처음에 웹서비스가 로드되었을대 api를 바로 심어주기 위함입니다.

 

이제 트리거로 이동할게요

트리거에서 아래와 같이 설정해주시면 됩니다. 이렇게 설정하면 시작, 완료, 일시중지, 검색, 버퍼링, 30혹은 60 퍼센트를 시청했을때 트리거가 발동됩니다.

자바스크립트 api 지원을 모든 youtube 동영상에 추가합니다를 선택해주시면 됩니다.

 

다시 태그로 이동해서 아래와 같이 세팅해주세요

자 이제 완성되었어요!

 

늘 그래왔드시 미리보기를 클릭해주시고 실험해보시면

 

 

이렇게 이벤트가 잘 수집되는 것을 볼 수 있습니다.

 

 

두번째 : 더 자세하게 영상 시청 추적하기

1. html확인

먼저 여러분들이 추적하고자 하는 영상이 들어있는 웹서비스를 분석해야 해요

 저의 경우는 이렇습니다.

원래는 id = "youtube"이게 없었는데 유튜브 영상 추적에 용이하게 하기 위해서 임의로 넣어주었어요

여러분들도 되도록 요소공개상태는 id로 추적하는게 좋아서 id가 요소에 없다면 포함시켜 주세요.

이렇게 id를 넣었으면 id값을 외우거나 복사하고 이제 다음단계로 넘어가겠습니다.

 

2. GTM 변수 설정

이제 GTM으로 이동해서 변수탭으로 간 후 새로만들기를 클릭해주세요

그런 다음에 변수 유형 > 요소 공개 상태를 클릭해주신 후 아래 사진처럼 설정해주세요. 요소 ID에는 여러분이 아까 넣어주신 id값을 넣어주시면 되고 만약 id값이 없다면 CSS선택도구를 클릭하셔서 해주시면 됩니다.

만약 css 선택도구에서 id를 넣으실거면 #youtube이렇게 넣어주시고 class를 넣어주실거면 .youtube이렇게 .을 붙여서 넣어주시면 됩니다.

그리고 추가적으로 저는 몇 %를 봤는지를 추적하고 싶어서 변수에서 기본제공변수에 들어간 뒤 Video percent를 클릭해주세요.

 

3. gtm 트리거

자 이제 트리거로 이동해서 저번 블로그에서 만들었던 트리거로 이동해주세요

이제 발동조건에 추가적인 요소를 넣어줄거에요.

아래 사진처럼 아까 만들었던 변수가 true일때 트리거를 발생시켜라라고 만들어 주시면 됩니다.

 

4. GTM 태그 설정

저번 블로그에서 만들었던 태그로 들어가 주신 후에 매개변수를 추가해 주면 됩니다.

아래 사진처럼 추가해주세요.

트리거 같은 경우는 저번에 만들었던 트리거를 그대로 활용해서 변경한 것이기 때문에 그대로 두시면 됩니다.!

 

이제 완성! 됬습니다.

사용자 화면에 유튜브 영상이 있을때만 이벤트가 발생되며, 몇 %를 시청중인지도 매개변수로 저장이 될거에요.