javascript - Google Analytics 不会使用 ui 路由器跟踪每个页面

Question

已编辑(2018 年 5 月 25 日):我仍然没有找到解决方案来完成这项工作。我使用基于 https://dev.to/jordanirabor/using-google-analytics-with-angular-930 的代码

这是我第一次使用 GA，我希望你能帮助我完成这项工作。

我正在将 Angular SPA 与 UI 路由器结合使用，并在 Google Analytics 上创建了一个跟踪 ID(我在下面的代码中使用了假跟踪 ID)。它仅适用于首页 index.html正如我在 GA 上测试的那样，但它不会跟踪其他路由页面。看来run当我在 GA 上测试每个页面时，带有跟踪 ID 的 block 没有执行任何操作。我不确定我错过了什么。

还有<div ui-view></div>它不会在 {{ title }} 内显示文本这告诉我关于 app-test.js 的一些事情不工作。

索引.html -

<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', 'https://www.google-analytics.com/analytics.js', 'ga');
</script>

应用程序测试.js

myApp.config(['urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider){ 
'use strict';

$urlRouterProvider.otherwise('/main');
$stateProvider
    .state("main", {
    url: "/main",
    templateUrl: "main.html",
    controller: function ($rootScope, $scope) {
                $rootScope.title = 'SCIS, Sorenson Community Interpreting Services, Interpreting, interpreter, interpreters, Sorenson Communication, SVRS';
                $rootScope.metaDescription = 'Sorenson Community Interpreting Services for over 15 years, Interpreting for medical,Interpreting for business, Interpreting for legal, Interpreting for educational,VRI, Video Remote Interpreting';
                setCurrentNavItem('main'); 
                $scope.title = 'This is the homepage'
    } 
    }).state("request", {
    url: "/request",
    templateUrl: "views/request-interpreter.html",
    controller: function ($rootScope, $scope) {
                $rootScope.title = 'text here';
                $rootScope.metaDescription = 'text here';
                setCurrentNavItem('request');
                $scope.title = 'This is the request interpreting page'
            }
....

运行 block -

app.run(['$location', '$window','$transitions', function($location, $window, $transitions){
    $window.ga('create', 'UA-2121548-23', 'auto');
    $transitions.onSuccess({}, function(){
          $window.ga('send', 'pageview', $location.path());
    });
}])

Answer 1

这是具有 SPA 的 Google Analytics(分析)的本质，但好消息是您可以手动调用相同的方法来模拟在不同页面之间导航。我们所做的(在确保跟踪器已实例化之后)是使用 $stateChangeSuccess 事件将页面 View 发送到 GA:

如果使用 TypeScript:

// wire up the event (we use controller as syntax and typescript - hence the types)
this.$scope.$on('$stateChangeSuccess', 
    (event: ng.IAngularEvent, 
     toState: ng.ui.IState,
     toParams: any, 
     fromState: ng.ui.IState, 
     fromParams: any) => {
    event.preventDefault();
    this.$window.ga('set', 'page', this.$location.path());
    this.$window.ga('send', 'pageview');
});

如果不使用 TypeScript:

// wire up the event (we use controller as syntax)
this.$scope.$on('$stateChangeSuccess', 
    (event, 
     toState,
     toParams, 
     fromState, 
     fromParams) => {
    event.preventDefault();
    this.$window.ga('set', 'page', this.$location.path());
    this.$window.ga('send', 'pageview');
});

更新:我们还调用了一段代码来设置跟踪器。您需要 GA 帐户中的 UA-... 跟踪 ID。您可以将其放入 .run() 方法中:

this.$window.ga('create', <replace this with your UA-*** tracking ID>, 'auto');

如果您不使用 Controller 作为语法，只需删除 this.。