Angular.js & Adsense

angularjs angularjs-directive adsense transclusion
David Litwak picture David Litwak · Jul 2, 2013 · Viewed 12.6k times · Source

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?

Answer

zied.hosni picture zied.hosni · Mar 29, 2014

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

Related questions

How to set focus on input field?

What is the 'Angular way' to set focus on input field in AngularJS? More specific requirements: When a Modal is opened, set focus on a predefined <input> inside this Modal. Everytime <input> becomes visible (e.g. …

Read More
What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> From …

Read More
AngularJS ng-style with a conditional expression

I am handling my issue like this: ng-style="{ width: getTheValue() }" But to avoid having this function on the controller side, I would much prefer to do something like this: ng-style="{ width: myObject.value == 'ok' ? '100%' : '0%' }" How can …

Read More