Track Vimeo Player với Google Tag Manager và GA4: hướng dẫn chi tiết

Track Vimeo Player với Google Tag Manager và GA4: hướng dẫn chi tiết

07/05/2024

343

0

Chia sẻ lên Facebook
Track Vimeo Player với Google Tag Manager và GA4: hướng dẫn chi tiết

Track Vimeo Player với Google Tag Manager và GA4 được tiến hành như thế nào? Khi thực hiện theo hướng dẫn dưới đây của chúng tôi, bạn có thể thu thập và phân tích các dữ liệu quan trọng như tỷ lệ xem, thời lượng xem, tỷ lệ thoát, và nhiều hơn nữa. Điều này sẽ giúp bạn hiểu được hiệu quả của video trong chiến dịch marketing của mình, và tối ưu hóa nội dung video để thu hút và giữ chân khách hàng. Hãy cùng tìm hiểu nhé.

 

Nếu có bất cứ thắc mắc nào về Track Vimeo Player với Google Tag Manager và GA4 mà bài viết này chưa thể giải đáp hết cho bạn, hãy để lại câu hỏi bên dưới cho các chuyên gia tracking của Askany. Chuyên gia của chúng tôi có thể giải đáp thắc mắc, update kiến thức, hướng dẫn bạn sử dụng các công cụ tiên tiến nhất để tracking video của bạn một cách hiệu quả. Đặt lịch hẹn và tư vấn 1:1 cùng Askany ngay hôm nay.

 

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

Bởi vì Vimeo player tracking không được hỗ trợ tự động bởi Google Tag Manager, chúng tôi sẽ hướng dẫn cho bạn giải pháp tùy chỉnh bao gồm JavaScript code trong một thẻ HTML Tùy chỉnh (Custom HTML tag). Dưới đây là tóm tắt toàn bộ quá trình:

 

Chúng tôi đã tạo một biến JavaScript Tùy chỉnh trả về giá trị true nếu trình phát Vimeo được nhúng trên một trang.

 

Sau đó, chúng tôi đã tạo một Window Loaded Trigger kiểm tra xem trình phát video Vimeo có được nhúng trong trang web không (nhờ vào biến JavaScript Tùy chỉnh).

 

Tiếp theo, chúng tôi đã tạo một thẻ HTML Tùy chỉnh (Vimeo Auto-Event Listener). Nó sẽ kích hoạt trên tất cả các trang mà trình phát Vimeo được nhúng. Quan trọng: ngay cả nếu bạn chưa tương tác với trình phát, thẻ đó vẫn sẽ kích hoạt.

 

Mỗi khi có một tương tác với trình phát Vimeo, listener sẽ phát đi một sự kiện Data Layer với các dữ liệu sau:

  • Tên Sự kiện: video (giá trị này không bao giờ thay đổi)
  • video_action (play, pause, hoặc progress)
  • video_url
  • video_percent
  • video_title

Tiếp theo, chúng tôi đã tạo 4 Biến Data Layer và một Trigger Sự kiện Tùy chỉnh (cho sự kiện video).

 

Cuối cùng, chúng tôi đã tạo một thẻ sự kiện GA4 kích hoạt trên sự kiện video và sẽ gửi các giá trị của 4 Biến Data Layer đó đến Google Analytics.

 

Cần trợ giúp thêm về cách theo dõi trình phát Vimeo với Google Tag Manager và GA4? Liên hệ với các chuyên gia tracking của Askany ngay hôm nay để được tư vấn

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

Chuyên gia Nguyễn Đình Nghĩa

  • Profile chuyên gia: https://askany.com/performance-marketing/nghia
  • Thời gian tư vấn: Thứ 2 - Thứ 6 (13:00 - 17:00)
  • Giá tư vấn: 250.000 VND / 15 phút (Gọi điện)

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

Tạo một biến “Có trình phát Vimeo” trên trang

Để theo dõi trình phát Vimeo bằng GTM trên một trang, chúng ta sẽ cần thêm một đoạn code dài vào container. Việc tải code đó trên mọi trang không phải là lựa chọn tối ưu và sẽ ảnh hưởng đến tốc độ tải trang, vì vậy chúng ta nên kích hoạt code đó CHỈ khi trình phát Vimeo thực sự được nhúng vào site đó.

 

