Google Tag Manager с AngularJS?

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

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

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

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

Источник

5 ответов

Решение

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

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

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

$ местоположение в угловых документах

Модули /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() событие, которое может происходить несколько раз за обновление страницы.

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

  1. Тип дорожки == "Просмотр страницы"
  2. Дополнительные настройки> Базовая конфигурация> Путь к виртуальной странице == '{{virtualUrl}}'
Источник

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

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

и подтолкнуть их к слою данных следующим образом:

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

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

Trigger: Custom Event
Event Name: home-page

... about-page, faq-page и т. д.

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

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

Источник

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

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

Кроме того - я использовал как с GTM, так и с Piwik.

Источник

Не нужно добавлять код.

Сконфигурируйте триггер "изменение истории", он запускается изменениями углового маршрута, добавьте его в качестве триггера к тегу "просмотры страниц".

Источник

Возможный способ сделать это с помощью $window оказание услуг.
Посмотрите на этот ответ, чтобы попробовать, если он работает: отслеживание просмотров страниц Google Analytics с помощью Angular.js
Надеюсь, что это работает.

Источник
Другие вопросы по тегам