I find the Chrome extension unreliable.
Simply run the global variable dataLayer
in the console to print the array of events. One of the objects should be your pageview event.
Here is an example of how we are using it:
Note: we're not simply using $location.path()
, instead everything in the url after the domain. Which includes the .search()
& .hash()
.
modules/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);
services/analytic.js
(function() {
angular.module('Analytic.services', []).
service('GoogleTagManager', function($window) {
this.push = function(data) {
try {
$window.dataLayer.push(data);
} catch (e) {}
};
});
})();
In GTM
You'll need {{virtualUrl}}
and {{event}}
Macros which listen for the dataLayer variables of the same name.
You'll need a Google Analytics Event Tracking Tag with a Firing Rule which triggers when {{event}}
equals 'virtualPageView'. Make sure you remove the default 'All Pages' Rule which makes it run on every page load. Instead, you want it to run when you dataLayer.push()
the event, which may happen multiple times per page refresh.
The Tag should be configured with:
- Track Type == 'Page View'
- More Settings > Basic Configuration > Virtual Page Path == '{{virtualUrl}}'