Theo dõi lượt xem trang Google Analytics bằng AngularJS

Tôi đang thiết lập một ứng dụng mới bằng cách sử dụng AngularJS làm giao diện. Mọi thứ về phía khách hàng đều được thực hiện với HTML5 Pushstate và tôi muốn có thể theo dõi lượt xem trang của mình trong Google Analytics.

Nếu bạn đang sử dụng ng-viewtrong ứng dụng Angular của mình, bạn có thể lắng nghe $viewContentLoadedsự kiện và đẩy sự kiện theo dõi lên Google Analytics.

Giả sử bạn đã thiết lập mã theo dõi trong tệp index.html chính của mình với tên var _gaqvà MyCtrl là những gì bạn đã xác định trong ng-controllerchỉ thị.

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

CẬP NHẬT: đối với phiên bản mới của Google-Analytics, hãy sử dụng phiên bản này

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

Khi chế độ xem mới được tải vào AngularJS, Google Analytics sẽ không tính nó là tải trang mới. May mắn thay, có một cách để yêu cầu GA ghi nhật ký url dưới dạng một lần xem trang mới.

_gaq.push(['_trackPageview', '<url>']); sẽ thực hiện công việc, nhưng làm thế nào để liên kết điều đó với AngularJS?

Đây là một dịch vụ mà bạn có thể sử dụng:

(function(angular) { 

  angular.module('analytics', ['ng']).service('analytics', [
    '$rootScope', '$window', '$location', function($rootScope, $window, $location) {
      var track = function() {
        $window._gaq.push(['_trackPageview', $location.path()]);
      };
      $rootScope.$on('$viewContentLoaded', track);
    }
  ]);

}(window.angular));

Khi bạn xác định mô-đun góc của mình, hãy bao gồm mô-đun phân tích như sau:

angular.module('myappname', ['analytics']);

CẬP NHẬT :

Bạn nên sử dụng mã theo dõi Google Analytics phổ quát mới với:

$window.ga('send', 'pageview', {page: $location.url()});

app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

Chỉ là một bổ sung nhanh chóng. Nếu bạn đang sử dụng phân tích mới, thì:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

Ngoài ra, một mẹo là Google Analytics sẽ không kích hoạt localhost. Vì vậy, nếu bạn đang thử nghiệm trên localhost, hãy sử dụng cách sau thay vì tạo mặc định ( tài liệu đầy đủ )

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});

Tôi đã tạo một bộ lọc dịch vụ + có thể giúp các bạn với điều này và cũng có thể với một số nhà cung cấp khác nếu bạn chọn thêm chúng trong tương lai.

Hãy xem https://github.com/mgonto/angularytics và cho tôi biết cách thức này phù hợp với bạn.

Hợp nhất các câu trả lời của wynnwu và dpineda là những gì làm việc cho tôi.

angular.module('app', [])
  .run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) {
            return;
          }
          $window.ga('send', 'pageview', {
            page: $location.path()
          });
        });
    }
  ]);

Đặt tham số thứ ba làm đối tượng (thay vì chỉ $ location.path ()) và sử dụng $ routeChangeSuccess thay vì $ stateChangeSuccess đã thực hiện thủ thuật này.

Hi vọng điêu nay co ich.

Tôi đã tạo một ví dụ đơn giản trên github bằng cách sử dụng phương pháp trên.

https://github.com/isamuelson/angularjs-googleanalytics

Cách tốt nhất để làm điều này là sử dụng Trình quản lý thẻ của Google để kích hoạt các thẻ Google Analytics của bạn dựa trên các trình nghe lịch sử. Chúng được tích hợp vào giao diện GTM và dễ dàng cho phép theo dõi các tương tác HTML5 của máy khách.

Kích hoạt các biến Lịch sử tích hợp và tạo một trình kích hoạt để khởi động một sự kiện dựa trên các thay đổi lịch sử.

