AngularJS and Adsense ads not loaded on route change (up to 3 ads for the entire app)

Question

I have an Angular site with AdSense and it will load Ads on first load or refresh, but if I browse to another route, it doesn't load the Ads. Here is the directive I am using:

.directive('googleAdSense', function () {
return {
    restrict: 'A',
    replace: true,
    templateUrl: "../../templates/googleads.html",
    controller: function () {
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
};
});

Here is where I place my script tag in the head of the index file. All views load in/out of the index file via ng-view:

<!-- Google Adsense -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Here is the usage:

<div data-google-ad-sense></div>

How can I resolve this so it loads the Ads once I go to another View?

Update: After further testing, it only loads the first 3 ads, which is consistent with Google preventing more than 3 ads per page.... the problem is that I have multiple views that aren't being treated as "pages". I am wondering if HTML5 modes handling of history has anything to do with this...

Answer 1

I've researched this for the last 8h and so far the best solution, or should I say workaround, I could find has been a derivative of answer Angular.js & Adsense.

I'm using ui-router and in my app.js I've added the following code:

  .run(function ($rootScope, $window) {
    // delete all the google related variables before you change the url
    $rootScope.$on('$locationChangeStart', function () {
      Object.keys($window).filter(function(k) { return k.indexOf('google') >= 0 }).forEach(
        function(key) {
          delete($window[key]);
        }
      );
    });
  })

This deletes all google related variables before changing url, not ideal, but it does allow to load ads on ng-views. And I have no idea if this is valid per the adsense terms.

Other failed approach - DOM

Before giving up and resorting to this I've tried manipulating the DOM so I would load the ad once and then detach / append the ad as I switched views. Unfortunately it appears that appending the ad to the DOM triggers an ad request and the party ends after the 3rd one. The directive code I've created for this is in https://gist.github.com/dmarcelino/3f83371d120b9600eda3.

From reading https://productforums.google.com/forum/#!topic/adsense/cl6eonjsbF0 I get the impression Google really doesn't want ads to be shown in partial views...

Answer 2

Waiting for a long time and continuously searching on net, I have found a solution with fully working demonstration. Leonard Teo posted a nice comment on google groups at May 29. He have demonstrate live solution of this problem on github. He claimed that the solution is by Google folks are helped him.

Create a google-ad directive and pass and random value in the the ad-region attribute like below.

window.app = angular.module('app', ['ngRoute']);

window.app.directive('googleAd', [
  '$timeout', function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        return $timeout(function() {
          var adsbygoogle, html, rand;
          rand = Math.random();
          html = "<ins class='adsbygoogle' style='display:inline-block;width:300px;height:250px' data-ad-client='ca-pub-xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxx' data-ad-region='page-" + rand + "'></ins>";
          $(element).append(html);
          return (adsbygoogle = window.adsbygoogle || []).push({});
        });
      }
    };
  }
]);

Then use google-ad directive in your view template.

<div google-ad=""></div>

Answer 3

Try use

<div google-ad-sense></div>

Answer 4

See here for reference (https://productforums.google.com/forum/#!msg/adsense/Ya498_sUlBE/hTWj64zROoEJ), but moving the script tags into the index.html worked for me. Basically, I use an ng-include for the top menu, have the script tag for the top ad, then the ng-view, followed by the final ad.