Блог

← Усі статті

Як відстежувати відео-залученість у GTM (YouTube, Vimeo, HTML5)

1 квітня 2026

TL;DR: GTM має вбудований тригер YouTube Video, який захоплює події start, progress, pause, seek та complete без коду. Для Vimeo та HTML5 <video> елементів використовуйте Custom HTML тег для завантаження відповідного API плеєра, прослуховування подій відтворення та push у dataLayer. Створіть GA4 Event теги для кожного джерела відео, зареєструйте кастомні виміри (video_title, video_percent) та аналізуйте залученість у GA4 Explore звітах.

Відео є скрізь — демо продуктів, туторіали, відгуки клієнтів, фонові ролики у hero-секціях. Але вбудувати відео — це лише половина справи. Без трекінгу залученості ви не знаєте, чи відвідувачі дійсно дивляться ваш контент, чи просто гортають повз нього.

Google Tag Manager підтримує відстеження YouTube-відео з коробки. Для Vimeo та нативних HTML5 плеєрів потрібно трохи більше налаштувань, але без змін у коді сайту. Цей гайд охоплює всі три варіанти — від конфігурації тригерів до звітів у GA4.

Чи відстежує GA4 YouTube-відео автоматично?

Enhanced Measurement у GA4 включає базовий трекінг для вбудованих YouTube-відео. Коли увімкнено, GA4 автоматично збирає події video_start, video_progress та video_complete. Однак є суттєві обмеження:

Для повноцінної аналітики відео потрібні тригери GTM з кастомними GA4-тегами. Це дає повний контроль над тим, які події спрацьовують, які параметри захоплюються та як дані відображаються у звітах.

Як налаштувати трекінг YouTube-відео у GTM?

GTM має спеціальний тип тригера YouTube Video. Кастомний код не потрібен.

  1. Перейдіть до Triggers → New → YouTube Video.
  2. Оберіть події для захоплення:
    • Start — спрацьовує, коли відео починає відтворення
    • Complete — спрацьовує, коли відео доходить до кінця
    • Pause — спрацьовує, коли користувач ставить на паузу
    • Seeking — спрацьовує, коли користувач перемотує таймлайн
    • Progress — спрацьовує на порогових відсотках (наприклад, 25, 50, 75)
  3. Для Progress встановіть відсотки: введіть 25, 50, 75, 100 у полі Percentages. Можна також використовувати часові пороги (наприклад, кожні 30 секунд) для довших відео.
  4. Поставте галочку "Add JavaScript API support." Це критично. GTM потребує YouTube IFrame API для комунікації з плеєром. Ця опція автоматично додає параметр enablejsapi=1.
  5. Встановіть тригер на All Videos або обмежте конкретними сторінками через умову Page Path.

Важливо: опція "Add JavaScript API support" працює тільки для iframe, які завантажуються після ініціалізації GTM. Якщо ваші YouTube-вбудовування завантажуються динамічно (lazy loading або SPA-навігація), переконайтесь, що параметр API включено безпосередньо в атрибут src iframe.

Які події YouTube-відео може захопити GTM?

Коли тригер YouTube Video спрацьовує, GTM автоматично заповнює кілька вбудованих змінних. Увімкніть їх у Variables → Configure → Videos:

ЗміннаОписПриклад значення
{{Video Title}}Назва YouTube-відеоProduct Demo 2026
{{Video URL}}YouTube URL відеоhttps://www.youtube.com/watch?v=abc123
{{Video Status}}Поточна дія тригераstart, pause, progress, complete
{{Video Percent}}Відсоток переглянутого відео25, 50, 75, 100
{{Video Duration}}Загальна тривалість відео в секундах185
{{Video Current Time}}Поточна позиція відтворення в секундах46
{{Video Visible}}Чи видно відео у viewporttrue / false
{{Video Provider}}Відео-платформаyoutube

Ці змінні є основою для параметрів вашого GA4 Event тегу. Вони дозволяють відповісти на питання: "Які відео люди дійсно дивляться до кінця?" та "В якому моменті глядачі припиняють перегляд?"

Як створити GA4-тег для подій YouTube-відео?

