Theo dõi hành động Video với GA4 và Google Tag Manager

Tính năng theo dõi video tích hợp trong GA4 (Đo lường nâng cao)

• video_start. Được gửi khi khách truy cập bắt đầu xem video.
• video_progress. Khi người xem đạt đến một ngưỡng cụ thể của video (10%, 25%, 50%, 75%).
• video_complete. Khi một khách hàng truy cập xem đến cuối video.

• video_current_time. Dấu thời gian hiện tại của video nơi người xem đang ở (tính bằng giây)
• video_duration. Thời lượng video tính bằng giây.
• video_percent. Ngưỡng của video (không có dấu %)
• video_provider.. Giá trị của tham số này luôn là “youtube”.
• video_title. Tiêu đề của video.
• video_url. Đây là URL của video.
• visible. Trả về “1” nếu người chơi được hiển thị trên màn hình trong khi mức độ tương tác video được theo dõi.

Theo dõi video Youtube bằng trình kích hoạt GTM và GA4

Tạo trình kích hoạt Video Youtube

Bật các biến video tích hợp

Tạo thẻ Google Analytics 4

• Trong trường ID đo lường, bạn phải nhập ID đo lường GA4. Ngoài ra, bạn có thể nhập một biến có chứa ID.
• Bạn có thể nhập bất cứ điều gì bạn muốn vào khu Tên sự kiện. Tôi chỉ cố gắng tuân theo quy ước đặt tên tương tự được sử dụng trong Đo lường nâng cao. Trong thiết lập của tôi, sẽ có ba tên sự kiện có thể có: video_start , video_progress và video_complete . Điều này có thể thực hiện được nhờ biến tích hợp có tên là “Video Status”.
• Tất cả các thông số sự kiện mà tôi đã đưa vào cũng là tùy chọn. Nếu bạn cho rằng một số trong số chúng không có giá trị, hãy tiếp tục và loại bỏ chúng. Một lần nữa tôi quyết định tuân theo quy ước đặt tên của Đo lường nâng cao.

Kiểm tra thiết lập

Cách theo dõi Vimeo bằng Google Analytics 4 và GTM

Tất cả bắt đầu với việc xác định trình phát video

Tạo một biến “Trình phát Vimeo có hiện diện trên một trang”

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

Trình nghe sự kiện tự động Vimeo

