Отслеживание просмотров страниц Google Analytics с помощью AngularJS

Я устанавливаю новое приложение, используя AngularJS в качестве внешнего интерфейса. Все на стороне клиента сделано с push5tete HTML5, и я хотел бы иметь возможность отслеживать просмотры моих страниц в Google Analytics.

Если вы используете ng-viewприложение Angular, вы можете прослушать $viewContentLoadedсобытие и отправить событие отслеживания в Google Analytics.

Предполагая, что вы установили свой код отслеживания в главном файле index.html с именем, var _gaqа MyCtrl - это то, что вы определили в ng-controllerдирективе.

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

ОБНОВЛЕНИЕ: для новой версии Google-Analytics используйте эту

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

При загрузке нового представления AngularJSGoogle Analytics не учитывает его как загрузку новой страницы. К счастью, есть способ вручную указать GA зарегистрировать URL как новый просмотр страницы.

_gaq.push(['_trackPageview', '<url>']); будет делать эту работу, но как связать это с AngularJS?

Вот сервис, который вы могли бы использовать:

(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));

Когда вы определяете свой угловой модуль, включите модуль аналитики следующим образом:

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

ОБНОВЛЕНИЕ :

Вам следует использовать новый универсальный код отслеживания Google Analytics с:

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

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

Просто быстрое дополнение. Если вы используете новый analytics.js, то:

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

Кроме того, один совет заключается в том, что Google Analytics не будет срабатывать на localhost. Так что, если вы тестируете на localhost, используйте следующее вместо создания по умолчанию ( полная документация )

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

Я создал сервис + фильтр, который может помочь вам, ребята, и, возможно, также с некоторыми другими провайдерами, если вы решите добавить их в будущем.

Проверьте https://github.com/mgonto/angularytics и дайте мне знать, как это работает для вас.

Объединение ответов wynnwu и dpineda было тем, что мне помогло.

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

Задание третьего параметра в качестве объекта (вместо просто $ location.path ()) и использование $ routeChangeSuccess вместо $ stateChangeSuccess сделали свое дело.

Надеюсь это поможет.

Я создал простой пример на GitHub, используя вышеуказанный подход.

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

Лучший способ сделать это - использовать Менеджер тегов Google для запуска ваших тегов Google Analytics на основе прослушивателей истории. Они встроены в интерфейс GTM и легко позволяют отслеживать взаимодействия HTML5 на стороне клиента.

Включите встроенные переменные History и создайте триггер для запуска события на основе изменений истории.

В вашем index.html, скопируйте и вставьте фрагмент ga, но удалите строкуga('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>

Я хотел бы дать ему собственный заводской файл my-google-analytics.jsс самоинъекцией:

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

Я обнаружил, что gtag()функция работает, а не ga()функция.

В файле index.html, в <head>разделе:

<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>

В коде AngularJS:

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

Замените TrackingIdсвоим собственным идентификатором отслеживания.

Если кто-то хочет реализовать с помощью директив, тогда, идентифицируйте (или создайте) div в index.html (только под тегом body или на том же уровне DOM)

<div class="google-analytics"/>

и затем добавьте следующий код в директиву

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

Если вы используете ui-router, вы можете подписаться на событие $ stateChangeSuccess следующим образом:

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

Полный рабочий пример см. В этом блоге

Используйте GA 'set', чтобы убедиться, что маршруты выбраны для аналитики Google в реальном времени. В противном случае последующие вызовы GA не будут отображаться на панели реального времени.

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

Google настоятельно рекомендует этот подход, как правило, вместо передачи 3-го параметра в «отправить». https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Для тех из вас, кто использует AngularUI Router вместо ngRoute, можно использовать следующий код для отслеживания просмотров страниц.

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

Разработчики , создающие Single страница Приложения могут использовать AutoTrack , которая включает в себя urlChangeTracker плагина , который обрабатывает все из важных соображений , указанных в данном руководстве для вас. См. Документацию по автодорожке для инструкций по использованию и установке.

Я использую AngluarJS в режиме HTML5. Я нашел следующее решение как наиболее надежное:

Используйте библиотеку angular-google-analytics . Инициализируйте это чем-то вроде:

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

После этого добавьте слушатель в $ stateChangeSuccess 'и отправьте событие 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
            }
        });
    }
]);

В любой момент, когда вы инициализировали своего пользователя, вы можете ввести Google Analytics и сделать звонок:

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

Я использую UI-маршрутизатор, и мой код выглядит так:

$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);
});

Таким образом, я могу отслеживать разные состояния. Может быть, кто-то найдет это полезным.

Мне лично нравится настраивать мою аналитику с URL шаблона вместо текущего пути. Это происходит главным образом потому, что в моем приложении много пользовательских путей, таких как message/:idили profile/:id. Если бы я отправил эти пути, я бы просмотрел так много страниц в аналитике, что было бы слишком сложно определить, какие пользователи посещают больше всего.

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

Теперь у меня есть чистые просмотры страниц в моей аналитике, такие как user-profile.htmlи message.htmlвместо многих страниц profile/1, profile/2иprofile/3 . Теперь я могу обрабатывать отчеты, чтобы увидеть, сколько людей просматривают профили пользователей.

Если у кого-то есть возражения по поводу того, почему это плохая практика в аналитике, я был бы более чем рад услышать об этом. Совершенно новый для использования Google Analytics, так что не слишком уверен, что это лучший подход или нет.

Я предлагаю использовать аналитическую библиотеку сегментов и следовать нашему краткому руководству по Angular . Вы сможете отслеживать посещения страниц и отслеживать действия пользователей с помощью одного API. Если у вас есть SPA, вы можете разрешить RouterOutletкомпоненту обрабатывать время отрисовки страницы и использовать его ngOnInitдля вызова pageвызовов. В приведенном ниже примере показан один способ сделать это:

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

Я поддерживаю https://github.com/segmentio/analytics-angular . С помощью сегмента вы сможете включать и выключать различные пункты назначения одним щелчком переключателя, если вы заинтересованы в использовании нескольких аналитических инструментов (мы поддерживаем более 250 направлений) без необходимости писать какой-либо дополнительный код. 🙂

Слияние еще больше с ответом Педро Лопеса,

Я добавил это в свой модуль ngGoogleAnalytis (который я использую во многих приложениях):

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

в этом случае у меня есть тег в моей индексной ссылке:

  <base href="/store/">

это полезно при использовании режима html5 на angular.js v1.3

(удалите вызов функции replace (), если ваш базовый тег не заканчивается косой чертой /)

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

Если вы ищете полный контроль над новым кодом отслеживания Google Analytics, вы можете использовать мой собственный Angular-GA .

Он gaдоступен через инъекцию, поэтому его легко проверить. Это не делает никакой магии, кроме установки пути на каждом routeChange. Вы все еще должны отправить просмотр страницы, как здесь.

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

Кроме того, есть директива, gaкоторая позволяет привязывать несколько аналитических функций к событиям, например:

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