Marketing, Tracking

Track Vimeo Player với Google Tag Manager và ga4 đảm bảo thành công

Posted on by _content1
hqdefault 1
05
Th1

Track Vimeo Player với Google Tag Manager và ga4 như thế nào? Bạn có biết rằng bạn có thể theo dõi và phân tích hiệu quả của video Vimeo trên trang web của mình bằng cách sử dụng Google Tag Manager và Google Analytics 4? Bằng cách làm như vậy, bạn có thể thu thập và phân tích các dữ liệu quan trọng như tỷ lệ thoát, thời lượng xem, tỷ lệ xem, và nhiều hơn nữa. Điều này sẽ giúp doanh nghiệp hiểu được hiệu quả của video trong chiến dịch marketing của mình. Tư đó tối ưu hóa nội dung video để thu hút và giữ chân khách hàng.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách track Vimeo player với Google Tag Manager và Google Analytics 4 chi tiết. Nếu bạn cần thêm sự hỗ trợ từ chuyên gia Tracking, hãy đăng ký tư vấn cùng chuyên gia Digital Marketing trên Askany ngay hôm nay! Bạn sẽ được kết nối với chuyên gia có chuyên môn cao về track Vimeo player với Google Tag Manager và Google Analytics 4, và họ sẽ giúp bạn giải quyết mọi vấn đề một cách nhanh chóng và hiệu quả. Chỉ cần nhấp vào nút bên dưới và điền vào mẫu đơn đơn giản, bạn sẽ nhận được cuộc gọi từ chuyên gia Tracking trong vòng 24 giờ. Đừng bỏ lỡ cơ hội này, hãy đăng ký tư vấn cùng chuyên gia Tracking trên Askany ngay bây giờ!

Sơ lược cách track Vimeo Player với Google Tag Manager và GA4

Vimeo Player Wireframe Sketch freebie - Download free resource for Sketch - Sketch App Sources

  • Tạo một biến để kiểm tra xem trình phát Vimeo có được nhúng trên trang web không
  • Tạo một listener để theo dõi các sự kiện của trình phát Vimeo
  • Tạo các biến và trigger để lấy và gửi các dữ liệu về sự kiện của trình phát Vimeo
  • Tạo một thẻ sự kiện GA4 để gửi các dữ liệu về sự kiện của trình phát Vimeo đến Google Analytics
  • Kiểm tra và xem kết quả trong Google Analytics 4

Cách track Vimeo Player với Google Tag Manager và GA4

Dưới đây là hướng dẫn chi tiết cách tracking Vimeo Player với Google Tag Manager và GA4

Xem thêm: tracking đặt lịch bằng Google Tag Manager và Google Analytics 4

Tạo một biến để kiểm tra xem trình phát Vimeo có được nhúng trên trang web không

Để theo dõi trình phát Vimeo với Google Tag Manager 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 tất cả 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 trang web đó. Để làm được điều đó, đầu tiên chúng ta cần tạo một biến JavaScript Tùy chỉnh (Custom JavaScript variable) (chuyển đến Variables > New > Custom Javascript) và dán đoạn code sau:

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;

}

Đặt tên cho biến này là cjs – is vimeo player on a page. Nếu trình phát Vimeo được nhúng trong trang, biến này sẽ trả về true.

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

Tạo một listener để theo dõi các sự kiện của trình phát Vimeo

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

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

<!-- Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking

Copyright 2016, Cardinal Path, Inc.

Original author: Bill Tripple < [email protected] >

Revised by: Bogdan Bistriceanu < [email protected] >

Updated by: Julius Fedorovicius < [email protected] > and Richard Outram < [email protected] >

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

return url;

}

}


