Google Analytics не будет отслеживать каждую страницу с помощью маршрутизатора пользовательского интерфейса - PullRequest
Новая
       10

Google Analytics не будет отслеживать каждую страницу с помощью маршрутизатора пользовательского интерфейса

0 голосов
/ 22 мая 2018

РЕДАКТИРОВАНИЕ (25/05/2018): У меня до сих пор нет решения, чтобы сделать эту работу.Я использую код, основанный на https://dev.to/jordanirabor/using-google-analytics-with-angular-930

Я впервые использую GA, и я надеюсь, что вы поможете мне сделать эту работу.

Я использую Angular SPA с UI-роутером и создал идентификатор отслеживания (я использовал поддельный в коде ниже) в Google Analytics.Он работает только на первой странице index.html, как я тестировал на GA, но он не будет отслеживать другие страницы маршрутизации.Кажется, что блок run с идентификатором отслеживания ничего не делал, когда я был на GA, чтобы проверить каждую страницу.Я не уверен, что мне не хватает.

Также <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>

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

Блок выполнения - 

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 Ответ

0 голосов
/ 22 мая 2018

Это характер Google Analytics со SPA, но хорошая новость заключается в том, что вы можете вручную вызывать одни и те же методы для имитации навигации по разным страницам.Что мы делаем (после проверки того, что трекер был создан) - используем событие $stateChangeSuccess для отправки просмотра страницы в 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');
});

Обновление: Есть еще один фрагмент кода, который мы вызываем для настройки трекера.Вам понадобится UA-... идентификатор отслеживания из вашей учетной записи GA.Вы можете поместить это в ваш .run() метод: 

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

Если вы не используете контроллер в качестве синтаксиса, просто удалите this..

...