Để thực hiện điều đó, trước tiên, chúng ta cần tạo một biến JavaScript Tùy chỉnh (bạn có thể làm theo các bước sau Variables > New > Custom Javascript) và dán đoạn mã sau đây:

  
    function() {
      for (var e = document.getElementsByTagName("iframe"), x = 0; x & amp; lt; e.length; x++) {
        if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
          return true;
        }
      }
      return false;
    }
  

 

Đặt tên cho biến này cjs – is vimeo player on a page.

Nếu trình phát Vimeo được nhúng vào trang, biến này sẽ trả về “true”.

Sau đó, tạo một trigger 'Window Loaded'sử dụng biến JavaScript Tùy chỉnh trong đó. Nếu có trình phát Vimeo, trigger này sẽ được kích hoạt. Nếu không có trình phát Vimeo, trigger này vẫn ở chế độ im lặng.

Track Vimeo Player với Google Tag Manager và ga4

Vimeo Auto-Event Listener

Bây giờ, đến lượt của Vimeo Listener. Một listener là một hàm (hoặc một nhóm các hàm) được xây dựng để tiếp tục theo dõi các tương tác cụ thể trên một trang. Trong trường hợp này, listener sẽ theo dõi các tương tác của trình phát Vimeo. Nếu nó phát hiện một tương tác, nó sẽ làm cho dữ liệu đó hiển thị trong chế độ Preview and Debug.

 

Tạo một thẻ Custom HTML và dán đoạn code sau. Tác giả gốc của mã này là Bill Tripple và Bogdan Bistriceanu từ Cardinal Path. Nhưng để biến nó thuận tiện hơn cho GA4, tôi đã sửa đổi mã (một chút). Ngoài ra, cũng có một số cập nhật nhỏ khác đã được thực hiện qua các năm.

  
    <!-- Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video
