Google AdSense in AngularJS partials - Why does changing views display ads in the wrong sizes?

Question

I have an AngularJS application in production approved by Google AdSense. This application updates an ng-view element with partial templates from a few different link clicks. I am using two different ad sizes one box and another leaderboard.

The ads seem to display appropriately on initial page load but upon changing the view the following happens:

Adsense is loading a square ad into the iframe sized/shaped for a leaderboard, and the result is a nasty 'clipping' of the ad content. This effect also happens in reverse, leaderboard ads load into square sized iframes with a similar clipping effect.

I am utilizing the standard ng-directive approach the internet seems to deem the norm for populating divs with google adsense content. please find the javascript here:

app.directive('myAdSense', function() {
    return {
        restrict: 'A',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        link: function ($scope, element, attrs) {}
    }
});

and one html example from template partials here:

<div data-my-ad-sense>
    <!-- Display Partial Leaderboard -->
    <ins class="adsbygoogle"
        style="display:inline-block;width:728px;height:90px;float:right;"
        data-ad-client="ca-pub-11111111111"
        data-ad-slot="11111111"></ins>
    <script>
        try{
          (adsbygoogle = window.adsbygoogle || []).push({});
        }catch(ex){}
    </script>
</div>

When accessing any particular view directly (with routing) the ads all appear fine, but after clicking through the application this improper ad sizing is a nearly 100% occurrence. I've searched google, the adsense help forum and adsense faq without finding the cause or solution.

Why does changing views display ads in the wrong sizes? How can I stop this sizing phenomenon?

thanks in advance - sorry for the wall of text

Answer 1

From your description, it looks very much like there is some inconsistency in the build sequence of your included views. This seems even more likely when considering your statement, that the error occurs almost every time you do a route change from within your app.

I'm not very experienced with the inner workings of the AdSense SDK, but I'd try to execute the try .. catch statement (or whatever initial call is necessary to set up a ad container) in the body of your link function, because the link function call in AngularJS reliably happens only after everything has been compiled and added to the DOM. I'd generally have all scripted logic in my directives, especially when we're talking ng-view partials.

On top of that, I'd further investigate the possibilities of asynchronously initialising single ad containers (https://developers.google.com/adsense/).

This may sound a little like fishing in muddy waters to you, but that's what I'd do anyways.