Angular.js & Adsense

Asked 2/7, 2013 at 3:35 Answered 6/10, 2014 at 10:10

angularjs angularjs-directive adsense transclusion

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?

Obmutescence answered 2/7, 2013 at 3:35 Comment(1)

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 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. – Nyeman 2/7, 2013 at 3:44

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

Valerle answered 29/3, 2014 at 18:28 Comment(5)

Because I have multiple views and routes, it only shows the first 3 times and then doesn't work until the site is reloaded. – Conviction 19/4, 2015 at 3:16

hi @kode , I have many view in my web app , but in my case it'works perfectly, can you please provide more details . – Valerle 20/4, 2015 at 13:14

Thanks @zied.hosni. I have a post here: #29710473 It appears that the only difference is that my directive uses replace: true – Conviction 20/4, 2015 at 14:10

Are you adding the adsense directive to your views? Or just to the index page – Conviction 21/4, 2015 at 2:54

Fantastic! This is exactly what I've been looking for, it's simple and works well with AngularJs! – Rabid 6/12, 2017 at 18:3

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.

Peterec answered 7/7, 2013 at 12:27 Comment(5)

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 – Eclogue 3/12, 2013 at 23:58

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 – Soften 9/5, 2014 at 13:5

This isn't a good solution. The directive wrapper serves absolutely no purpose. Just saying – Gruelling 16/12, 2014 at 2:14

where does the data-my-ad-sense come from? – Kuban 25/12, 2015 at 12:8

@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. – Ramsden 6/5, 2016 at 15:44

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

Genesisgenet answered 6/10, 2014 at 10:10 Comment(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.

Laurinelaurita answered 5/5, 2014 at 22:7 Comment(0)

Recommended topics

Hot tags