tracking Copyright 2016, Cardinal Path, Inc. Original author: Bill Tripple
<btripple@cardinalpath.com>
Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com>
Updated by: Julius Fedorovicius <julius@analyticsmania.com> and Richard Outram <Richard.Outram@simmbiotic.com>
Version 2.1
-->
<script>
  var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer: [];
  var videoLabels = [];
  var lastP = [];

  //we declare variables that will hold information about the video being played
  var _playerTitle = {},
  _playerAuthor = {},
  _playerAuthorURL = {},
  _playerUploadDate = {};

  try {
    init();
  } catch(err) {
    dataLayer.push({
      'event': 'gtm.error',
      'errorMessage': e.message,
      'tag': 'Vimeo Video Listener'
    })
  }
  function init() {
    try {
      var player = document.getElementsByTagName("iframe");
      for (i = 0; i < player.length; ++i) {
        var url = player[i].getAttribute("src");

        if (/player\.vimeo\.com\/video/.test(url)) { // vimeo iframe found
          if (!player[i].hasAttribute("id")) { // id attribute missing
            player[i].setAttribute("id", "vimeo_id_" + i); // add id attribute
          }
          var urlUpdated = false;
          if (!/api=/.test(url)) { // check to see if api parameter is in src attribute
            url = updateUrl(url, "api", 1);
            urlUpdated = true;
          }

          if (!/player_id=/.test(url)) { // check if player_id is in src attribute
            url = updateUrl(url, "player_id", player[i].getAttribute("id"));
            urlUpdated = true;
          }
          if (urlUpdated) { // repopulate src attribute with added parameters
            player[i].setAttribute("src", url)
          }
          videoLabels[player[i].getAttribute("id")] = player[i].getAttribute("src"); // id to label dictionary
        }
      }

      // Listen for messages from the player
      if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
      } else {
        window.attachEvent('onmessage', onMessageReceived, false);
      }
    } catch(err) {}
  }

  function updateUrl(url, param, value) {
    try {
      return url + ((/\?/.test(url)) ? "&": "?") + param + "=" + value;
    } catch(err) {}
  }

  // Handle messages received from the player
  function onMessageReceived(e) {
    try {
      var data = e.data;

      if (typeof data === "string") {
        data = JSON.parse(data);
      }

      switch (data.event) {
      case 'ready':
        onReady(data);
        break;
      case 'play':
        onPlay(data);
        break;
      case 'pause':
        onPause(data);
        break;
      case 'timeupdate':
        onPlayProgress(data);
        break;
      }
    } catch(err) {}
  }

  // Helper function for sending a message to the player
  function post(action, value) {
    try {
      var data = {
        method: action
      };

      if (value) {
        data.value = value;
      }

      var message = JSON.stringify(data);
      var player = document.getElementsByTagName("iframe");
      var url;
      var prot;

      for (i = 0; i < player.length; ++i) {
        url = player[i].getAttribute("src");

        if (/player\.vimeo\.com\/video/.test(url)) {
          // Check if protocol exists
          prot = player[i].getAttribute('src').split('?')[0].split('//')[0];

          // If protocol doesn't exist, then need to append to "url"
          if (!prot) {
            url = "https:" + player[i].getAttribute("src").split('?')[0];
          }
          player[i].contentWindow.postMessage(data, url);
        }
      }
    } catch(err) {}
  }

  function getLabel(id) {
    try {
      return videoLabels[id].split('?')[0].split('/').pop();
    } catch(err) {}
  }

  //our function that will use the Vimeo oEmbed API to retrieve additional information about the video
  function getVimeoInfo(url, callback) {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    document.getElementsByTagName('body')[0].appendChild(script);
  }

  //the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes
  function vimeoCallback(e) {
    //console.log(e);
    _playerTitle[e['video_id']] = e['title'];
    _playerAuthor[e['video_id']] = e['author_name'] _playerAuthorURL[e['video_id']] = e['author_url'] _playerUploadDate[e['video_id']] = e['upload_date']
  }

  function onReady(data) {
    try {
      //execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"
      getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/" + getLabel(data.player_id) + "&callback=vimeoCallback", vimeoCallback);

      post('addEventListener', 'play');
      post('addEventListener', 'pause');
      post('addEventListener', 'finish');
      post('addEventListener', 'playProgress');
    } catch(err) {}
  }

  function onPlay(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      dataLayer.push({
        event: "video",
        video_action: "play",
        video_url: 'https://vimeo.com/' + getLabel(data.player_id),
        video_percent: data.data.percent.toFixed(2) * 100,
        video_title: _playerTitle[getLabel(data.player_id)].toLowerCase()
      });
    } catch(err) {}
  }

  function onPause(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      dataLayer.push({
        event: "video",
        video_action: "pause",
        video_url: 'https://vimeo.com/' + getLabel(data.player_id),
        video_percent: data.data.percent.toFixed(2) * 100,
        video_title: _playerTitle[getLabel(data.player_id)].toLowerCase()
      });
    } catch(err) {}
  }

  // Track progress: 25%, 50%, 75%, 100%
  function onPlayProgress(data) {
    try {
      var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
      if (!lastP[data.player_id] || t > lastP[data.player_id]) {
        lastP[data.player_id] = t;
        if (parseFloat(t) != 0) {
          dataLayer.push({
            event: "video",
            video_action: "progress",
            video_url: 'https://vimeo.com/' + getLabel(data.player_id),
            video_percent: t * 100,
            video_title: _playerTitle[getLabel(data.player_id)].toLowerCase()
          })
        }
      }
    } catch(err) {}
  }
</script>
  

 

Đừng quên gán trigger Window Loaded đã tạo trước đó:

Track Vimeo Player với Google Tag Manager và ga4

Kiểm tra! Hãy xem chúng ta đã tạo ra những gì cho đến thời điểm này:

  • Một Window Loaded Trigger kiểm tra xem trình phát video Vimeo có được nhúng trong trang web hay không (nhờ vào một biến Custom JavaScript).
  • Một Vimeo Auto-Event Listener (dưới dạng một thẻ Custom HTML) chỉ kích hoạt khi Window Loaded Trigger nêu trên được kích hoạt. Mỗi khi có một tương tác với trình phát Vimeo, người theo dõi sẽ phát đi sự kiện Data Layer với các dữ liệu sau đây:
  • Tên sự kiện: video (giá trị này không bao giờ thay đổi)
  • video_action (play, pause, hoặc progress)
  • video_url
  • video_percent
  • video_title

Như bạn có thể thấy, có ít dữ liệu hơn (so với trình kích hoạt Youtube). Nhưng điều đó vẫn khá hữu ích.

 