Коли тригер і змінні готові, створіть GA4 Event тег:

  1. Tag Type: Google Analytics: GA4 Event
  2. Measurement ID: Ваш G-XXXXXXXXXX
  3. Event Name: video_engagement (або використовуйте рекомендовані GA4 назви video_start / video_complete, якщо відстежуєте тільки ці дві дії)
  4. Event Parameters:
    • video_title → {{Video Title}}
    • video_status → {{Video Status}}
    • video_percent → {{Video Percent}}
    • video_duration → {{Video Duration}}
    • video_url → {{Video URL}}
    • video_provider → youtube
    • page_location → {{Page URL}}
  5. Triggering: Ваш YouTube Video тригер

Чому одна назва події з параметром статусу? Використання єдиної події video_engagement з параметром video_status (start, pause, progress, complete) економить ліміт у 500 назв подій. Ви все одно можете фільтрувати за статусом у GA4 Explore звітах. Як альтернатива — якщо вам потрібні тільки start і complete, використовуйте рекомендовані назви подій GA4 для інтеграції з вбудованими звітами.

Як відстежувати Vimeo-відео у GTM?

Vimeo не має вбудованого тригера у GTM. Потрібен Custom HTML тег, який завантажує Vimeo Player SDK і пушить події в dataLayer.

  1. Створіть Custom HTML тег у GTM з цим скриптом:
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
(function() {
  var iframes = document.querySelectorAll('iframe[src*="vimeo.com"]');
  var milestones = [25, 50, 75, 100];

  iframes.forEach(function(iframe) {
    var player = new Vimeo.Player(iframe);
    var title = '';
    var duration = 0;
    var reached = {};

    player.getVideoTitle().then(function(t) { title = t; });
    player.getDuration().then(function(d) { duration = d; });

    player.on('play', function() {
      window.dataLayer.push({
        event: 'vimeo_video',
        video_status: 'start',
        video_title: title,
        video_provider: 'vimeo'
      });
    });

    player.on('pause', function() {
      window.dataLayer.push({
        event: 'vimeo_video',
        video_status: 'pause',
        video_title: title,
        video_provider: 'vimeo'
      });
    });

    player.on('ended', function() {
      window.dataLayer.push({
        event: 'vimeo_video',
        video_status: 'complete',
        video_title: title,
        video_percent: 100,
        video_provider: 'vimeo'
      });
    });

    player.on('timeupdate', function(data) {
      var pct = Math.floor((data.seconds / duration) * 100);
      milestones.forEach(function(m) {
        if (pct >= m && !reached[m]) {
          reached[m] = true;
          window.dataLayer.push({
            event: 'vimeo_video',
            video_status: 'progress',
            video_title: title,
            video_percent: m,
            video_duration: Math.round(duration),
            video_provider: 'vimeo'
          });
        }
      });
    });
  });
})();
</script>
  1. Запускайте цей тег на All Pages (або тільки на сторінках з Vimeo через умову Page Path).
  2. Створіть Custom Event тригер з Event Name рівним vimeo_video.
  3. Створіть GA4 Event тег ідентичний до структури YouTube-тегу, але з тригером Custom Event vimeo_video. Використовуйте Data Layer Variables для захоплення video_title, video_status, video_percent та video_provider.

Примітка: Vimeo-вбудовування повинні включати параметр ?api=1 в src iframe для комунікації з Player SDK. Більшість сучасних вбудовувань Vimeo включають це за замовчуванням.

Як відстежувати HTML5 відео-елементи у GTM?

Для нативних <video> елементів (self-hosted MP4, WebM файли або кастомні плеєри) використовуйте вбудований Media Events API браузера через Custom HTML тег.

<script>
(function() {
  var videos = document.querySelectorAll('video');
  var milestones = [25, 50, 75, 100];

  videos.forEach(function(video) {
    var reached = {};
    var title = video.getAttribute('title')
      || video.getAttribute('data-title')
      || video.currentSrc.split('/').pop();

    video.addEventListener('play', function() {
      window.dataLayer.push({
        event: 'html5_video',
        video_status: 'start',
        video_title: title,
        video_provider: 'html5'
      });
    });

    video.addEventListener('pause', function() {
      if (!video.ended) {
        window.dataLayer.push({
          event: 'html5_video',
          video_status: 'pause',
          video_title: title,
          video_provider: 'html5'
        });
      }
    });

    video.addEventListener('ended', function() {
      window.dataLayer.push({
        event: 'html5_video',
        video_status: 'complete',
        video_title: title,
        video_percent: 100,
        video_provider: 'html5'
      });
    });

    video.addEventListener('timeupdate', function() {
      if (video.duration) {
        var pct = Math.floor((video.currentTime / video.duration) * 100);
        milestones.forEach(function(m) {
          if (pct >= m && !reached[m]) {
            reached[m] = true;
            window.dataLayer.push({
              event: 'html5_video',
              video_status: 'progress',
              video_title: title,
              video_percent: m,
              video_duration: Math.round(video.duration),
              video_provider: 'html5'
            });
          }
        });
      }
    });
  });
})();
</script>

