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...

Any errors in the console? From what I can see here nothing is really obviously wrong, haven't used ad-sense myself though so not sure what all should be involved. — shaunhusain, Apr 17 '15 at 21:57
No shouldn't matter either really, typically I develop with it off in the first place just to make running an app easier until it needs to be deployed but that shouldn't make a difference, if you can recreate the problem in a plnkr and message back I'll check it out if you don't get an answer before then. — shaunhusain, Apr 17 '15 at 22:59
@Kode You ever get it loading more than 3 times? Having the same issue, and don't see a point in creating a duplicate question. — codephobia, May 19 '15 at 21:14
No such luck. I separated my top header from the view so it loads in the index.html page, — Kode, May 19 '15 at 22:31
I'm experiencing the same/similar issue, but for me I can navigate between 5 views before the ads stop showing. When that happens I get an error: `Failed to load resource: the server responded with a status of 400 (Bad Request)`. After that no more ads are shown. Quite frustrating, particularly since Google maintains AngularJS :S — Dário, May 21 '15 at 18:11
I just came across this https://groups.google.com/forum/#!topic/angular/eyVo4XU04uk and the solution some people went with is to put ads on the header of footer, outside ng-view. Not great... :( — Dário, May 21 '15 at 18:32

score 6 · Answer 1 · edited May 23 '17 at 11:48

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...

Now I have another problem :( almost 99% of the times the ads are empty (or displays the backup ad) meaning that Google Adsense can not read my content and match ad for it. (it is my guess) — ehsun7b, May 30 '15 at 15:47
Workaround for the workaround: put a setTimeout surrounding the line of code that pushes the add. I am doing it like this: ```setTimeout(function() { (adsbygoogle = window.adsbygoogle || []).push({}); }, 750);``` It seems to be working for me... I am a bit scared about being banned or something though!! — John Bernardsson, Jul 11 '15 at 20:58

score 4 · Answer 2 · answered Jun 28 '16 at 05:37

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>

[Also can see demo](http://leonardteo.github.io/google-ads-test-angularjs/#/page1) — PARAMANANDA PRADHAN, Jun 28 '16 at 05:45

score 1 · Accepted Answer · answered Apr 22 '15 at 14:50

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.

score 0 · Answer 4 · answered Apr 17 '15 at 21:52

0

Try use

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

answered Apr 17 '15 at 21:52

Lucio Almeida

178
6

1

This shouldn't make a difference actually angular will strip x- or data- from the HTML it's processing for finding directive names so things can still be compliant if that's your thing. – shaunhusain Apr 17 '15 at 21:55
I'm sory. I'm beginner in AngularJS. – Lucio Almeida Apr 18 '15 at 12:01
It was worth attempting and I'm glad you contributed – Kode Apr 20 '15 at 21:47
This is wrong. google-ad-sense directive should be implemented, in order for this to work. – Alex Arvanitidis Jan 23 '16 at 21:48

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

4 Answers4

Other failed approach - DOM

Linked