블로그스팟 동영상 이벤트 추적: 유튜브 API 설정부터 HTML5 리스너까지

GA4 실시간 개요 video_progress 이벤트 예시

추적 시리즈 7번째, 이번엔 블로그스팟 글 안에 첨부한 유튜브 영상이나 HTML5 영상을 어디까지 봤는지 구글 태그 매니저(GTM)와 구글 애널리틱스(GA4)를 활용해 추적해보자.


유튜브 및 일반 동영상(HTML5) 추적하기

1. 유튜브 동영상 추적 (GTM 기본 기능 활용)

유튜브는 GTM에서 기본 트리거를 제공하므로 별도의 코딩 없이 설정만으로 끝낼 수 있다.

Step 1: 변수 활성화

먼저 GTM이 유튜브 플레이어로부터 날아오는 '신호'를 해석할 수 있게 '변수'를 켜줘야 한다.

  • [변수] > [구성] 클릭
  • '동영상' 섹션의 모든 항목을 체크 (Video Provider, Video Status, Video URL, Video Title, Video Duration, Video Current Time, Video Percent, Video Visible 등)


Step 2: 트리거 설정

영상이 재생되거나 특정 지점에 도달했을 때 태그가 작동하도록 '조건'을 만든다.

  • [트리거] > [새로 만들기] > 트리거 유형: [YouTube 동영상] 선택
  • 캡처 항목: 시작, 완료, 일시중지, 검색, 버퍼링, 진행률 체크
  • 진행률: 퍼센트 선택 후, 10, 25, 50, 75, 90 입력
  • 고급: [자바스크립트 API 지원을 모든 YouTube 동영상에 추가합니다.] 반드시 체크
  • 트리거 이름: YouTube Video - All

GTM 트리거 YouTube Video - All
(사진 1) GTM 트리거 YouTube Video - All


Step 3: GA4 이벤트 태그 연결

트리거가 발생했을 때 수집된 데이터를 GA4로 보낸다.

  1. [태그] > [새로 만들기] > [Google 애널리틱스: GA4 이벤트]
  2. 측정 ID 입력: G-xxxxxxxxxx (본인의 GA4 측정 ID 입력)
  3. 이벤트 이름: video_progress
  4. 이벤트 매개변수:

  • 매개변수 이름: video_duration / 값: {{Video Duration}}
  • 매개변수 이름: video_current_time / 값: {{Video Current Time}}
  • 매개변수 이름: video_title / 값: {{Video Title}}
  • 매개변수 이름: video_percent / 값: {{Video Percent}}

  1. 태그 이름: GA4 Event - YouTube Video
  2. 위에서 만든 트리거 YouTube Video - All 연결 후 저장.

    GTM 태그 GA4 Event - YouTube Video
    (사진 2) GTM 태그 GA4 Event - YouTube Video


    2. 일반 동영상(HTML5) 추적 (커스텀 스크립트 활용)

    유튜브가 아닌 블로그스팟에 직접 업로드하거나 외부 링크로 삽입한 <video> 태그는 GTM이 자동으로 인식하지 못한다. 따라서 '맞춤 HTML' 태그로 동영상의 상태를 감시하는 스크립트를 먼저 심어줘야 한다.

    Step 1: 데이터 영역 변수 생성

    스크립트가 보낼 '비디오 상태'와 '비디오 이름'을 GTM이 받아낼 그릇을 만든다.

    • [변수] > [새로 만들기] > 변수 유형: [데이터 영역 변수]
    • 데이터 영역 변수 이름: video_action (변수 이름도 동일하게 설정)
    • 데이터 영역 변수 이름: video_name
    • 데이터 영역 변수 이름: video_id


    Step 2: 비디오 리스너 스크립트 삽입 (맞춤 HTML)

    페이지에 있는 동영상 태그를 실시간으로 감시하여 재생/완료 시 신호를 보내는 장치를 만든다.

    • [태그] > [새로 만들기] > 태그 유형: [맞춤 HTML]
    • 스크립트 내용: 아래 자바스크립트를 복사해서 붙여넣는다.
    ※ 유튜브와 달리 HTML5는 시작과 끝만 측정함.

    JavaScript 
    
