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

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

13/12/2023

315

0

Chia sẻ lên Facebook
Các bước track HTML5 Video với Google Tag Manager và GA4 mới nhất 2024

Trong bài viết này, bạn sẽ biết được cách track HTML5 video với Google Tag Manager và GA4. Bạn sẽ học được cách cài đặt GTM, tạo các biến, kích hoạt và thẻ để gửi dữ liệu video đến GA4 một cách nhanh chóng.

 

Nếu bạn có bất cứ thắc mắc nào hoặc cần sự hỗ trợ từ các chuyên gia tracking, hãy đặt lịch hẹn tư vấn 1:1 cùng họ trên ứng dụng Askany. Bạn sẽ được kết nối với những người có nhiều năm kinh nghiệm và kiến thức sâu rộng về tracking video và các lĩnh vực khác. Hãy tận dụng cơ hội này để nâng cao năng lực và thành công cho chiến dịch Digital Marketing của bạn.

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.

Track HTML5 Video với Google Tag Manager và GA4

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

Track HTML5 Video với Google Tag Manager và GA4

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.

Track HTML5 Video với Google Tag Manager và GA4

>>> 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.

Track HTML5 Video với Google Tag Manager và GA4

Đầ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.

Track HTML5 Video với Google Tag Manager và GA4

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:

Track HTML5 Video với Google Tag Manager và GA4

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).

Track HTML5 Video với Google Tag Manager và GA4

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:

Track HTML5 Video với Google Tag Manager và GA4

 

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 AnalyticsGoogle Analytics: GA4 event và nhập các cài đặt sau

Track HTML5 Video với Google Tag Manager và GA4

  • 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.

Track HTML5 Video với Google Tag Manager và GA4

Kiểm tra thiết lập

Bấm vào nút Preview trong giao diện GTM để làm mới. Sau đó truy cập trang web của bạn và tương tác với HTML5 video player (phát, xem một chút, v.v.). Sau đó quay lại chế độ xem trước GTM và bạn sẽ thấy điều này:

Track HTML5 Video với Google Tag Manager và GA4

Nhấp vào bất kỳ sự kiện nào trong số đó và kiểm tra xem thẻ GA4 của bạn đã kích hoạt chưa. Bây giờ hãy nhấp vào một sự kiện khác và thực hiện tương tự. Đã kích hoạt thẻ? Đây là dấu hiệu tốt.

Track HTML5 Video với Google Tag Manager và GA4

Bây giờ hãy truy cập Google Analytics > Admin > DebugView và tìm thiết bị của bạn:

Sau khi thực hiện việc đó, bạn sẽ thấy luồng sự kiện và một số sự kiện video (ví dụ: video_play). Nhấp vào chúng và kiểm tra giá trị của các tham số của chúng.

Track HTML5 Video với Google Tag Manager và GA4

Nếu mọi thứ hoạt động như mong đợi thì đã đến lúc xuất bản vùng chứa. Nhấn SUBMIT ở góc trên bên phải và làm theo tất cả các bước cần thiết. Sau đó, những thay đổi của bạn sẽ hiển thị trực tiếp với tất cả khách truy cập trang web của bạn.

Đăng ký custom dimensions

Tôi không biết điều này có thay đổi trong tương lai không, nhưng hiện tại, nếu bạn muốn sử dụng/xem tham số video_percent trong báo cáo GA4 thông thường của mình, bạn phải đăng ký các tham số này như là một chiều tùy chỉnh.

Trong GA4, điều hướng đến Admin > Custom Definitions và nhấp vào Create Custom Dimension.

 

Track HTML5 Video với Google Tag Manager và GA4

Sau đó, nhập các cài đặt sau để sử dụng/xem thông số video_percent.

Track HTML5 Video với Google Tag Manager và GA4

Video title hoặc Video provider đã sẵn có trong GA4 mặc định. Vì vậy, không cần phải đăng ký chúng như là các custom dimensions.

XEM THÊM CÁC BÀI VIẾT LIÊN QUAN VỀ TRACKING KHÁC:

 

Thông qua việc Track HTML5 Video với Google Tag Manager và GA4, bạn sẽ đo lường được lượt xem, tỷ lệ phát lại, thời lượng xem và các chỉ số khác của video. Video là một công cụ mạnh mẽ để tăng trưởng doanh nghiệp của bạn. Nhưng để có thể tận dụng tối đa video, bạn cần có một hệ thống tracking chuyên nghiệp và chính xác. Để được tư vấn và giải quyết bất cứ vấn đề khó nhằn nào trong tracking, hãy liên hệ với đội ngũ chuyên gia của Askany để được hỗ trợ ngay hôm nay.

Tôi là Tô Lãm với hơn 4 năm kinh nghiệm trong lĩnh vực IT, Business Analyst, Data Analyst, Tracking,... cho rất nhiều doanh nghiệp SME. Tôi tốt nghiệp trường Công nghệ Thông tin cùng với kỹ năng và kiến thức trau dồi của mình, tôi mong muốn được chia sẻ các thông tin hữu ích dến với người đọc thông qua các bài viết trên Topchuyengia, mọi người hãy follow mình nhé.

Kinh nghiệm thực tế

Tư vấn 1:1

Uy tín

Đây là 3 tiêu chí mà TOPCHUYENGIA luôn muốn hướng tới để đem lại những thông tin hữu ích cho cộng đồng