- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Google Analystic là công cụ theo dõi lượng người dùng truy cập vào website hiệu quả, uy tín và được sử dụng nhiều nhất hiện nay. Bài hôm nay mình sẽ đi sâu hơn về cách chèn code theo dõi ga (viết tắt bởi: Google Analystic) vào trong website, cho phép bạn tùy biến dữ liệu trước khi lưu vào google analystic với tài khoản google của bạn.
Thông thường bạn chỉ cần chèn mã theo dõi được cung cấp bởi , để lấy mã này bạn truy cập vào Admin -> tại cột Property bạn nhấn vào Tracking Info -> Tracking Code.
Sau đó chỉ cần copy đoạn code này vào thẻ head của web là xong. Ví dụ:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxxxx', 'auto');
ga('send', 'pageview');
</script>
Một khi file analytics.js được load, bạn có thể sử dụng hàm ga để tùy biến thông tin cấu hình thêm trước khi lưu dữ liệu của web vào database.
Giải thích:
Javascript load đồng bộ thư viện analytics.js, lúc này hàm ga được thiết kế sử dụng để nạp các lệnh sử lý tương tác dữ liệu vào google analystic, khi bạn chạy các lệnh theo dõi, nếu thư viện chưa tải xong thì mỗi lệnh đó sẽ thêm vào hàng đợi đợi đến khi thư viện nạp hoàn tất tất cả các lệnh trong hàng được sẽ được sử lý theo thứ tự cho đến hết.
Để ý code chèn đồng bộ thư viện analystic.js có khai báo tên hàm ‘ga’ liên quan đến toàn bộ quá trình bạn sử dụng lệnh để theo dõi dữ liệu hoạt động trên website. Mẹo nhỏ bạn được phép đổi tên hàm này. Ví dụ mình sẽ đổi thành ‘__gaTracker’.
//Renaming the Global Object
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker'); #change global object with function named '__gaTracker'
Và thay vì trước đây bạn gọi hàm ga thì chúng ta thay bằng hàm ‘__gaTracker’.
__gaTracker('create', 'UA-XXXX-Y', 'auto');
__gaTracker('send', 'pageview');
Sau khi google analystic đã load xong, ngay lập tức ga có gọi hàm callback và truyền đối tượng tracker vào tham số hàm. Đôi khi bạn cần thực thi code sau khi thư viện tải xong. Thêm callback cho sự kiện nạp analystic.js hoàn tất.
ga(function(tracker){
//truyền đối tượng tracker vào hàm ( value of tracker will be the default tracking object that has been created as a result of the first create command)
#alert('library done loading');
var defaultPage = tracker.get('page');
});
Bước đầu đầu tiên, bạn cần khai báo ID của website trong phần quản trị analystic. Sử dụng lệnh create:
ga('create', 'UA-xxxxxxxxxx', 'auto');
Chú ý: nếu không biết chỉ số ID của web, bạn có thể đăng nhập vào trang google analystic và nhấn vào Admin tại cột Property click tiếp Property Settings.
Hoặc chọn menu Combox như hình dưới có liệt kê danh sách website đã thêm vào Ga, mỗi website có ID bên cạnh.
Track pageview
Copy dòng sau vào trang bạn muốn +1 views cho trang đó. Chúng ta sử dụng lệnh send.
<script>
ga('send','pageview');
</script>
Mặc định ga sẽ lấy tiêu đề trang hiện tại bởi giá trị document.title. Thư viện analystic cũng lấy địa chỉ URL hiện tại thông qua đoạn code này.
var location = window.location.protocol +
'//' + window.location.hostname +
window.location.pathname +
window.location.search;
Tuy nhiên, bạn có thể thiết lập lại URL khác tùy ý, với tùy chọn tham số thứ 3 cho lệnh ‘send’. Ví dụ sửa lại URL như truyền tham số GET:
//override the default location information
ga('send', 'pageview', '/my-overridden-page?id=1');
Thiết lập đầy đủ cả tiêu đề và URL trang, có hàm callback thông báo hoàn tất việc lưu data.
//allows you to pass a field name object like page slug,title..
ga('send','pageview',{
'page': '/my-new-page', //page slug
'title': 'My New Page Title', //page title
'hitCallback':function(){ //complete send callback
alert('analytics.js done sending data');
},
});
Ngoài ra, bạn cũng có thể thiết lập từng thuộc tính của trang bằng cách sử dụng lệnh set.
ga('set', 'page', '/my-custom-page'); #custom page slug
ga('set','title','Tuy bien Tieu de trang');
Bạn có thể gộp chung các thông tin dữ liệu vào đối tượng JSON đi kèm với lệnh ga, bạn thêm loại dữ liệu vào thuộc tính hitType. Đây là một tiện ích khác đối với hàm ga.
ga('send', {
'hitType': 'pageview',
'page': '/thiet-ke-web-gia-re',
'titlte': 'thiết kế web giá rẻ',
});
//final using hitType
ga('send', {
'hitType': 'event', // Required.
'eventCategory': 'button', // Required.
'eventAction': 'click', // Required.
'eventLabel': 'nav buttons',
'eventValue': 4
});
Quản lý nhiều Tracker – Tùy biến đối tượng Tracker
làm việc với nhiều đối tượng tracking , bạn có thể sử dụng lệnh theo dõi với một hay nhiều sites trên cùng 1 trang nhúng thư viện google analystic.
Đặt tên đối tượng cho site ID trong lệnh khởi tạo:
ga('create', 'UA-12345-6', 'auto', {'name': 'newTracker'}); // New tracker will have the name of newTracker.
Đối tượng tracker mặc định cho site có ID=UA-XXXX-Y.
ga('create', 'UA-XXXX-Y', 'auto'); #The first tracker will be the default tracking object and not have a name
Cùng lúc bạn có thể thiết lập pageview cho cả 2 sites, sử dụng tên tracker làm tiền tố cho mỗi lệnh bạn gọi.
//To send a pageview using both trackers, you prepend the name of the tracker to the beginning of the command
ga('send', 'pageview');
ga('newTracker.send', 'pageview'); // Send page view for new tracker.
Lấy đối tượng tracker
Trả về từng đối tượng tracker theo tên hoặc mảng danh sách toàn bộ trackers, bạn đang thiết lập theo dõi.
//get tracker
ga(function() {
var newTracker = ga.getByName('newTracker'); #To access a tracker object by name within a function
var allTrackers = ga.getAll(); #To get an array of all the trackers that have been configured
});
Test google analystic trên localhost
Mặc định analystic không cho phép gửi thông tin từ localhost, nếu bạn muốn chạy thử code ga có thể thiết lập cookie, khai báo domain cho phép mã tracking làm việc.
ga('create', 'UA-12345-6', {
name:'myTracker', //new tracker
..
#cookie settings, accept tracking for this domain ie: cho việc test trên localhost
'cookieDomain': 'foo.example.com',
'cookieName': 'myNewName',
'cookieExpires': 20000
});
Trường hợp test với localhost chúng ta để giá trị ‘cookieDomain’ là ‘none’.
//test on localhost you need to disable the default cookie domain
ga('create', 'UA-12345-6', {
'cookieDomain':'none'
});
Hỗ trợ SSL (HTTPS)
Nếu website đặt code ga là SSL có schema URL: https thì thiết lập thông số forceSSL=true.
ga('create', 'UA-XXXX-Y', 'auto');
ga('set', 'forceSSL', true); // Send all data using SSL, even from insecure (HTTP) pages.
ga('send', 'pageview');
Tạo sự kiện
GA cho phép bạn lưu trữ nhiều kiểu thông tin khác nhau, bên cạnh con số thống kê lượt truy cập từng ngày, theo tháng với mỗi page mà người dùng truy cập vào website của bạn. Bạn có thể theo dõi hành vi sử dụng các tính năng khác trên web mà bạn đặt code theo dõi. Với cách đặt tên theo dõi mới mà họ gọi là sự kiện, chẳng hạn: bạn muốn xem có bao nhiêu người nhấn vào ảnh, nút..
Sử dụng cài đặt event, mỗi sự kiện là một danh mục, và thêm các giá trị của sự kiện.
ga('send', 'event', 'button', 'click', 'nav buttons', 4);
Trong đó:
Category: ‘button’
Action: ‘click’
Label: ‘nav buttons’
Value: 4
Ví dụ khác bỏ qua Label & value. Có thể sử dụng label hoặc cả hai.
ga('send', 'event', 'category', 'action');
ga('send', 'event', 'category', 'action', 'label');
ga('send', 'event', 'category', 'action', 'label', value); // value is a number.
ga('send', 'event', 'image1', 'clicked'); //'image1': event category, 'clicked' is item.
ga('send', 'event', 'image1', 'item 2');
ga('send', 'event', 'image2', 'item 3'); //other event
ga('send', 'event', 'image2', 'clicked');
Ví dụ cụ thể, bạn muốn gửi sự kiện nhấn vào link tải file đính kèm ở bài viết vào Google Analystic thông qua sự kiện trình duyệt, như đoạn code sau đây:
<button id="button">Please click</button>
<script>
var downloadLink = document.getElementById('button');
$(downloadLink).click(function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
</script>
Sự kiện có thể thuộc về một page cụ thể. Bằng cách khai báo thông tin page thay cho giá trị Label của sự kiện.
ga('send', 'event', 'category', 'action', {'page': '/my-new-page'});
Cho phép người dùng vô danh gửi dữ liệu Analystic
Trong thống kê google analystic, những lượt view có thống kê người dùng đến từ đâu ở quốc gia nào thông qua nhận dạng IP của họ. Tuy nhiên trường hợp máy tính bị hack IP chuyển sang chế độ anonymous không để thông tin khi lướt web. Bạn có thể quy định mã google analystic chỉ hoạt động khi biết thông tin của máy tính đó hoặc cho phép cả người dùng khi không xác định rõ IP.
Thiết lập option anonymizeIp=true để mở khóa cho anonymous IP.
//In some cases, you might need to anonymize the IP address of the hit (http request) sent to Google Analytics
ga('set', 'anonymizeIp', true); #You can anonymize the IP addresses for all the hits sent from a page
Bạn cũng có thể cài đặt thuộc tính này riêng cho từng loại dữ liệu. Ví dụ: chỉ cho phép anonymous đếm pageview.
#To anonymize the IP address of an individual hit
ga('send', 'pageview', {
'anonymizeIp': true
});
Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype