首页 文章

Angular.js和Adsense

提问于
浏览 次
10

我正在尝试在我的angular.js应用上投放广告，并且我已经完成了一些阅读并发现无法复制和粘贴普通的adsense代码 .

我听说你应该"wrap it in a directive with a transclusion,"，我能找到的唯一例子是另一个Stackoverflow帖子：AngularJs and AddThis social plugin

有人可以帮助提供有关如何使用Google Adsense进行此操作的指导吗？

angularjs angularjs-directive adsense transclusion

5 回答

  • 18

    你需要创建一个指令

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

    在我的案例中创建一个包含广告代码的模板“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>

    将指令添加到您的页面

    <div data-ads></div>

    在angularjs之前将adSense js调用放在主页的head部分

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

    et voila，这对我来说非常有用

    回复于
  • 2

    您应该像这样对adSense脚本执行包装指令...

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

    并将此指令添加到您的指令中......

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

    这是adSense异步代码 .

    回复于
  • 0

    在javascript文件中为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({});
        });
      }
    };
  }

    当您选择广告时，Google会提供上述指令的AdSense信息 . 在要显示的页面中，使用以下标记

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

    在Index.html中使用

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

    这里提供了启动和运行的视频教程AngularJS + Adsense

    回复于
  • 3

    我不确定根据adsense T＆C做以下事情是否有效 .

    在更改网址之前删除所有与谷歌相关的变量

    Object.keys(window).filter(function(k) { return /google/.test(k) }).forEach(
        function(key) {
            delete(window[key]);
        }
    );
    回复于
  • 15

    在AngularJS控制器中，添加一个 init() 函数，添加一行

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

    然后在视图html文件中调用此 init() 函数 .

    另见
    https://github.com/featen/ags/blob/master/webapp/js/controllers/dict.js

    回复于

相关问题