Trong của bạn index.html, sao chép và dán đoạn mã ga nhưng xóa dòngga('send', 'pageview');

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<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-XXXXXXXX-X');
</script>

Tôi muốn cung cấp cho nó tập tin nhà máy riêng của mình my-google-analytics.jsvới tự tiêm:

angular.module('myApp')
  .factory('myGoogleAnalytics', [
    '$rootScope', '$window', '$location', 
    function ($rootScope, $window, $location) {

      var myGoogleAnalytics = {};

      /**
       * Set the page to the current location path
       * and then send a pageview to log path change.
       */
      myGoogleAnalytics.sendPageview = function() {
        if ($window.ga) {
          $window.ga('set', 'page', $location.path());
          $window.ga('send', 'pageview');
        }
      }

      // subscribe to events
      $rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);

      return myGoogleAnalytics;
    }
  ])
  .run([
    'myGoogleAnalytics', 
    function(myGoogleAnalytics) {
        // inject self
    }
  ]);

Tôi tìm thấy gtag()chức năng làm việc, thay vì ga()chức năng.

Trong tệp index.html, trong <head>phần:

<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TrackingId');
</script>

Trong mã AngularJS:

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

Thay thế TrackingIdbằng Id theo dõi của riêng bạn.

Nếu ai đó muốn thực hiện bằng cách sử dụng các lệnh sau đó, hãy xác định (hoặc tạo) một div trong index.html (ngay dưới thẻ body hoặc ở cùng cấp DOM)

<div class="google-analytics"/>

và sau đó thêm đoạn mã sau vào lệnh

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});

Nếu bạn đang sử dụng bộ định tuyến ui, bạn có thể đăng ký sự kiện $ stateChangeSuccess như thế này:

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

Đối với một ví dụ làm việc hoàn chỉnh, xem bài đăng trên blog này

Sử dụng GA 'set' để đảm bảo các tuyến được chọn cho các phân tích thời gian thực của Google. Nếu không, các cuộc gọi tiếp theo đến GA sẽ không hiển thị trong bảng thời gian thực.

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google đặc biệt khuyên cách tiếp cận này nói chung thay vì vượt qua thông số thứ 3 trong 'gửi'. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-appluggest

Đối với những bạn sử dụng AngularUI Router thay vì ngRoute có thể sử dụng đoạn mã sau để theo dõi lượt xem trang.

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

Các nhà phát triển tạo Ứng dụng Trang đơn có thể sử dụng autotrack , bao gồm plugin urlChangeTracker xử lý tất cả các cân nhắc quan trọng được liệt kê trong hướng dẫn này cho bạn. Xem tài liệu autotrack để biết hướng dẫn sử dụng và cài đặt.

Tôi đang sử dụng AngluarJS ở chế độ html5. Tôi tìm thấy giải pháp sau đây là đáng tin cậy nhất:

Sử dụng thư viện phân tích góc-google . Khởi tạo nó với một cái gì đó như:

//Do this in module that is always initialized on your webapp    
angular.module('core').config(["AnalyticsProvider",
  function (AnalyticsProvider) {
    AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);

    //Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
    AnalyticsProvider.ignoreFirstPageLoad(true);
  }
]);

Sau đó, thêm trình nghe trên $ stateChangeSuccess 'và gửi sự kiện trackPage.

angular.module('core').run(['$rootScope', '$location', 'Analytics', 
    function($rootScope, $location, Analytics) {
        $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
            try {
                Analytics.trackPage($location.url());
            }
            catch(err) {
              //user browser is disabling tracking
            }
        });
    }
]);

Bất cứ lúc nào, khi người dùng của bạn bị vô hiệu hóa, bạn có thể tiêm Analytics ở đó và thực hiện cuộc gọi:

Analytics.set('&uid', user.id);

Tôi đang sử dụng ui-router và mã của tôi trông như thế này:

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
  /* Google analytics */
  var path = toState.url;
  for(var i in toParams){
    path = path.replace(':' + i, toParams[i]);
  }
  /* global ga */
  ga('send', 'pageview', path);
});

