I have my Single Page website written in Angular. It has more than1 view.
I have placed my DTM Header code in Index.html and footer on each individual view.
I am trying to LocationChangeSuccess event as suggested in the example but it is unable to capture PageName Javascript object.
Re: DTM implementation on a single page (AngularJS) site.
Please see my code in main app.js file:
$rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){
var currentURL =url.toLowerCase().toString();
var dataLayer={};
if(currentURL.includes('ABC')){
dataLayer= {
'pagename': 'ABC View'
}
}
else if(currentURL.includes('XYZ')){
dataLayer = {
'pagename': 'XYZ View'
}
}
I than use dataLayer JS object set above in PageLoadRule and set PageView element.
Each view has a seperate Controller. I tried to put dataLayer object on top of each view but that also does not get track however, when I debug using _Satellite.getVar('Page Name') in Chrome Console, surprisingly it shows the value, but Network tab shows undefined.
I want to track Page views and than later some custom info using eVars and Props. Which is the best place to keep these configuration in an Angular 1.x based website.