11

I'm trying to put ads on my angular.js app, and I've done some reading and discovered it isn't possible to just copy and paste the normal adsense code.

I've heard you are supposed to "wrap it in a directive with a transclusion," and the only example I can find of this is another Stackoverflow post: AngularJs and AddThis social plugin

Can someone help give guidance about how to go about doing this with Google Adsense?

Community
  • 1
  • 1
David Litwak
  • 111
  • 1
  • 1
  • 3
  • Hello David, I've been learning Angular recently too. I used to work with this guy John Lindquist (he also did some work on Papervision which is how I heard of him originally) anyhow he has a site http://www.egghead.io dedicated to angular tutorials. Check out the stuff about directives he's got a couple of short videos covering it. Beyond that I would just use the docs as the most current reference. The basic issue as I understand it is that angular will be adding/removing DOM elements and if there's JS that needs to process those DOM elements you need to put it in a directive so it runs. – shaunhusain Jul 02 '13 at 03:44

4 Answers4

18

you need to create a directive 

yourApp.directive('ads', function() {
    return {
        restrict: 'A',
        templateUrl: 'partiels/adsTpl',
        controller: function(){
            (adsbygoogle = window.adsbygoogle || []).push({});
        }
    };
});

create a template with your ads code in my case "partiels/adsTpl.html"

<ins class="adsbygoogle"
 style="display:inline-block;width:300px;height:250px"
 data-ad-client="ca-pub-00000000"
 data-ad-slot="000000"></ins>

add the directive to your page 

 <div data-ads></div>

place the adSense js call in the head section of your main page before angularjs 

<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
....

et voila , this is work perfectly for me

zied.hosni
  • 490
  • 1
  • 5
  • 19
  • 1
    Because I have multiple views and routes, it only shows the first 3 times and then doesn't work until the site is reloaded. – Kode Apr 19 '15 at 03:16
  • hi @kode , I have many view in my web app , but in my case it'works perfectly, can you please provide more details . – zied.hosni Apr 20 '15 at 13:14
  • Thanks @zied.hosni. I have a post here: http://stackoverflow.com/questions/29709973/angular-adsense-ads-not-loading-on-route-change-up-to-3-ads-for-the-entire-app It appears that the only difference is that my directive uses replace: true – Kode Apr 20 '15 at 14:10
  • Are you adding the adsense directive to your views? Or just to the index page – Kode Apr 21 '15 at 02:54
  • 2
    Fantastic! This is exactly what I've been looking for, it's simple and works well with AngularJs! – Fery Kaszoni Dec 06 '17 at 18:03
15

You should do a wrapper directive to the adSense script like this...

<div data-my-ad-sense>
  <!-- Google AdSense -->
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <ins class="adsbygoogle"
       style="display:inline-block;width:728px;height:90px"
       data-ad-client="ca-pub-0000000000"
       data-ad-slot="0000000000"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

And add this directive to your directives...

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

This is the adSense async code.

Pablo Ezequiel Leone
  • 1,337
  • 17
  • 22
  • 1
    this doesn't seem to be working, my ads are coming out blank (but strangely still with an iframe loaded). any ideas? I'm using them in an ng-repeat where every 4th element has an ad. you can see it at sparkmyinterest.com if that helps – Rob Dec 03 '13 at 23:58
  • 1
    this solution seems to work, but when the ng-view is changed, if printing more than one ADS in an ng-repeat: the 1st time i look at the view: OK (or sometimes one or more ADS missing), BUT changing the view and coming back some (or all) ADS are missing – ricricucit May 09 '14 at 13:05
  • 1
    This isn't a good solution. The directive wrapper serves absolutely no purpose. Just saying – Andrew Rhyne Dec 16 '14 at 02:14
  • where does the data-my-ad-sense come from? – WJA Dec 25 '15 at 12:08
  • @JohnAndrews The `data-` portion is just specifying a custom html5 attribute (allows your html to validate). The `my-ad-sense` portion is the name of the directive defined in the second snippet. – Lykathia May 06 '16 at 15:44
2

I am not sure whether doing the following thing is valid as per the adsense T&C.

delete all the google related variables before you change the url

Object.keys(window).filter(function(k) { return /google/.test(k) }).forEach(
        function(key) {
            delete(window[key]);
        }
    );
Kishore Relangi
  • 1,928
  • 16
  • 18
0

In the AngularJS controller, add an init() function, add a line 

(adsbygoogle = window.adsbygoogle || []).push({});

Then call this init() function in your view html file.

See also at
https://github.com/featen/ags/blob/master/webapp/js/controllers/dict.js

Filipe Gonçalves
  • 20,783
  • 6
  • 53
  • 70
featen
  • 1
  • 1