Nếu bạn đang sử dụng AngularJS với UI Router, và cần chèn Google Analytics vào website để phân tích người dùng. Hãy thực các bước cơ bản sau đây để cài đặt Google Analytics phân tích website AngularJS của bạn:
1. Chèn vào đoạn mã Google Analytics vào trang chính. Ví dụ là index.html
2. Comment lại lần tracking đầu tiên (do website chưa được load hoàn toàn)
3. Thêm vào sự kiện load trạng thái hoàn tất (của ui-router)
Copy đoạn mã GA mà Google Analytics cung cấp cho bạn. Rồi dán nó vào trang index.html
(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-XXXXXXXX-X', 'yourdomain.com');
//ga('send', 'pageview'); <- Comment dòng này lại
Thêm đoạn cấu hình vào bước khởi động ứng dụng AngularJS, đăng ký sự kiện $stateChangeSuccess trong $rootScope
angular.module('yourApp', [])
.run(['$rootScope', '$location', '$window', function($rootScope, $location, $window){
$rootScope
.$on('$stateChangeSuccess',
function(event){
if (!$window.ga)
return;
$window.ga('send', 'pageview', { page: $location.path() });
});
}]);
Vậy là xong !
