DTM implementation on a single page (AngularJS) site.

[paul_volk]

Hey Community,

Does anyone run an AngularJS (or similar single page experience) site with Adobe Analytics implemented via DTM. I'd like a good example to base my implementation on. If you have any documentation or best practices to share regarding DTM and angularJS please also let me know. Thanks in advance!

[Ben_Bytheway · Accepted solution]

Hey Paul,

I don't have any documentation or best practices, but we have done a little bit of tracking with angular and this has come in handy for "page views":

http://michalostruszka.pl/blog/2013/09/24/angularjs-in-browsers-console/

In other words, if you want to hook into a view change event with angular, you could do something like this:

$('appElement').scope().$root.$on('$locationChangeSuccess', function () { console.log(window.location.href); // can use this for page name //s.t(); or s.tl(...); or fire a "direct rule" in DTM });

There are other things you can do from there of course like listening/watching:

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

And you can use DTM's selectors to do other event based rules as well.

That is the little advice I can give.  :)

[paul_volk]

Thanks bbythewa! I'm going to give this a shot and will report back when I have some time this week to work on this. It seems this question is coming up a lot, just in the past week. Your help is greatly appreciated :)

[Harsh_Kabra]

Hey Paul,

From my personal experience, implementing Adobe Analytics via DTM on a single page app is always little 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 a JS expert so my solution would be more focused on Analytics Implementation workarounds than the Single Page App frameworks like Backbone.js etc

Below code might be a good example in Angular JS 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 ®