<script type=”text/javascript” id=”gtm-vimeo-tracking”> ;(function(document, window, config) { ‘use strict’; // The API won’t work on LT IE9, so we bail if we detect those UAs if (navigator.userAgent.match(/MSIE [678]\./gi)) return; config = cleanConfig(config); var handle = getHandler(config.syntax); if (document.readyState !== ‘loading’) { init(); } else { document.addEventListener(‘DOMContentLoaded’, function() { init(); document.addEventListener(‘load’, init, true); }); } function init() { var videos = filter_(selectAllTags_(‘iframe’), isVimeo); if (!videos.length) return; loadApi(function() { forEach_(videos, listenTo); }); } function isVimeo(el) { return el.src.indexOf(‘player.vimeo.com/video/’) > -1; } function loadApi(callback) { if (isUndefined_(window.Vimeo)) { loadScript(‘https://player.vimeo.com/api/player.js’, callback); } else { callback(); } } function listenTo(el) { if (el.__vimeoTracked) return; el.__vimeoTracked = true; var video = new Vimeo.Player(el); var percentages = config._track.percentages; var eventNameDict = { ‘play’: ‘play’, ‘pause’: ‘pause’, ‘complete’: ‘ended’ }; var cache = {}; video.getVideoTitle() .then(function(title) { forEach_([‘play’, ‘pause’, ‘complete’], function(key) { if (config.events[key]) { video.on(eventNameDict[key], function() { handle(key, title); }); } }); if (percentages) { video.on(‘timeupdate’, function(evt) { var percentage = evt.percent; var key; for (key in percentages) { if (percentage >= percentages[key] && !cache[key]) { cache[key] = true; handle(key, title); } } }); } }); } function cleanConfig(config) { config = extend_({}, { events: { ‘play’: true, ‘pause’: true, ‘complete’: true }, percentages: { each: [], every: [] } }, config); forEach_([‘each’, ‘every’], function(setting) { var vals = config.percentages[setting]; if (!isArray_(vals)) vals = [vals]; if (vals) config.percentages[setting] = map_(vals, Number); }); var points = [].concat(config.percentages.each); if (config.percentages.every) { forEach_(config.percentages.every, function(val) { var n = 100 / val; var every = []; var i; for (i = 1; i < n; i++) every.push(val * i); points = points.concat(filter_(every, function(val) { return val > 0.0 && val < 100.0; })); }); } var percentages = reduce_(points, function(prev, curr) { prev[curr + ‘%’] = curr / 100.0; return prev; }, {}); config._track = { percentages: percentages }; return config; } function getHandler(syntax) { syntax = syntax || {}; var gtmGlobal = syntax.name || ‘dataLayer’; var uaGlobal = syntax.name || window.GoogleAnalyticsObject || ‘ga’; var clGlobal = ‘_gaq’; var dataLayer; var handlers = { ‘gtm’: function(state, title) { if (state.indexOf(‘%’) === -1 && state.indexOf(‘play’) === -1) { dataLayer.push({ event: ‘video’, video_provider: ‘vimeo’, video_action: state, video_title: title.toLowerCase(), video_percent: undefined }); } else if (state === ‘0%’){ dataLayer.push({ event: ‘video’, video_provider: ‘vimeo’, video_action: ‘start’, video_title: title.toLowerCase(), video_percent: undefined }); } else if (state.indexOf(‘play’) === -1) { dataLayer.push({ event: ‘video’, video_provider: ‘vimeo’, video_action: ‘progress’, video_percent: state, video_title: title.toLowerCase() }); } }, ‘cl’: function(state, title) { window[clGlobal].push([‘_trackEvent’, ‘Videos’, state, title]); }, ‘ua’: function(state, title) { window[uaGlobal](‘send’, ‘event’, ‘Videos’, state, title); } }; switch(syntax.type) { case ‘gtm’: dataLayer = window[gtmGlobal] = window[gtmGlobal] || []; break; case ‘ua’: window[uaGlobal] = window[uaGlobal] || function() { (window[uaGlobal].q = window[uaGlobal].q || []).push(arguments); }; window[uaGlobal].l = +new Date(); break; case ‘cl’: window[clGlobal] = window[clGlobal] || []; break; default: if (!isUndefined_(window[gtmGlobal])) { syntax.type = ‘gtm’; dataLayer = window[gtmGlobal] = window[gtmGlobal] || []; } else if (uaGlobal&& !isUndefined_(window[uaGlobal])) { syntax.type = ‘ua’; } else if (!isUndefined_(window[clGlobal]) && !isUndefined_(window[clGlobal].push)) { syntax.type = ‘cl’; } break; } return handlers[syntax.type]; } function extend_() { var args = [].slice.call(arguments); var dst = args.shift(); var src; var key; var i; for (i = 0; i < args.length; i++) { src = args[i]; for (key in src) { dst[key] = src[key]; } } return dst; } function isArray_(o) { if (Array.isArray_) return Array.isArray_(o); return Object.prototype.toString.call(o) === ‘[object Array]’; } function forEach_(arr, fn) { if (Array.prototype.forEach_) return arr.forEach.call(arr, fn); var i; for (i = 0; i < arr.length; i++) { fn.call(window, arr[i], i, arr); } } function map_(arr, fn) { if (Array.prototype.map_) return arr.map.call(arr, fn); var newArr = []; forEach_(arr, function(el, ind, arr) { newArr.push(fn.call(window, el, ind, arr)); }); return newArr; } function filter_(arr, fn) { if (Array.prototype.filter) return arr.filter.call(arr, fn); var newArr = []; forEach_(arr, function(el, ind, arr) { if (fn.call(window, el, ind, arr)) newArr.push(el); }); return newArr; } function reduce_(arr, fn, init) { if (Array.prototype.reduce) return arr.reduce.call(arr, fn, init); var result = init; var el; var i; for (i = 0; i < arr.length; i++) { el = arr[i]; result = fn.call(window, result, el, arr, i); } return result; } function isUndefined_(thing) { return typeof thing === ‘undefined’; } function selectAllTags_(tags) { if (!isArray_(tags)) tags = [tags]; return [].slice.call(document.querySelectorAll(tags.join())); } function loadScript(src, callback) { var f, s; f = document.getElementsByTagName(‘script’)[0]; s = document.createElement(‘script’); s.onload = callCallback; s.src = src; s.async = true; f.parentNode.insertBefore(s, f); function callCallback() { if (callback) { callback(); s.onload = null; } } } })(document, window, { ‘events’: { ‘play’: true, ‘pause’: false, ‘complete’: true }, ‘percentages’: { ‘every’: 25, ‘each’: [0, 90] } }); /* * v1.0.1 * Created by the Google Analytics consultants at http://www.lunametrics.com * Written by @notdanwilkerson * Documentation: https://github.com/lunametrics/vimeo-google-analytics/ * Licensed under the MIT License * Modified by Julius Fedorovicius at https://www.analyticsmania.com */ </script>

• Trình kích hoạt tải cửa sổ để kiểm tra xem trình phát video Vimeo có được nhúng vào trang web hay không (nhờ biến JavaScript tùy chỉnh).
• Trình xử lý sự kiện tự động Vimeo (dưới dạng thẻ HTML tùy chỉnh) chỉ kích hoạt khi Trình kích hoạt tải cửa sổ nói trên kích hoạt. Mỗi khi xảy ra tương tác với người chơi Vimeo, người nghe sẽ gửi một sự kiện Data Layer với dữ liệu sau:
  • Tên sự kiện: video (giá trị này không bao giờ thay đổi)
  • video_action (bắt đầu hoặc tiến triển, hoàn thành)
  • video_percent
  • video_title

Tạo biến lớp dữ liệu và trình kích hoạt sự kiện tùy chỉnh

Tạo Thẻ sự kiện Google Analytics 4

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

Kiểm tra, kiểm tra, kiểm tra

Tóm tắt toàn bộ quá trình

• Chúng tôi đã tạo một biến JS tùy chỉnh trả về true nếu trình phát Vimeo được nhúng trên một trang.
• Sau đó, chúng tôi đã tạo Trình kích hoạt tải cửa sổ để kiểm tra xem trình phát video Vimeo có được nhúng vào trang web hay không (nhờ biến JavaScript tùy chỉnh)
• Sau đó, chúng tôi đã tạo thẻ HTML tùy chỉnh (Trình xử lý sự kiện tự động Vimeo). Và nó sẽ kích hoạt trên tất cả các trang có nhúng trình phát Vimeo. Quan trọng: ngay cả khi bạn chưa tương tác với người chơi, thẻ đó vẫn sẽ kích hoạt.
• Mỗi khi xảy ra tương tác với người chơi Vimeo, người nghe sẽ gửi một sự kiện Lớp dữ liệu với dữ liệu sau:
  • Tên sự kiện: video (giá trị này không bao giờ thay đổi)
  • video_action (bắt đầu, tiến triển hoặc hoàn thành)
  • video_percent
  • video_title
• Bạn đã tạo 4 Biến Data Layer và một Trình kích hoạt sự kiện tùy chỉnh (cho sự kiện video).
• Cuối cùng, bạn đã tạo một thẻ sự kiện GA4 kích hoạt sự kiện video và sẽ gửi giá trị của 4 Biến lớp dữ liệu đó tới Google Analytics.

Theo dõi trình phát video HTML5 bằng GA4

1. Tạo biến JavaScript tùy chỉnh để kiểm tra xem trình phát video có xuất hiện trên một trang hay không.
2. Bạn thêm thẻ HTML tùy chỉnh (với mã người nghe). Người nghe đó sẽ tìm kiếm các tương tác video của một loại trình phát video cụ thể. Chỉ kích hoạt thẻ này nếu biến JavaScript tùy chỉnh trả về true (điều này có nghĩa là trình phát hiện thị trên một trang).
3. Sau đó, trình nghe đó sẽ đẩy dữ liệu tương tác video lên Data Layer.
4. Bạn sẽ cần tạo các biến Lớp dữ liệu để truy cập vào dữ liệu tùy chỉnh đó.
5. Bạn cũng sẽ cần tạo trình kích hoạt sự kiện tùy chỉnh.
6. Cuối cùng, bạn sẽ cần tạo một thẻ sự kiện GA4 để kích hoạt thẻ dataLayer.push đó và bạn sẽ cần gửi dữ liệu tương tác video tới GA.

Ví dụ: bạn có thể xem một loại trình phát video phổ biến khác, video HTML5 chung.

Kết luận