Các bước track HTML5 Video với Google Tag Manager và GA4 mới nhất 2024

Tóm tắt cách track HTML5 Video với Google Tag Manager và GA4

Trong bài viết này, Topchuyengia sẽ đã giải thích cho bạn cách Track HTML5 Video với Google Tag Manager và GA4 (đối với những video không phải là video trên YouTube). Nguyên tắc chung như sau:

Bạn tìm một bộ lắng nghe sự kiện tự động tùy chỉnh (custom auto-event listener) được xây dựng đặc biệt cho trình phát video đó (nếu bạn không tìm thấy nó, thì có khả năng lớn là bạn sẽ không thể theo dõi được video player)

• Bạn tạo một Biến JavaScript Tùy chỉnh trả về giá trị “true” nếu trình phát có trên trang
• Bạn kích hoạt một bộ lắng nghe (Custom HTML tag) chỉ khi trình phát có trên trang
• Sau đó, bạn tạo Data Layer Variables, Custom Event trigger
• Cuối cùng, bạn tạo một thẻ sự kiện GA4 kích hoạt trên custom event trigger và gửi giá trị của các biến Data Layer

Đồng thời, đừng quên thử nghiệm công thức GTM và triển khai tracking dạng này một cách nhanh chóng.

Chi tiết cách track HTML5 Video với Google Tag Manager và GA4

Công thức GTM

Nếu bạn đang vội, hãy xem qua GTM container template tại đây, bạn có thể nhập và định cấu hình trong vùng chứa của mình. Nó sẽ bắt đầu theo dõi trình phát video HTML5 được nhúng + gửi dữ liệu tới GA4.

Biến JavaScript tùy chỉnh + Trình nghe Auto-event

Phần quan trọng nhất của cài đặt này là một đoạn mã tùy chỉnh được thiết kế để liên tục tìm kiếm tương tác video HTML5. Ban đầu, giải pháp này được tạo ra bởi David Vallejo, nhưng tôi đã thêm một số sửa đổi để theo dõi thuận tiện hơn với Google Analytics 4. Nhưng trước khi chúng ta tạo thẻ này, chúng ta cần tạo một Biến JavaScript Tùy chỉnh.

Bộ lắng nghe mà chúng ta sẽ sử dụng bao gồm hơn 100 dòng mã, và nếu bạn đang làm việc với GTM, bạn nên luôn cố gắng tối ưu hóa cài đặt để ảnh hưởng đến tải trang/hiệu suất trang càng ít càng tốt.

Thay vì kích hoạt bộ lắng nghe trên mỗi trang, chúng ta sẽ kích hoạt nó chỉ trên những trang nơi trình phát HTML5 thực sự xuất hiện. Điều đó có thể được thực hiện bằng Biến JavaScript Tùy chỉnh.

Trong Google Tag Manager, vào Biến > Mới > JavaScript Tùy chỉnh và dán mã sau đây:

  
    function() {
  var video = document.getElementsByTagName('video').length;
  if (video & amp; gt; 0) {
    return true;
  } else {
    return false;
  }
}
  

Đặt tên biến này: cjs – is HTML5 Video on a page.

Sau đó, đi tới  Triggers > New > Window Loaded và nhập các cài đặt sau:

Trigger này sẽ được kích hoạt khi trang tải hoàn toàn và trình phát video HTML5 có trên trang. Làm thế nào chúng ta biết được nếu trình phát có trên trang? Custom JavaScript variable đó sẽ trả về giá trị true nếu trình phát có trên trang

Bây giờ, là lúc để tạo một Custom HTML tag sẽ chứa code của bộ lắng nghe. Chỉ để nhắc lại, thẻ này sẽ tìm kiếm tương tác video HTML5, và nếu nó phát hiện ra, chúng ta sẽ có thể thấy nó trong chế độ xem trước GTM, từ đó kích hoạt thẻ sự kiện GA4.