Потім створіть Custom Event тригер (html5_video) та GA4 Event тег, як для Vimeo. Структура dataLayer навмисно однакова для всіх трьох джерел відео, тому ви можете навіть використовувати один GA4 Event тег, що спрацьовує на всі три назви подій, якщо хочете єдиний звіт.

Як відстежувати milestones залученості (25%, 50%, 75%, 100%)?

Milestone-трекінг відповідає на найважливіше питання про відео: де глядачі припиняють перегляд?

Для YouTube milestone-трекінг вбудований у тригер. Встановіть Progress percentages на 25, 50, 75, 100 — і тригер автоматично спрацьовує на кожному порозі.

Для Vimeo та HTML5 логіка milestones знаходиться всередині timeupdate listener (показано у прикладах коду вище). Ключовий патерн:

  1. Відстежуйте досягнуті milestones через об'єкт (reached = {}) для кожного відео. Це запобігає дублюванню подій при перемотуванні.
  2. Обчислюйте поточний відсоток з currentTime / duration * 100.
  3. Пушіть dataLayer-подію тільки при перетині нового milestone. Коли reached[25] встановлено в true, подія 25% більше ніколи не спрацює для цього відео.

Вибір milestones. Стандартні 25/50/75/100 підходять для більшості випадків. Для довгого контенту (30+ хвилин) розгляньте інтервали по 10% або часові milestones (кожні 60 секунд). Для коротких відео до 30 секунд достатньо 50% і 100% — чотири події для 15-секундного кліпу створюють шум без цінних інсайтів.

Як аналізувати дані відео у GA4?

Коли події відео надходять до GA4, спочатку зареєструйте кастомні виміри:

  1. Перейдіть до Admin → Custom definitions → Create custom dimension
  2. Зареєструйте: video_title, video_status, video_percent, video_provider, video_duration
  3. Встановіть scope на "Event" для всіх

Потім створюйте Explore звіти для відповідей на ключові питання:

Які відео отримують найбільше залученості? Створіть Free-form звіт з video_title як виміром та Event count як метрикою. Фільтруйте за video_status = complete, щоб побачити відсоток завершення. Додайте Total users для порівняння залученості між різними аудиторіями.

Де глядачі припиняють перегляд? Використовуйте video_title та video_percent як виміри. Для кожного відео порівняйте кількість подій на 25%, 50%, 75% та 100%. Різке падіння між 25% і 50% сигналізує, що перша чверть відео привертає увагу, але середина втрачає глядачів.

Чи корелює залученість відео з конверсіями? Створіть сегмент користувачів, які досягли video_percent = 75 або вище, і порівняйте їхній коефіцієнт конверсії з тими, хто ніколи не тригерив відео-подію. Це обгрунтовує інвестиції у відео-контент конкретними цифрами.

Які найчастіші помилки у трекінгу відео?

Чи є швидший спосіб налаштувати трекінг відео?

Ручне налаштування включає створення Custom HTML тегів, Data Layer Variables, Custom Event тригерів та GA4 Event тегів — для кожної відео-платформи окремо. GTM Event Helper спрощує це:

  1. Клікніть на відео-елемент на вашій сторінці
  2. Розширення автоматично визначає тип відео (YouTube, Vimeo або HTML5)
  3. AI Agent пропонує відповідне налаштування трекінгу з правильними назвами подій та параметрами
  4. Натисніть "Create in GTM" для генерації всіх необхідних тегів, тригерів та змінних через GTM API

Жодних Custom HTML скриптів для вставки. Жодної конфігурації Data Layer Variables. Жодного перемикання між сайтом, GTM та документацією GA4 для правильних назв параметрів.

Відстежуйте відео-залученість YouTube, Vimeo та HTML5 — без кастомного коду.

Встановити GTM Event Helper

Зовнішні ресурси

Пов'язані статті

← Усі статті · Головна · Політика конфіденційності · Контакти