Bằng cách này tôi có thể theo dõi các trạng thái khác nhau. Có lẽ ai đó sẽ tìm thấy nó hữu ích.

Cá nhân tôi muốn thiết lập phân tích của mình với URL mẫu thay vì đường dẫn hiện tại. Điều này chủ yếu là do ứng dụng của tôi có nhiều đường dẫn tùy chỉnh như message/:idhoặc profile/:id. Nếu tôi gửi những đường dẫn này, tôi sẽ có rất nhiều trang được xem trong phân tích, sẽ rất khó để kiểm tra xem người dùng trang nào đang truy cập nhiều nhất.

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

Bây giờ tôi có được lượt xem trang sạch trong các phân tích của mình, chẳng hạn như user-profile.htmlvà message.htmlthay vì nhiều trang đang profile/1, profile/2và profile/3. Bây giờ tôi có thể xử lý các báo cáo để xem có bao nhiêu người đang xem hồ sơ người dùng.

Nếu bất cứ ai phản đối lý do tại sao điều này là thực tiễn tồi trong phân tích, tôi sẽ rất vui khi nghe về nó. Khá mới khi sử dụng Google Analytics, vì vậy đừng quá chắc chắn liệu đây có phải là cách tiếp cận tốt nhất hay không.

Tôi đề nghị sử dụng thư viện phân tích Phân đoạn và làm theo hướng dẫn khởi động nhanh góc của chúng tôi . Bạn sẽ có thể theo dõi lượt truy cập trang và theo dõi hành động của người dùng bằng một API duy nhất. Nếu bạn có một SPA, bạn có thể cho phép RouterOutletthành phần xử lý khi trang hiển thị và sử dụng ngOnInitđể gọi pagecác cuộc gọi. Ví dụ dưới đây cho thấy một cách bạn có thể làm điều này:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

Tôi là người duy trì https://github.com/seributionio/analytics-angular . Với Phân đoạn, bạn sẽ có thể bật và tắt các điểm đến khác nhau bằng cách bật công tắc nếu bạn muốn thử nhiều công cụ phân tích (chúng tôi hỗ trợ hơn 250 điểm đến) mà không phải viết thêm bất kỳ mã nào. 🙂

Hợp nhất nhiều hơn với câu trả lời của Pedro Lopez,

Tôi đã thêm phần này vào mô-đun ngGoogleAnalytis của mình (mà tôi sử dụng lại trong nhiều ứng dụng):

var base = $('base').attr('href').replace(/\/$/, "");

trong trường hợp này, tôi có một thẻ trong liên kết chỉ mục của mình:

  <base href="/store/">

thật hữu ích khi sử dụng chế độ html5 trên angular.js v1.3

(loại bỏ lệnh gọi hàm thay thế () nếu thẻ cơ sở của bạn không kết thúc bằng dấu gạch chéo /)

angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
    function($rootScope, $location, $window) {
      $rootScope.$on('$routeChangeSuccess',
        function(event) {
          if (!$window.ga) { return; }
          var base = $('base').attr('href').replace(/\/$/, "");

          $window.ga('send', 'pageview', {
            page: base + $location.path()
          });
        }
      );
    }
  ]);

Nếu bạn đang tìm kiếm toàn quyền kiểm soát mã theo dõi mới của Google Analytics, bạn có thể sử dụng Angular-GA của riêng tôi .

Nó gacó sẵn thông qua tiêm, vì vậy nó dễ dàng để kiểm tra. Nó không làm bất kỳ phép thuật nào, ngoài việc thiết lập đường dẫn trên mỗi tuyến đường. Bạn vẫn phải gửi số lần xem trang như ở đây.

app.run(function ($rootScope, $location, ga) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview');
    });
});

Bổ sung có một lệnh gacho phép liên kết nhiều chức năng phân tích với các sự kiện, như thế này:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>