Trong GTM, điều hướng đến Tags > New > Custom HTML Tùy chỉnh và dán mã sau đây:

  
<script>
  // Let's wrap everything inside a function so variables are not defined as globals 
  (function() {
    // This is gonna our percent buckets ( 25%-75% ) 
    var divisor = 25;
    // We're going to save our players status on this object. 
    var videos_status = {};
    // This is the funcion that is gonna handle the event sent by the player listeners 
    function eventHandler(e) {
      switch (e.type) {
        // This event type is sent everytime the player updated it's current time, 
        // We're using for the % of the video played. 
      case 'timeupdate':
        // Let's set the save the current player's video time in our status object 
        videos_status[e.target.id].current = Math.round(e.target.currentTime);
        // We just want to send the percent events once 
        var pct = Math.floor(100 * videos_status[e.target.id].current / e.target.duration);
        for (var j in videos_status[e.target.id]._progress_markers) {
          if (pct >= j && j > videos_status[e.target.id].greatest_marker) {
            videos_status[e.target.id].greatest_marker = j;
          }
        }
        // current bucket hasn't been already sent to GA?, let's push it to GTM
        if (videos_status[e.target.id].greatest_marker && !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) {
          videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true;
          dataLayer.push({
            'event': 'video',
            'video_status': 'progress',
            'video_provider': 'generic html5 video player',
            'video_percent': videos_status[e.target.id].greatest_marker,
            // We are sanitizing the current video src string, and getting just the video name part
            'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
          });
        }
        break;
        // This event is fired when user's click on the play button
      case 'play':
        dataLayer.push({
          'event':
          'video',
          'video_status': 'play',
          'video_provider': 'generic html5 video player',
          'video_percent': videos_status[e.target.id].greatest_marker,
          'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
        });
        break;
        // This event is fied when user's click on the pause button
      case 'pause':
        if (videos_status[e.target.id].greatest_marker < '75') {
          dataLayer.push({
            'event': 'video',
            'video_status': 'pause',
            'video_provider': 'generic html5 video player',
            'video_percent': videos_status[e.target.id].greatest_marker,
            'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
          });
        }
        break;
        // If the user ends playing the video, an Finish video will be pushed ( This equals to % played = 100 )  
      case 'ended':
        dataLayer.push({
          'event':
          'video',
          'video_status': 'complete',
          'video_provider': 'generic html5 video player',
          'video_percent': '100',
          'video_title': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
        });
        break;
      default:
        break;
      }
    }
    // We need to configure the listeners
    // Let's grab all the the "video" objects on the current page     
    var videos = document.getElementsByTagName('video');
    for (var i = 0; i < videos.length; i++) {
      // In order to have some id to reference in our status object, we are adding an id to the video objects
      // that don't have an id attribute. 
      var videoTagId;
      if (!videos[i].getAttribute('id')) {
        // Generate a random alphanumeric string to use is as the id
        videoTagId = 'html5_video_' + Math.random().toString(36).slice(2);
        videos[i].setAttribute('id', videoTagId);
      } // Current video has alredy a id attribute, then let's use it <img draggable="false" class="emoji" alt="?" src="https://s.w.org/images/core/emoji/2/svg/1f642.svg">
      else {
        videoTagId = videos[i].getAttribute('id');
      }
      // Video Status Object declaration  
      videos_status[videoTagId] = {};
      videos_status[videoTagId].greatest_marker = 0;
      // Let's set the progress markers, so we can know afterwards which ones have been already sent.
      videos_status[videoTagId]._progress_markers = {};
      for (j = 0; j < 100; j++) {
        videos_status[videoTagId].progress_point = divisor * Math.floor(j / divisor);
        videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false;
      }
      // On page DOM, all players currentTime is 0 
      videos_status[videoTagId].current = 0;
      // Now we're setting the event listeners. 
      videos[i].addEventListener("play", eventHandler, false);
      videos[i].addEventListener("pause", eventHandler, false);
      videos[i].addEventListener("ended", eventHandler, false);
      videos[i].addEventListener("timeupdate", eventHandler, false);
      videos[i].addEventListener("ended", eventHandler, false);
    }
  })();
