Я устанавливаю новое приложение, используя AngularJS в качестве внешнего интерфейса. Все на стороне клиента сделано с push5tete HTML5, и я хотел бы иметь возможность отслеживать просмотры моих страниц в Google Analytics.
221
Я устанавливаю новое приложение, используя AngularJS в качестве внешнего интерфейса. Все на стороне клиента сделано с push5tete HTML5, и я хотел бы иметь возможность отслеживать просмотры моих страниц в Google Analytics.
Ответы:
Если вы используете
ng-view
приложение Angular, вы можете прослушать$viewContentLoaded
событие и отправить событие отслеживания в Google Analytics.Предполагая, что вы установили свой код отслеживания в главном файле index.html с именем,
var _gaq
а MyCtrl - это то, что вы определили вng-controller
директиве.ОБНОВЛЕНИЕ: для новой версии Google-Analytics используйте эту
источник
_trackPageview
а не_trackPageView
... потратил 10 минут чесать голову :)$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
гарантирует, что оно не будет удалено каким-либо другим событием или изменением DOM, а использованиеrouteChangeSuccess
будет срабатывать каждый раз, когда меняется адресная строка, а не просто когда вы меняете исходный шаблон представления. Имеет ли это смысл?$window.ga('send', 'pageview', { page: $location.path() });
вместо$window._gaq...
части. Кроме того, вы можете удалитьga('send', 'pageview');
исходный код GA, чтобы избежать дублирования при первом посещении страницы.При загрузке нового представления
AngularJS
Google Analytics не учитывает его как загрузку новой страницы. К счастью, есть способ вручную указать GA зарегистрировать URL как новый просмотр страницы._gaq.push(['_trackPageview', '<url>']);
будет делать эту работу, но как связать это с AngularJS?Вот сервис, который вы могли бы использовать:
Когда вы определяете свой угловой модуль, включите модуль аналитики следующим образом:
ОБНОВЛЕНИЕ :
Вам следует использовать новый универсальный код отслеживания Google Analytics с:
источник
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
Это позволит использоватьgoogleAnalytics.track();
в вашей app.run () функцияисточник
app.run(["$rootScope", "$location", function(...
Просто быстрое дополнение. Если вы используете новый analytics.js, то:
Кроме того, один совет заключается в том, что Google Analytics не будет срабатывать на localhost. Так что, если вы тестируете на localhost, используйте следующее вместо создания по умолчанию ( полная документация )
источник
$window
для доступа к окну (ga
скорее всего, один внутри Angularundefined
). Кроме того, вы можете удалитьga('send', 'pageview');
исходный код GA, чтобы избежать дублирования при первом посещении страницы.$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
Я создал сервис + фильтр, который может помочь вам, ребята, и, возможно, также с некоторыми другими провайдерами, если вы решите добавить их в будущем.
Проверьте https://github.com/mgonto/angularytics и дайте мне знать, как это работает для вас.
источник
Объединение ответов wynnwu и dpineda было тем, что мне помогло.
Задание третьего параметра в качестве объекта (вместо просто $ location.path ()) и использование $ routeChangeSuccess вместо $ stateChangeSuccess сделали свое дело.
Надеюсь это поможет.
источник
Я создал простой пример на GitHub, используя вышеуказанный подход.
https://github.com/isamuelson/angularjs-googleanalytics
источник
/account/:accountId
ака путь,http://somesite.com/account/123
он теперь сообщит путь как/account?accountId=123
Лучший способ сделать это - использовать Менеджер тегов Google для запуска ваших тегов Google Analytics на основе прослушивателей истории. Они встроены в интерфейс GTM и легко позволяют отслеживать взаимодействия HTML5 на стороне клиента.
Включите встроенные переменные History и создайте триггер для запуска события на основе изменений истории.
источник
В вашем
index.html
, скопируйте и вставьте фрагмент ga, но удалите строкуga('send', 'pageview');
Я хотел бы дать ему собственный заводской файл
my-google-analytics.js
с самоинъекцией:источник
page
текущий путь, а затем отправляете его какpageview
? Какая разница в том, чтобы делать это так, а не просто$window.ga('send', 'pageview', {page: $location.url()});
?Я обнаружил, что
gtag()
функция работает, а неga()
функция.В файле index.html, в
<head>
разделе:В коде AngularJS:
Замените
TrackingId
своим собственным идентификатором отслеживания.источник
Если кто-то хочет реализовать с помощью директив, тогда, идентифицируйте (или создайте) div в index.html (только под тегом body или на том же уровне DOM)
и затем добавьте следующий код в директиву
источник
Если вы используете ui-router, вы можете подписаться на событие $ stateChangeSuccess следующим образом:
Полный рабочий пример см. В этом блоге
источник
Используйте GA 'set', чтобы убедиться, что маршруты выбраны для аналитики Google в реальном времени. В противном случае последующие вызовы GA не будут отображаться на панели реального времени.
Google настоятельно рекомендует этот подход, как правило, вместо передачи 3-го параметра в «отправить». https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
источник
Для тех из вас, кто использует AngularUI Router вместо ngRoute, можно использовать следующий код для отслеживания просмотров страниц.
источник
Разработчики , создающие Single страница Приложения могут использовать AutoTrack , которая включает в себя urlChangeTracker плагина , который обрабатывает все из важных соображений , указанных в данном руководстве для вас. См. Документацию по автодорожке для инструкций по использованию и установке.
источник
Я использую AngluarJS в режиме HTML5. Я нашел следующее решение как наиболее надежное:
Используйте библиотеку angular-google-analytics . Инициализируйте это чем-то вроде:
После этого добавьте слушатель в $ stateChangeSuccess 'и отправьте событие trackPage.
В любой момент, когда вы инициализировали своего пользователя, вы можете ввести Google Analytics и сделать звонок:
источник
Я использую UI-маршрутизатор, и мой код выглядит так:
Таким образом, я могу отслеживать разные состояния. Может быть, кто-то найдет это полезным.
источник
Мне лично нравится настраивать мою аналитику с URL шаблона вместо текущего пути. Это происходит главным образом потому, что в моем приложении много пользовательских путей, таких как
message/:id
илиprofile/:id
. Если бы я отправил эти пути, я бы просмотрел так много страниц в аналитике, что было бы слишком сложно определить, какие пользователи посещают больше всего.Теперь у меня есть чистые просмотры страниц в моей аналитике, такие как
user-profile.html
иmessage.html
вместо многих страницprofile/1
,profile/2
иprofile/3
. Теперь я могу обрабатывать отчеты, чтобы увидеть, сколько людей просматривают профили пользователей.Если у кого-то есть возражения по поводу того, почему это плохая практика в аналитике, я был бы более чем рад услышать об этом. Совершенно новый для использования Google Analytics, так что не слишком уверен, что это лучший подход или нет.
источник
Я предлагаю использовать аналитическую библиотеку сегментов и следовать нашему краткому руководству по Angular . Вы сможете отслеживать посещения страниц и отслеживать действия пользователей с помощью одного API. Если у вас есть SPA, вы можете разрешить
RouterOutlet
компоненту обрабатывать время отрисовки страницы и использовать егоngOnInit
для вызоваpage
вызовов. В приведенном ниже примере показан один способ сделать это:Я поддерживаю https://github.com/segmentio/analytics-angular . С помощью сегмента вы сможете включать и выключать различные пункты назначения одним щелчком переключателя, если вы заинтересованы в использовании нескольких аналитических инструментов (мы поддерживаем более 250 направлений) без необходимости писать какой-либо дополнительный код. 🙂
источник
Слияние еще больше с ответом Педро Лопеса,
Я добавил это в свой модуль ngGoogleAnalytis (который я использую во многих приложениях):
в этом случае у меня есть тег в моей индексной ссылке:
это полезно при использовании режима html5 на angular.js v1.3
(удалите вызов функции replace (), если ваш базовый тег не заканчивается косой чертой /)
источник
Если вы ищете полный контроль над новым кодом отслеживания Google Analytics, вы можете использовать мой собственный Angular-GA .
Он
ga
доступен через инъекцию, поэтому его легко проверить. Это не делает никакой магии, кроме установки пути на каждом routeChange. Вы все еще должны отправить просмотр страницы, как здесь.Кроме того, есть директива,
ga
которая позволяет привязывать несколько аналитических функций к событиям, например:источник