function onMessageReceived (e) {

try {

var data = JSON.parse (e.data);

if (data.event === "ready") {

// When the player is ready, add listeners for pause, finish, and playProgress

post ("addEventListener", "pause", data.player_id);

post ("addEventListener", "finish", data.player_id);

post ("addEventListener", "playProgress", data.player_id);

post ("addEventListener", "play", data.player_id);

post ("addEventListener", "seek", data.player_id);

post ("getVideoTitle", null, data.player_id);

post ("getVideoAuthor", null, data.player_id);

post ("getVideoAuthorURL", null, data.player_id);

post ("getVideoUploadDate", null, data.player_id);

}

else if (data.event === "playProgress") {

// When the player is playing, update the progress

var p = Math.round (data.data.percent * 100);

if (p != lastP [data.player_id]) {

lastP [data.player_id] = p;

if (p % 25 === 0) {

dataLayer.push ({

'event': 'vimeo',

'eventCategory': 'Vimeo',

'eventAction': 'Progress ' + p + '%',

'eventLabel': videoLabels [data.player_id],

'eventValue': p,

'eventNonInteraction': true

});

}

}

}

else if (data.event === "play") {

// When the player starts playing, send an event

dataLayer.push ({

'event': 'vimeo',

'eventCategory': 'Vimeo',

'eventAction': 'Play',

'eventLabel': videoLabels [data.player_id],

'eventValue': 0,

'eventNonInteraction': false

});

}

else if (data.event === "pause") {

// When the player pauses, send an event

dataLayer.push ({

'event': 'vimeo',

'eventCategory': 'Vimeo',

'eventAction': 'Pause',

'eventLabel': videoLabels [data.player_id],

'eventValue': 0,

'eventNonInteraction': false

});

}

else if (data.event === "finish") {

// When the player finishes, send an event

dataLayer.push ({

'event': 'vimeo',

'eventCategory': 'Vimeo',

'eventAction': 'Finish',

'eventLabel': videoLabels [data.player_id],

'eventValue': 0,

'eventNonInteraction': false

});

}

else if (data.event === "seek") {

// When the player seeks, send an event

dataLayer.push ({

'event': 'vimeo',

'eventCategory': 'Vimeo',

'eventAction': 'Seek',

'eventLabel': videoLabels [data.player_id],

'eventValue': 0,

'eventNonInteraction': false

});

}

else if (data.method === "getVideoTitle") {

// When the player returns the video title, store it in a variable

_playerTitle [data.player_id] = data.value;

}

else if (data.method === "getVideoAuthor") {

// When the player returns the video author, store it in a variable

_playerAuthor [data.player_id] = data.value;

}

else if (data.method === "getVideoAuthorURL") {

// When the player returns the video author URL, store it in a variable

_playerAuthorURL [data.player_id] = data.value;

}

else if (data.method === "getVideoUploadDate") {

// When the player returns the video upload date, store it in a variable

_playerUploadDate [data.player_id] = data.value;

}

}

catch (err) {

}

}


function post (action, value, player_id) {

try {

var data = {

method: action

};

if (value) {

data.value = value;

}

var message = JSON.stringify (data);

document.getElementById (player_id).contentWindow.postMessage (data, "*");

}

catch (err) {

}

}

</script>

Đặt tên cho thẻ này là Vimeo Video Listener. Đặt trigger là Window Loaded trigger mà chúng tôi đã tạo trước đó. Bây giờ, bất cứ khi nào trình phát Vimeo được nhúng vào trang web, thẻ này sẽ được kích hoạt và bắt đầu theo dõi các sự kiện của trình phát Vimeo.

Tạo các biến Data Layer để lấy các dữ liệu về sự kiện của trình phát Vimeo, bao gồm

  • video_action: hành động của người xem, có thể là play, pause hoặc progress.
  • video_url: đường dẫn của video trên Vimeo, ví dụ: https://vimeo.com/123456789.
  • video_percent: phần trăm thời lượng video đã được xem, ví dụ: 25, 50, 75 hoặc 100.
  • video_title: tiêu đề của video trên Vimeo, ví dụ: Hướng dẫn sử dụng Google Tag Manager.
  • Tạo các trigger để kích hoạt các sự kiện của trình phát Vimeo, bao gồm:
  • Vimeo Play: kích hoạt khi biến video_action bằng play.
  • Vimeo Pause: kích hoạt khi biến video_action bằng pause.
  • Vimeo Progress: kích hoạt khi biến video_action bằng progress và biến video_percent bằng một trong các giá trị 25, 50, 75 hoặc 100.
  • Tạo một thẻ sự kiện GA4 để gửi các dữ liệu về sự kiện của trình phát Vimeo đến Google Analytics. Bạn cần phải cấu hình các thông số như sau:
  • Tên sự kiện: bạn có thể đặt tùy ý, ví dụ: vimeo_video.
  • Tham số sự kiện: bạn cần thêm các tham số sau để lưu trữ các dữ liệu từ các biến Data Layer:
    • action: giá trị từ biến video_action.
    • url: giá trị từ biến video_url.
    • percent: giá trị từ biến video_percent.
    • title: giá trị từ biến video_title.
  • Trigger: bạn cần chọn các trigger Vimeo Play, Vimeo Pause và Vimeo Progress để kích hoạt thẻ này.
  • Kiểm tra và xem kết quả trong Google Analytics 4. Bạn có thể vào mục Sự kiện để xem các sự kiện vimeo_video được ghi nhận. Bạn cũng có thể tạo các biểu đồ hoặc báo cáo để phân tích các dữ liệu về sự kiện của trình phát Vimeo.

>>>Tham khảo: Khóa học tracking từ “Zero” thành “Hero” dành cho bạn.

Dưới đây là cách track Vimeo Player với Google Tag Manager và ga4 chi tiết nhất. Nếu nó quá phức tạp và bạn không có đủ kiến thức cũng như kỹ năng để triển khai, hãy liên hệ với chuyên gia tracking của chúng tôi trên app Askany để được hỗ trợ 1:1 chi tiết nhất.

_content1

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *