Диспетчер тегов Google с помощью AngularJS?

Как использовать GTM с Angular?

Я пытаюсь запустить событие (virtual) pageview, когда я загружаю новый частичный код с помощью этого кода:

dataLayer.push({
    'event' : 'pageview',
    'pageview' : $location.path(),
    'virtualUrl' : $location.path()
 });

Но я не вижу запуск события (я использую расширение отладки Google Analytics Chrome для просмотра запущенных событий).

Ответы

Ответ 1

Я считаю, что расширение Chrome ненадежно. Просто запустите глобальную переменную dataLayer в консоли, чтобы напечатать массив событий. Одним из объектов должно быть ваше событие просмотра страницы.

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

Примечание: мы не просто используем $location.path(), а все в URL-адресе после домена. Что включает в себя .search() и .hash().

$location в документах Angular

модули /analytic.js

(function(window, angular) {
    'use strict';
    angular.module('Analytic.module', ['Analytic.services']).
        run(function($rootScope, $window, $location, GoogleTagManager) {
            $rootScope.$on('$viewContentLoaded', function() {
                var path= $location.path(),
                    absUrl = $location.absUrl(),
                    virtualUrl = absUrl.substring(absUrl.indexOf(path));
                GoogleTagManager.push({ event: 'virtualPageView', virtualUrl: virtualUrl });
            });
        });
})(window, window.angular);

Услуги /analytic.js

(function() {
    angular.module('Analytic.services', []).
        service('GoogleTagManager', function($window) {
            this.push = function(data) {
                try {
                    $window.dataLayer.push(data);
                } catch (e) {}
            };
        });
})();

В GTM

Вам понадобятся {{virtualUrl}} и {{event}} макросы, которые прослушивают переменные dataLayer с тем же именем.

Вам понадобится тег отслеживания событий Google Analytics с правилом увольнения, который срабатывает, когда {{event}} равно "virtualPageView". Убедитесь, что вы удалили правило "Все страницы" по умолчанию, которое запустило его при каждой загрузке страницы. Вместо этого вы хотите, чтобы он выполнялся, когда вы dataLayer.push() событие, которое может произойти несколько раз на обновление страницы.

Тег должен быть настроен с помощью:

  • Тип трека == 'Page View'
  • Дополнительные настройки > Основная конфигурация > Виртуальный путь страницы == '{{virtualUrl}}'

Ответ 2

Я настоятельно рекомендую вам использовать библиотеку angulartics. Я использовал его на нескольких сайтах. Это заставляет вас бегать довольно быстро.

Он включает поддержку виртуальных просмотров страниц и событий из коробки. Он не поддерживает GA eCommerce, но имеет поддержку расширяемости.

Также - я использовал как GTM, так и Piwik.

Ответ 3

Как и в принятом ответе, мы создали более простое и более явное решение с использованием переменной pagename в Javascript в нашем контроллере для нашего одностраничного приложения,

// Note, this may not be how your app works, YMMV
var pagename = $location.path().substr(1,$location.path().length);

и нажмите их в dataLayer следующим образом:

window.dataLayer.push({'event':pagename+'-page'})

Затем в GTM мы добавили триггеры в GTM следующим образом:

Trigger: Custom Event
Event Name: home-page

... about-page, faq-страница и т.д.

Для более сложных приложений angular есть несколько доступных расширений для использования Google Analytics и Диспетчера тегов Google с помощью Angular.

См. Angulartics (который также поддерживает решения для веб-аналитики, отличные от Google Analytics, через свою плагиновую архитектуру) и связанный с ним пакет NPM для GTM.