Google 태그 관리자, Google 애널리틱스를 사용한 YouTube 임베디드 동영상 측정(모달 창, SPA 지원)

Google Tag Manager(GTM)에 YouTube 임베디드 동영상 측정 기능이 추가되었습니다.
사이트에 포함된 YouTube 동영상의 조회수, 재생 시간, 재생 상태를 Google analytics(GA)에 쉽게 보낼 수 있는 기능입니다.

지금까지는 YouTube Player API를 사용하여 프로그래밍하여 GA에 이벤트를 보낼 필요가 있었다. 그것이 GTM의 「YouTube 동영상 트리거」로, 프로그래밍 불필요로, 사이트의 소스를 아무것도 건드리지 않고 계측할 수 있게 되었다.

iframe 내장 YouTube Player API
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 요츠베 / 이 f 라메 _ 아피 _ 레후 렌세? hl = 그럼

YouTube 동영상 트리거
htps : // 꼬리 rt. 오, ぇ. 코 m/타g 마나게 r/안수 r/7679325? hl = 그럼

어쩌면 빠지다,
JS로 동적으로 만드는 모달 윈도우나 SPA로 동적으로 만들어진 YouTube 삽입 동영상의 계측 방법을 조사했다.

YouTube 동영상을 사이트에 퍼가기

임베디드용 iframe 태그 가져오기

YouTube 동영상 > 공유 > 퍼가기

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/r2d2BqE-I6w" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture"
  allowfullscreen>
</iframe>

사이트에 붙여넣기

GTM에서 측정 설정

트리거 설정

트리거에서 YouTube 동영상을 선택, 측정하고 싶은 이벤트를 선택, 재생 개시나, 완료, 몇% 재생했는지.

모든 YouTube 동영상에 JavaScript API 지원 추가 옵션
선택하면 일반 HTML, 사이트에서,
· iframe YouTube Player API로드
· YouTube Player API 권한 부여
을 자동으로 해준다.

GA 이벤트 전송용으로 알기 쉬운 라벨을 만들기 위한 설정

getVideoAction이라는 변수 만들기

function() { 
  var status = {{Video Status}}; 
  switch (status) { 
    case 'start': 
      return 'Play'; 
    case 'pause': 
      return 'Pause'; 
    case 'buffering': 
      return 'Buffering'; 
    case 'progress': 
      return '' + {{Video Percent}} + '% Watched'; 
    case 'complete': 
      return '100% Watched'; 
  } 
}

이제
・Play (재생 시작)
・10% Watched
・25% Watched
・50% Watched
・75% Watched
・90% Watched
・100% Watched (재생 종료)

같은 이벤트 라벨이 있습니다.

GA로 이벤트 전송

태그 설정에서 Google 웹로그 분석 스니펫 선택

이런 식으로 설정하면
· 카테고리 youtube
・액션 90% Watched(만든 「getVideoAction」에서 취득)
· 라벨 YouTube 동영상 타이틀 획득

GA에 YouTube의 측정 이벤트를 보낼 수 있다.

모달 윈도우, SPA 대응

YouTube 트리거는, 로드한 HTML안에 쓰여진 YouTube의 포함 태그에는, 계측용의 설정을 자동으로 실시해 준다.

모든 YouTube 동영상에 JavaScript API 지원 추가 옵션은
동적으로 만들어지는 모달 윈도우, SPA의 경우 자동 설정해주지 않는다.

조금, 궁리가 필요

YouTube Player API 권한 부여

js라든지 동적으로 iframe의 src를 다시 쓰고 src에 "enablejsapi = 1"매개 변수를 추가.

이제 YouTube Player API에서 iframe에 액세스할 수 있는 권한이 있습니다.

※ GTM의 '모든 YouTube 동영상에 JavaScript API 지원 추가' 옵션은 이 매개변수를 자동으로 부여해 준다.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/r2d2BqE-I6w" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture"
  allowfullscreen>
</iframe>

↓

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/r2d2BqE-I6w?enablejsapi=1" 
  frameborder="0" 
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture"
  allowfullscreen>
</iframe>

YouTube Player API js 로드

GTM의 '모든 페이지보기' 트리거에서 맞춤 HTML 스 니펫으로 YouTube Player API js (htps //w w. 요츠베. 코 m / f 라메 _ 아피)를로드하는 설정

※ GTM의 '모든 YouTube 동영상에 JavaScript API 지원 추가' 옵션은 이 js를 자동으로 로드해 준다.

iframe YouTube Player API를 한 번 로드하면,
동적으로 만들어진 모달이나 SPA 페이지에 붙여진 YouTube 삽입 동영상에서도
모든 동영상에서 GA로 이벤트를 보낼 수 있습니다.

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

완료

이것으로, 사이트의 소스를 건드리지 않고 GTM으로부터 Youtube의 계측 기능을 추가할 수 있었다.
※「enablejsapi=1」파라미터의 부여는 필요.