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

221

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

dj2
источник
Попробуйте angulartics luisfarzati.github.io/angulartics
Дэвид
2
angulartics не рекомендуется. Используйте angular-google-analytics
webdev5
5
@ webdev5 Вышла новая версия angulartics. Попробуйте это по адресу: angulartics.github.io
Devner

Ответы:

240

Если вы используете 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() });
  });
}
dj2
источник
12
FWIW это должно быть, _trackPageviewа не _trackPageView... потратил 10 минут чесать голову :)
Sajal
123
Я бы использовал $rootScope.$on('$routeChangeSuccess', ...)
медвежонок
5
@DavidRivers Хм, это было какое-то время, но, просто взглянув на этот ответ и мой комментарий, может показаться, что его применение $rootScopeгарантирует, что оно не будет удалено каким-либо другим событием или изменением DOM, а использование routeChangeSuccessбудет срабатывать каждый раз, когда меняется адресная строка, а не просто когда вы меняете исходный шаблон представления. Имеет ли это смысл?
медвежонок
5
@ dg988 во время события $ routeChangeSuccess, вы НЕ можете заранее знать заголовок страницы (который, например, может быть установлен внутри контроллера после того, как он завершит обработку данных из службы RESTful). Таким образом, наедине с URL-адресом страницы Google Analytics будет отслеживать заголовок предыдущей страницы.
Константин Таркус
43
Если вы используете новый скрипт GA, он $window.ga('send', 'pageview', { page: $location.path() });вместо $window._gaq...части. Кроме того, вы можете удалить ga('send', 'pageview');исходный код GA, чтобы избежать дублирования при первом посещении страницы.
CWSpear
57

При загрузке нового представления 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()});
Харалан Добрев
источник
6
Еще одна вещь, на которую следует обратить внимание, это то, что вам нужно включить службу «аналитика» где-нибудь Я сделал мой в app.run.
Nix
Нужно ли это включать в каждый модуль или только в начальное приложение?
designermonkey
2
@Designermonkey Это должно работать, если вы включаете только в свой основной модуль приложения. Если у вас есть полностью независимый модуль, который не требует вашего основного модуля, вам может понадобиться включить его снова. Ура!
Харалан Добрев
Если вы используете сервис, вы должны определить свои функции с помощью ключевого слова this: source . Например, в рамках услуги было бы this.track = function($window.ga('send', 'pageview', {page: $location.url()});Это позволит использовать googleAnalytics.track();в вашей app.run () функция
zcoon
48
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
dpineda
источник
8
Примечание: если вы используете минимизацию / компиляцию, вам нужно указать имена параметров:app.run(["$rootScope", "$location", function(...
dplass
Это решение отлично подходит, если вы не хотите включать код GA в каждый контроллер.
Бриз
1
Не так здорово, если у вас есть асинхронный код, который динамически меняет ваш заголовок, иначе это здорово.
Йохан
40

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

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

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

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
wynnwu
источник
О, чувак, спасибо. Я получал странные ошибки и заметил, что в моем фрагменте даже нет _gaq, хе-хе. Глупый Гугл: обновлять свой код и все такое! Ха - ха.
CWSpear
3
Убедитесь, что вы используете $windowдля доступа к окну ( gaскорее всего, один внутри Angular undefined). Кроме того, вы можете удалить ga('send', 'pageview');исходный код GA, чтобы избежать дублирования при первом посещении страницы.
CWSpear
6
С помощью ui-router вы можете отправлять просмотры страниц следующим образом:$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
pherris
2
Для добавления: Если вы используете параметры поиска в своем приложении, вы можете отслеживать их с помощью$location.url()
Ade
2
Я проголосовал за этот ответ, поскольку использование .path () лучше, чем .url (), потому что обычно вы хотите исключить параметры строки запроса. См .: Ошибка # 2 в конфигурации Google Analytics: запрос строковых переменных
frodo2975
11

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

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

mgonto
источник
10

Объединение ответов 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 сделали свое дело.

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

Педро Лопес
источник
7

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

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

IBootstrap
источник
Я добавил исправление, чтобы лучше сообщить путь. так что теперь, если у вас есть маршрут /account/:accountId ака путь, http://somesite.com/account/123он теперь сообщит путь как/account?accountId=123
IBootstrap
@IBootstrap В чем заключается преимущество размещения параметров маршрута в строке запроса?
Павел Николов
@IBootstrap У меня тот же вопрос, в чем преимущество добавления параметров маршрута в строку запроса?
Дзунг Нгуен
1
Не все маршруты - это разные страницы, и GA рассматривает каждый маршрут как отдельную страницу. Преобразовав маршрут в строку запроса, вы можете игнорировать части строки запроса.
IBootstrap
5

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

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

user2236721
источник
5

В вашем 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
    }
  ]);
ilovett
источник
Мне нравится этот материал для самоинъекции :) Up
Sam Vloeberghs
Просто из любопытства, почему вы устанавливаете pageтекущий путь, а затем отправляете его как pageview? Какая разница в том, чтобы делать это так, а не просто $window.ga('send', 'pageview', {page: $location.url()});?
Fizzix
1
Я не могу вспомнить TBH, но, посмотрев на него, я бы сказал, что он оставляет гибкость для других действий или регистрирует дополнительные материалы в другом месте, и может быть более точным, явно указав ga текущей страницы, так что ga может продолжать функционировать точно, а не ПРОСТО регистрирует просмотр страницы для некоторого «произвольного» URL страницы.
ilovett
Если вы хотите, чтобы в Google работала аналитика в реальном времени, вам нужно сделать «set». Почему, смотрите ссылку на документацию: developers.google.com/analytics/devguides/collection/…
fuzzysearch
Рекомендуется использовать 'set', чтобы все отдельные попадания, отправляемые на одну и ту же страницу (например, событие GA для отслеживания взаимодействия с пользователем), отправлялись с одинаковым значением пути к странице. Ничего общего с аналитикой в ​​реальном времени. см. developers.google.com/analytics/devguides/collection/…
откройте SEO
5

Я обнаружил, что 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своим собственным идентификатором отслеживания.

Брент Уошберн
источник
4

Если кто-то хочет реализовать с помощью директив, тогда, идентифицируйте (или создайте) 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()]);
      });
    }
  };
});
coderman
источник
3

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

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

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

Джейсон
источник
3

Используйте 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

fuzzysearch
источник
3

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

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});
Кевин М
источник
3

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

Абу-Emish
источник
3

Я использую 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);
Малета
источник
2

Я использую 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);
});

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

Миха Эржен
источник
1

Мне лично нравится настраивать мою аналитику с 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, так что не слишком уверен, что это лучший подход или нет.

Fizzix
источник
1

Я предлагаю использовать аналитическую библиотеку сегментов и следовать нашему краткому руководству по 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 направлений) без необходимости писать какой-либо дополнительный код. 🙂

Уильям
источник
0

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

Я добавил это в свой модуль 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()
          });
        }
      );
    }
  ]);
Фелипе Соуза Икетани
источник
-3

Если вы ищете полный контроль над новым кодом отслеживания 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>
Рафал Линдеманн
источник