Відстеження переглядів сторінок Google Analytics за допомогою AngularJS

Я налаштовую нову програму, використовуючи AngularJS як передній. Все на стороні клієнта робиться за допомогою pushstate 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() });
  });
}

Коли завантажується новий вид AngularJS, Google 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 не запускатиме локальний хост. Тож якщо ви тестуєте на 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 на стороні клієнта.

Увімкніть вбудовані змінні Історії та створіть тригер для запуску події на основі змін історії.

У ваших index.html, скопіювати і вставити фрагмент га , але видалити рядок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-роутер, ви можете підписатись на подію $ stateChangeSuccess так:

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

Повний робочий приклад дивіться у цій публікації в блозі

Використовуйте налаштування GA, щоб гарантувати, що маршрути підбираються для аналітики 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 замість 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
            }
        });
    }
]);

У будь-який момент, коли ви користуєтеся своїм користувачем, ви можете ввести там 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

(видаліть виклик заміни (), якщо ваш базовий тег не закінчується косою рисою /)

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доступним за допомогою ін'єкцій, тому його легко протестувати. Це не робить ніякої магії, крім встановлення шляху на кожному маршруті Change. Ви все одно повинні надіслати перегляд сторінки, як тут.

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>