Ads do not refresh on route change

[Soviut]

I have a big box ad on each sub page of my site. The ad displays properly on initial load but on route changes the ad won't reload and the area remains blank. My workaround is to call refreshAds() on $routeChangeSuccess events.

    $rootScope.$on '$routeChangeSuccess', (e, newRoute, oldRoute) ->
        DoubleClick.refreshAds 'div-gpt-ad-1234567890'

[ianmurrays]

Are you triggering the reload on each page change?— Ian Murray S.

On Tue, Sep 30, 2014 at 7:38 PM, Soviut [email protected] wrote:

I have a big box ad on each sub page of my site. The ad displays properly on initial load but on route changes the ad won't reload and the area remains blank.

Reply to this email directly or view it on GitHub: https://github.com/ianmurrays/ngDfp/issues/3

[Soviut]

Yes, see my code snippet above. On every route change I'm calling the .refreshAds() after every $routeChangeSuccess event. It doesn't work very well though if the previous and next pages have ads. This is because I've got page transitions between ng-views and this means that for a brief time, there are two separate pages visible at once during the transition, each with an ad with the same id.

[ianmurrays]

Oh, yeah the transition is definitely to blame. The only way to fix it I think, would be to find a way to catch the animation end and then refresh, making sure there's only one ad of the same id.

[Soviut]

Yeah, I'm having to add a 2000 millisecond timeout, far longer than the transition time, and even then it's temperamental.

[Soviut]

So my currently functional solution is to clear the slot on route change start:

    $rootScope.$on '$routeChangeStart', ->
        slotPromise = DoubleClick.getSlot 'div-gpt-ad-1234567890'
        slotPromise.then (slot) ->
            googletag.pubads().clear [slot]

Then refresh it on route change it on success with a timeout to ensure transitions have had time to complete:

    $rootScope.$on '$routeChangeSuccess', (e, newRoute, oldRoute) ->
        $timeout ->
            DoubleClick.refreshAds 'div-gpt-ad-1234567890'
        , 2000

[ianmurrays]

I guess that's the best solution there is for this problem

[guyyosan]

@Soviut I guess that's coffee script Could you maybe explain how would you do it in pure js using ui-router instead?

[ianmurrays]

@guyyosan that would translate to

$rootScope.$on('$stateChangeStart', function () {
  DoubleClick
    .getSlot('div-gpt-ad-1234567890')
    .then(function (slot) {
      googletag.pubads().clear([slot]);
    });
});

and

$rootScope.$on('$stateChangeSuccess', function () {
  $timeout(function () {
    DoubleClick.refreshAds('div-gpt-ad-1234567890');
  }, 2000);
});

[guyyosan]

@ianmurrays does it have to be in the $rootScope? and if it must, where do I put it... controller or run? what if i have multiple slots?

[ianmurrays]

Yes I believe it has to observe the $rootScope, and the .run() call makes more sense to me at least.

[guyyosan]

@ianmurrays It's a dumb question, guess im dumb... :( what's the slot? .defineSlot('/123456/blogbox11233', [[300, 250]], 'homePage1')

i guess it's homePage1

[ianmurrays]

in your example homePage1 would be the slot

[guyyosan]

@ianmurrays First thanks a lot for this module it saved my life.

second I erased this from the module:

    var googletag     = googletag || {};
    googletag.cmd = googletag.cmd || [];

and inserted it in my app.js like this:

(function() {
    'use strict';

var googletag     = googletag || {};
googletag.cmd = googletag.cmd || [];
var app = angular ...

btw, If I want multiple ads would this be alright:

rootScope.$on('$stateChangeStart', function(){
                $rootScope.state_loading = true;
                DoubleClick
                    .getSlot('homePage1')
                    .then(function (slot) {
                        googletag.pubads().clear([slot]);
                    })
                    .getSlot('homePage2')
                    .then(function (slot) {
                        googletag.pubads().clear([slot]);
                    })
                    .getSlot('homePage3')
                    .then(function (slot) {
                        googletag.pubads().clear([slot]);
                    });
            });

            $rootScope.$on('$stateChangeSuccess', function(){
                $rootScope.state_loading = false;

                $timeout(function() {
                    DoubleClick.refreshAds('homePage1', 'homePage2', 'homePage3');
                }, 2000);
            });

[guyyosan]

@ianmurrays this is what i get:

n.getSlot(...).then(...).getSlot is not a function @http://localhost/dist/bundle-ctrl.js:1:4187 lf/this.$get</n.prototype.$broadcast@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:136:43 b/E.transitionTo@http://localhost/dist/bundle-mdl.js:1:31202 b/E.go@http://localhost/dist/bundle-mdl.js:1:29817 P/<.link/</i<@http://localhost/dist/bundle-mdl.js:2:6255 f/m<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:146:220 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:43:93 Kf/l.defer/c<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:45:491 angular.min.js:107:207

Error: e.pubads is not a function @http://localhost/dist/bundle-ctrl.js:1:4227 f/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:119:113 lf/this.$get</n.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:217 lf/this.$get</n.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:130:225 lf/this.$get</n.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:510 f/m<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:146:298 e@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:43:93 Kf/l.defer/c<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:45:491

[ianmurrays]

getSlot() isn't chainable. You might have luck dividing those calls into multiple.