Để tracking được các metrics trên website, chúng ta cần các công cụ để thu thập dữ liệu (Google Analytics, HotJar, Mixpanel, Heap …), để các công cụ thu thập được dữ liệu, chúng ta cần deploy các công cụ này lên website. Thông thường, trước đây để có thể deploy tracking code, Marketer sẽ gửi đoạn code tracking được gen bởi các Tool và nhờ Developer gắn vào Frontend, thường sẽ được gắn vào thẻ <head> của HTML dạng như sau:

MixPanel

<!-- Paste this right before your closing head tag -->
<script type="text/javascript">
    (function (f, b) { if (!b.__SV) { var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) { function g(a, d) { var b = d.split("."); 2 == b.length && ((a = a[b[0]]), (d = b[1])); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))); }; } var a = b; "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel"); a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d; }; a.people.toString = function () { return a.toString(1) + ".people (stub)"; }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split( " "); for (h = 0; h < i.length; h++) g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]); }; } for ( var d = {}, e = ["get_group"].concat( Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++) b(j[c]); return d; }; b._i.push([e, f, c]); }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ? MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g); } })(document, window.mixpanel || []);
 
    // Create an instance of the Mixpanel object
    mixpanel.init("YOUR_PROJECT_TOKEN", {
        autocapture: true,
        track_pageview: true,
        record_sessions_percent: 100, //records 100% of all sessions
        record_heatmap_data: true,
    });
</script>

HotJar

<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Code sẽ load một JS SDK, khởi tạo một instance với Account ID của tool đó, và sau đó có thể gửi event về cho provider.

Nhưng mấy ông Developer mặt lúc nào cũng nhăn nhăn, mỗi lần cần gắn gì, thay đổi code gì, mặt nhăn như khỉ, nhờ deploy mãi không được, nên sau này Google chế ra một cái gọi là Google Tag Manager, chỉ cần gắn code GTM một lần duy nhất trên website, các code tracking sau này sẽ được marketer quản lý, deploy thông qua giao diện Tag Manager.

Gắn GTM code như hướng dẫn, một cái trong thẻ head và một cái trong body. Sau đó submit và test qua công cụ https://tagassistant.google.com

<!DOCTYPE html>  
<html lang="en">  
<head>  
	<!-- Google Tag Manager -->  
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':  
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],  
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=  
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);  
	})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>  
	<!-- End Google Tag Manager -->  

	<title>Example Webpage</title>  
</head>  
<body>
	<!-- Google Tag Manager (noscript) -->  
	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"  
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  
	<!-- End Google Tag Manager (noscript) -->  

	<!-- Content of your website -->  
	<h1>Welcome to My Website</h1>  
	<p>This is a sample paragraph on my webpage.</p>  
</body>
</html>

Kể từ bây giờ, Marketer khi muốn gắn thêm code tracking gì mới, chỉ cần quản lý thông qua https://tagmanager.google.com/ theo các bước

  • Tạo một Tag mới, Tag mới có thể là các tool của third party hoặc Custom HTML hoặc từ self-template, community template …
  • Config điều kiện event sẽ được trigger
  • Submit để deploy (có quản lý version cơ bản)

Ví dụ muốn custom một popup alert khi user load page có thể config như sau:

  • Tạo Custom HTML Tag với đoạn code sau
<script>
  (function() {
    alert("Chào mừng bạn! Bạn vừa click vào một thành phần trên trang.");
  })();
</script>
  • Trigger All Pages

Lợi ích của dùng GTM tất nhiên là marketer không bị block trong công việc, tự chủ động custom, bắt các event, GTM cũng hỗ trợ các phương thức như quản lý version tag, pause tag, debug tag … mà không cần nhờ Developer.

Nhược điểm là market ít có kinh nghiệm về bảo mật, performance, nên:

  • Gắn nhiều tracking code -> Dẫn tới loading site bị ảnh hưởng
  • Code tracking không hiểu, chỉ copy paste sẽ dễ gây ra vấn đề bảo mật -> Tạm thời sẽ không nói sâu, nhưng có thể có một vài giải pháp liên quan đến JS sandbox, CSP …

Bonus: Cài Google Analytic thông qua GTM

Gồm 2 bước ở 2 site khác nhau:

Google Analytic

  • Create a Google Analytics 4 Property & Data Stream: Truy cập vào analytics.google.com tạo Account nếu chưa có, sau đó tạo một Property
  • Trong Property mới tạo, Add một Data Stream cho web và lấy Measurement ID (G-XXXXXXXX) add-data-stream

Tag Manager:

  • Truy cập vào Tag Manager, tạo một Tags với Tag Type là Google Tags, giá trị Tag ID là giá trị của Measurement ID lấy ở Google Analytic, Triggering là Initialization - All Pages
  • Sau đó chọn Preview để test và Submit khi xong xuôi

Có thể xem hướng dẫn bằng Video ở Youtube