Ads do not refresh on route change about ngdfp HOT 15 OPEN

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:
#3

from ngdfp.

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.

from ngdfp.

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.

from ngdfp.

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

from ngdfp.

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

from ngdfp.

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

from ngdfp.

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

from ngdfp.

@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);
});

from ngdfp.

@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?

from ngdfp.

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

from ngdfp.

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

i guess it's homePage1

from ngdfp.

in your example homePage1 would be the slot

from ngdfp.

@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);
            });

from ngdfp.

@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

from ngdfp.

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

from ngdfp.