Отслеживание просмотров страниц Google Analytics с помощью AngularJS
Я устанавливаю новое приложение, используя AngularJS в качестве внешнего интерфейса. Все на стороне клиента сделано с push5tete HTML5, и я хотел бы иметь возможность отслеживать просмотры моих страниц в Google Analytics.
20 ответов
Если вы используете 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, используя вышеуказанный подход.
В вашем 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 с вашим собственным идентификатором отслеживания.
Лучший способ сделать это - использовать Менеджер тегов Google для запуска ваших тегов Google Analytics на основе прослушивателей истории. Они встроены в интерфейс GTM и легко позволяют отслеживать взаимодействия HTML5 на стороне клиента.
Включите встроенные переменные History и создайте триггер для запуска события на основе изменений истории.
Для тех из вас, кто использует AngularUI Router вместо ngRoute, можно использовать следующий код для отслеживания просмотров страниц.
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
ga('set', 'page', toState.url);
ga('send', 'pageview');
});
});
Если кто-то хочет реализовать с помощью директив, тогда, идентифицируйте (или создайте) 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()]);
});
}
};
});
Разработчики, создающие одностраничные приложения, могут использовать автоматическое отслеживание, которое включает в себя плагин urlChangeTracker, который обрабатывает все важные аспекты, перечисленные в этом руководстве для вас. См. Документацию по автодорожке для инструкций по использованию и установке.
Если вы используете ui-router, вы можете подписаться на событие $stateChangeSuccess следующим образом:
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
Полный рабочий пример см. В этой записи блога.
Я использую AngluarJS в режиме html5. Я нашел следующее решение как наиболее надежное:
Используйте библиотеку https://github.com/revolunet/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);
Используйте 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
Я использую ui-router и мой код выглядит так:
$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);
});
Таким образом, я могу отслеживать разные состояния. Может быть, кто-то найдет это полезным.
Я предлагаю использовать библиотеку аналитики сегмента и следовать нашему краткому руководству по 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 направлений) без необходимости писать какой-либо дополнительный код.
Мне лично нравится настраивать свою аналитику с 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, поэтому не слишком уверен, что это лучший подход или нет.
Слияние еще больше с ответом Педро Лопеса,
Я добавил это в свой модуль 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>