</script>
  

Thêm trình kích hoạt Window Loaded đã tạo trước đó vào thẻ này.

>>> Tham khảo: Khóa học tracking từ A - Z dành cho người mới

Kiểm tra listener

Lưu tất cả thay đổi trong container GTM của bạn rồi nhấp vào nút Preview ở góc trên bên phải của giao diện GTM và bật chế độ Preview Mode.

Đầu tiên, trong chế độ xem trước, bạn nên thấy rằng thẻ Custom HTML của mình đã được kích hoạt khi trang được tải.

Bây giờ hãy truy cập trang web của bạn và tương tác với trình phát video HTML5. Chạy nó, xem một chút (ít nhất 25% chiều dài video), và tạm dừng. Quay lại chế độ xem trước của GTM. Bạn nên thấy một loạt các sự kiện video ở đó.

Nhấp vào một trong số chúng và mở rộng dữ liệu của dataLayer.push. Bạn sẽ thấy một số thông tin về tương tác.

Nếu bạn thấy tất cả những điều này giống như tôi, chúng ta có thể tiếp tục.

Data Layer Variables, Custom Event Trigger

Mặc dù chúng ta có dữ liệu video trong Data Layer, nhưng chúng ta không thể sử dụng nó cho đến khi chúng ta tạo các biến cho mỗi điểm dữ liệu mà chúng ta dự định sử dụng. Trong trường hợp của chúng ta, chúng ta sẽ sử dụng các điểm dữ liệu sau:

• video_status
• video_provider
• video_percent
• video_title

Chúng ta cần tạo một Biến Data Layer riêng lẻ cho mỗi điểm dữ liệu. Hãy điều hướng đến Variables > New > Data Layer Variable và nhập các cài đặt sau:

Làm tương tự cho các điểm dữ liệu còn lại mà bạn muốn sử dụng (video_provider, video_percent, video_title).

Sau đó, chúng ta cần tạo một trigger. Mỗi khi một sự kiện "video" được đẩy vào Data Layer (và chúng ta thấy nó trong chế độ xem trước), chúng ta muốn kích hoạt một thẻ GA4 (mà chúng ta sẽ tạo sau đó). Thẻ đó sẽ gửi dữ liệu video đến Google Analytics. Cách duy nhất để kích hoạt một thẻ là bằng cách sử dụng một trigger.

Vì chúng ta đang nhận được một sự kiện "video" với tên tùy chỉnh trong chế độ xem trước, chúng ta phải sử dụng một trigger Custom Event trong GTM. Điều hướng đến Triggers > New > Custom Event và nhập từ "video" (không có dấu ngoặc kép, tất cả viết thường).

Bạn phải nhập từ “video” một cách chính xác giống như cách bạn thấy ở đây:

GA4 event tag

Trong bài hướng dẫn này, tôi giả định rằng bạn đã cài đặt Google Analytics 4 thông qua Google Tag Manager.

Bây giờ, đến lúc gửi dữ liệu video HTML5 đến Google Analytics 4 dưới dạng sự kiện. Trong GTM, điều hướng đến Tags > New > Google Analytics > Google Analytics: GA4 event và nhập các cài đặt sau

• Tôi đã nhập ID đo lường như một biến hằng số (constant variable) vì tôi tin rằng đó là một thực hành tốt hơn so với việc sao chép-dán ID từ thẻ này sang thẻ khác.
• Tên sự kiện là video_, sau đó tôi chèn biến Data Layer trả về video_status. Kết quả cuối cùng của tên sự kiện sẽ là video_play, video_pause, video_progress hoặc video_complete. Tôi chỉ đang cố gắng tuân thủ quy tắc đặt tên của Google.
• Sau đó, tôi chèn các biến Data Layer khác sẽ được gửi như các tham số sự kiện: video_provider, video_percent và video_title).
• Cuối cùng, tôi đã liên kết trình kích hoạt Custom Event với thẻ GA4 này.