Angular.js & Adsense

2019-01-31 02:43发布

站内文章 / 后端开发
51 0 0

问题:

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?

回答1:

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



回答2:

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.



回答3:

In the javascript file define a custom directive for google adsense

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:block' data-ad-client='ca-pub-7656700967113967' data-ad-slot='1894787830' data-ad-format='auto'></ins>";
          $(element).append(html);
          return (adsbygoogle = window.adsbygoogle || []).push({});
        });
      }
    };
  }

The adsense information for the above directive is provided by Google when you select the ad. In the page to display ad- use the following tag

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

In Index.html use the 

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

A video tutorial for getting this up and running is provided here AngularJS + Adsense



回答4:

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


回答5:

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



标签： angularjs angularjs-directive adsense transclusion
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~