DTM not capturing PageName in Angular 1.x app

[#1]

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.

[#2 · Accepted solution]

Hello Friend,

From my personal experience, implementing Adobe Analytics via DTM on a single page app is always TRICKY. This implementation would require a lot of quick and dirty fixes, especially when you have a complex implementation with a lot of customization.

Before I suggest the possible fix to your problem, disclaimer, I am NOT an Angular JS expert so my solution would be more focused on Analytics Implementation workarounds than the Angular JS fixes

Try the updated code below (highlighted in BOLD) to capture the Page Views (not the literal page view but view changes):

$rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){

    var currentURL =url.toLowerCase().toString();

    var dataLayer={};

    if(currentURL.includes('ABC')){

     dataLayer= {

            'pagename': 'ABC View'     

        }

_satellite.pageBottom();

       }

else if(currentURL.includes('XYZ')){

       dataLayer = {

            'pagename': 'XYZ View'          

        }

_satellite.pageBottom();

}

Hope this helps and Don't forget to like this comment

Thanks,

Harsh Kabra |  Adobe Certified Expert: Analytics Architect ®

[#3]

@harsh, thank you. I got it working thriugh a Direct Call Rule rather than Page Load role. But thanks I will try your way too.

I have 2-3 quick questions if you can help me with. Is it possible for you to have a quick call, may be over skype ?

It will be great help

[#4]

Can anybody help me with this.

Implementing DTM for Angular Single Page application