Get Adobe DTM to work with page load rules in Angular - angularjs

Question

Basically, I'm trying to find a way to efficiently fire tags using Adobe DTM in Angular without having to change the page. We have an exceptionally long elevation cycle so having to add _satelitte.track() to a page to get a new tag to fire would severly limit the benefit of using DTM. I'm primarily concerned this would be necessary in the case that I'd want to only fire tags in certain situations so I wouldn't be able to use the already existing rule in place.
I believe that _satellite.pageBottom() is what tells the satellite object that a page load has occured. I'm attempting to call _satellite.pageBottom() to mimic a page load any time the route changes.
.config(function($routeProvider, $httpProvider){
$routeProvider.when('/one', {
templateUrl: 'view1.html',
controller: 'Data1Controller'
}).when('/two', {
templateUrl: 'view2.html',
controller: 'Data2Controller'
}).when('/three', {
templateUrl: 'view1.html',
controller: 'Data3Controller'
}).when('/four', {
templateUrl: 'view2.html',
controller: 'Data4Controller'
}).when('/five', {
templateUrl: 'form.html',
controller: 'FormController'
}).otherwise({
controller: "Default",
templateUrl: 'default.html'
});
$httpProvider.interceptors.push('CacheBusterInterceptor');
}).run(function($rootScope){
$rootScope.$on('$routeChangeStart', function(){
_satellite.pageBottom();
});
});
This has worked well for me in other situations where I want to mock a page load but it's not working with the _satellite.pageBottom() call and I am at a loss how I might get DTM to work in Angular without using the direct call rules. Any advice on getting either this way to work or another work around to having to make changes to the code on the page?
Thanks,
Mike

Answer 1

I've used a generic _satellite.track('pageLoad') direct call rule to work around single page app challenges. You don't have to change the page code that way. As long as the variables you need are accessible by DTM, you can run all your logic in the tag manager.
Edit for dynamic direct call rule:
$rootScope.$on('$routeChangeSuccess',function(e, curr, pre){
_satellite.track(current.$$route.originalPath);
})
or if you want to add a pagename in your $routeProvider config:
$routeProvider.when('/',{pageName:'Fantastic Home Page',controller:...,templateUrl:...}
$rootScope.$on('$routeChangeSuccess',function(e, curr, pre){
_satellite.track(current.pageName || 'whoops no pageName');
})

Answer 2

Adobe DTM allows for firing rules based on popstate or hashtag change. The best approach is to setup your rules based on these events and if your app supports deep linking then also setup page load rules based on the deep link URL's.