<script>
  (function() {
    // 1. 페이지 내의 모든 비디오 요소를 선택합니다.
    var videos = document.querySelectorAll('video');

    // 2. 각 비디오 요소에 대해 반복문을 돌며 리스너를 추가합니다.
    videos.forEach(function(video) {
      
      // 재생 시작 시 신호 전송
      video.addEventListener('play', function() {
        window.dataLayer.push({
          'event': 'html5_video',
          'video_action': 'play',
          'video_name': video.currentSrc || video.src || 'Unknown Video',
          'video_id': video.id || 'No ID' // 영상 구분을 위해 ID값도 추가하면 좋습니다.
        });
      });

      // 시청 완료 시 신호 전송
      video.addEventListener('ended', function() {
        window.dataLayer.push({
          'event': 'html5_video',
          'video_action': 'complete',
          'video_name': video.currentSrc || video.src || 'Unknown Video',
          'video_id': video.id || 'No ID'
        });
      });
    });
  })();
</script>

    • 트리거: [All Pages]
    • 태그 이름: Custom - HTML5 Video Listener

    GTM 태그 Custom - HTML5 Video Listener
    (사진 3) GTM 태그 Custom - HTML5 Video Listener


    Step 3: 맞춤 이벤트 트리거 생성

    스크립트가 던진 html5_video라는 이름의 신호를 낚아챌 트리거를 만든다.

    • [트리거] > [새로 만들기] > 트리거 유형: [맞춤 이벤트]
    • 이벤트 이름: html5_video
    • 트리거 이름: Custom Event - HTML5 Video

    GTM 트리거 Custom Event - HTML5 Video
    (사진 4) GTM 트리거 Custom Event - HTML5 Video


    Step 4: GA4 태그 연결

    최종적으로 수집된 일반 동영상 데이터를 GA4로 전송한다.

    1. [태그] > [새로 만들기] > [Google 애널리틱스: GA4 이벤트]
    2. 측정 ID: 본인의 GA4 ID 입력 (G-xxxxxxxxxx)
    3. 이벤트 이름: video_engagement_html5
    4. 이벤트 매개변수:

    • 매개변수 이름: video_action / 값: {{video_action}}
    • 매개변수 이름: video_title / 값: {{video_name}}
    • 매개변수 이름: video_id / 값: {{video_id}}

    1. 트리거: 위에서 만든 Custom Event - HTML5 Video 연결
    2. 태그 이름: GA4 Event - HTML5 Video

    GTM 태그 GA4 Event - HTML5 Video
    (사진 5) GTM 태그 GA4 Event - HTML5 Video


    GA4 맞춤 측정기준 등록하기

    GTM에서 설정한 매개변수들을 GA4의 '차원'으로 만들어주는 과정이다.

    1. 설정 메뉴 접속

    • GA4 왼쪽 하단 메뉴에서 [관리](톱니바퀴)를 클릭한다.
    • 데이터 표시 항목에 있는 [맞춤 정의]를 선택한다.


    2. 맞춤 측정기준 만들기 (3개)

    오른쪽 상단의 [맞춤 측정기준 만들기] 버튼을 누르고, 아래와 같이 입력:

    • 맞춤 측정기준 이름: 비디오 액션 / 비디오 제목 / 비디오 ID
    • 범위: 이벤트
    • 설명: 영상의 상태 (play, complete 등) / 재생된 영상의 파일명 또는 URL / 영상 태그에 설정된 ID
    • 이벤트 매개변수: video_action / video_name / video_id

    GA4 새 맞춤 측정기준 video_action
    (사진 6) GA4 새 맞춤 측정기준 video_action

    GA4 새 맞춤 측정기준 video_name
    (사진 7) GA4 새 맞춤 측정기준 video_name

    GA4 새 맞춤 측정기준 video_id
    (사진 8) GA4 새 맞춤 측정기준 video_id


    오늘의 한마디

    구글 애널리틱스에 이렇게 video_progress가 보인다면 성공!

    GA4 실시간 개요 video_progress 이벤트
    (사진 9) GA4 실시간 개요 video_progress 이벤트 예시

    2026.05.06. 내용 추가:

    '2. 일반 동영상(HTML5) 추적'이 블로그스팟에선 적용이 안된다.

    블로그스팟 자체 업로드 영상은 추적이 어렵지만, 유튜브 임베드 방식을 쓰면 1번 섹션의 가이드대로 100% 추적 가능하다.

    만약 티스토리나 워드프레스를 사용 중이라면, 2번 섹션에서 소개한 커스텀 스크립트가 마법처럼 작동한다. 표준 HTML5 <video> 태그를 사용하기 때문.


    Related Posts

    댓글

    댓글 쓰기