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

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' và 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.

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 đó:

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.

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:

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:

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