Nếu bạn muốn kiểm thử ngay bây giờ, kích hoạt chế độ Preview và Debug, làm mới trang có trình phát Vimeo và thử tương tác với nó. Bạn sẽ bắt đầu thấy các sự kiện video ở phía trái của chế độ Preview.

 

Bởi cách, người theo dõi Vimeo theo dõi các ngưỡng video sau: 25%, 50%, 75%, 100%. Không có sự kiện "complete" ở đây.

Tạo Data Layer Variables và Custom Event Trigger

Nếu bạn muốn chuyển một số thông tin từ data layer sang các công cụ khác (ví dụ: Google Analytics) bằng Google Tag Manager, bạn cần "dạy" GTM để nó lấy thông tin đó (với sự giúp đỡ của Data Layer Variables).

Dưới đây là một ảnh chụp màn hình của biến video_action.

Track Vimeo Player với Google Tag Manager và ga4

Thực hiện tương tự với video_url, video_percent và video_title.

Sau khi các biến được cấu hình, đến lúc tạo một Custom Event Trigger. Vimeo Auto-Event Listener gửi tất cả các tương tác dưới dạng sự kiện Data Layer với tên là "video".

 

Vì vậy, điều tiếp theo bạn cần làm là tạo một Custom Event Trigger lắng nghe TẤT CẢ các video events. Sau đó, nó sẽ được gán vào Google Analytics Tag.

 

Vì vậy, điều tiếp theo bạn nên làm là tạo Trình kích hoạt sự kiện tùy chỉnh để xử lý TẤT CẢ các sự kiện video. Sau đó, nó sẽ được gán cho Thẻ Google Analytics.

Trong GTM, đi tới Triggers > New > Custom Event và nhập các cài đặt sau:

Track Vimeo Player với Google Tag Manager và ga4

Tạo Google Analytics 4 event Tag

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

 

Cuối cùng nhưng không kém phần quan trọng, là Google Analytics. Bây giờ bạn cần gửi một sự kiện và truyền dữ liệu tương ứng với nó. Tạo một thẻ mới, chọn GA4 event làm Tag Type và nhập cấu hình sau:

Track Vimeo Player với Google Tag Manager và ga4

Tôi nhập Measurement ID làm biến hằng số vì tôi tin rằng đây là một cách tốt hơn so với việc sao chép-dán ID từ thẻ này sang thẻ khác.

  • Giá trị trong trường tên sự kiện sẽ là video_play, video_pause, hoặc video_progress. Điều này là có thể thực hiện được nhờ vào biến Data Layer mà tôi đã chèn vào trường đó.
  • Vì chúng ta có các tham số video_title, video_url, và video_percent trong data layer (và chúng ta đã tạo biến cho chúng), tôi cũng đã chèn chúng vào thẻ.

Kiểm tra

Đừng quên kiểm thử toàn bộ cấu hình này. Bật chế độ GTM Preview and Debug mode, truy cập một trang có trình phát Vimeo được nhúng và nhấn Play. Điều tiếp theo bạn nên thấy là một sự kiện video trong luồng sự kiện của chế độ Preview and Debug mode. Nhấp vào nó và kiểm tra xem thẻ sự kiện GA4 đã được kích hoạt chưa.

Track Vimeo Player với Google Tag Manager và ga4

Nếu có, hãy vào Google Analytics 4 DebugView để kiểm tra xem bạn có thấy các sự kiện đang diễn ra hay không.

Sau một thời gian, dữ liệu sự kiện của bạn cũng sẽ xuất hiện trong Standard Google Analytics reports và Analysis Hub. Nhưng quá trình này có thể mất tới 24 giờ. Vì vậy hãy kiên nhẫn.

Ngoài ra, đừng quên đăng ký các tham số dưới dạng video_percent hoặc video_title dưới dạng thứ nguyên tùy chỉnh - custom dimensions (nếu bạn muốn sử dụng chúng trong báo cáo GA4 của mình)

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

Track Vimeo Player với Google Tag Manager và GA4 là một cách hiệu quả để đo lường và cải thiện hiệu suất của video trong chiến lược marketing. Nếu bạn cần thêm sự trợ giúp hoặc tư vấn về cách theo dõi video Vimeo trên website, bạn có thể liên hệ với chuyên gia của Askany để được trò chuyện, nhận lời khuyên, và giải quyết vấn đề ngay tức thì.

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