谷歌Analytics不会使用ui路由器跟踪每个页面

EDITED (5/25/2018): I still haven't got a solution to make this work. I use the code based on https://dev.to/jordanirabor/using-google-analytics-with-angular-930

编辑(5/25/2018):我还没有解决方案。我使用基于https://dev.to/jordanirabor/us- google- analyticswith- angular-930的代码

This is my first time using GA and I hope you can help me make this work.

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

I'm using Angular SPA with UI-router and I created a tracking id (I used the fake one in the code below) on Google Analytics. It works only on the front page index.html as I tested on GA, but it will not track other routing pages. It seems that the run block with the tracking ID is not doing anything when I was on GA to test each page. Im not sure what Im missing.

我在谷歌分析中使用了带角的SPA和UI-router，并创建了一个跟踪id(我使用了下面代码中的伪id)。它只在首页索引上有效。我在GA上测试过的html，但是它不会跟踪其他的路由页面。当我在GA上测试每个页面时，带有跟踪ID的运行块似乎没有做任何事情。我不知道我错过了什么。

Also the <div ui-view></div> it will not display a text inside the {{ title }} and that tells me something on app-test.js is not working.

还有

它不会在{{title}}内显示文本，这告诉我一些关于app-test的事情。js是不工作。

Index.html -

索引。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>

app-test.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'
            }
....

Run 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());
    });
}])

1 个解决方案

#1

This is the nature of Google Analytics with a SPA, but the good news is that you can manually call the same methods to simulate navigating around different pages. What we do (after ensuring that the tracker has been instantiated) is use the $stateChangeSuccess event to send a page view to GA:

这是带SPA的谷歌分析的本质，但好消息是您可以手动调用相同的方法来模拟在不同页面上导航。我们所做的(在确保跟踪器被实例化之后)是使用$stateChangeSuccess事件向GA发送一个页面视图:

If using 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');
});

If not using 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');
});

Update: There is one more piece of code that we call to set up the tracker. You'll need the UA-... tracking ID from your GA account. You can put this in your .run() method:

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

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

If you don't use controller as syntax simply remove the this..

如果不使用controller作为语法，只需删除这个。

#1