路线更改时未加载AngularJS和Adsense广告(整个应用最多3个广告)

时间:2015-04-17 21:49:43

标签: angularjs adsense

我有一个包含AdSense的Angular网站,它会在首次加载或刷新时加载广告,但如果我浏览到其他路线,则不会加载广告。这是我正在使用的指令:

.directive('googleAdSense', function () {
return {
    restrict: 'A',
    replace: true,
    templateUrl: "../../templates/googleads.html",
    controller: function () {
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
};
});

这是我将脚本标记放在索引文件头部的位置。所有视图都通过ng-view加载进/出索引文件:

<!-- Google Adsense -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

以下是用法:

<div data-google-ad-sense></div>

如何解决此问题,以便在转到其他视图后加载广告?

更新:经过进一步测试后,它只会加载前3个广告,这与Google每页预防超过3个广告一致....问题是我有多个视图不是& #39;被视为&#34;页面&#34;。我想知道HTML5模式处理历史是否与此有关...

4 个答案:

答案 0 :(得分:6)

我已经研究了这个过去8小时,到目前为止最好的解决方案,或者我应该说解决方法,我发现它是答案Angular.js & Adsense的衍生物。

我正在使用ui-router,在我的 app.js 中我添加了以下代码:

  .run(function ($rootScope, $window) {
    // delete all the google related variables before you change the url
    $rootScope.$on('$locationChangeStart', function () {
      Object.keys($window).filter(function(k) { return k.indexOf('google') >= 0 }).forEach(
        function(key) {
          delete($window[key]);
        }
      );
    });
  })

这会在更改网址之前删除所有与谷歌相关的变量,这并不理想,但它确实允许在ng-views上加载广告。我根据adsense条款不知道这是否有效。

其他失败方法 - DOM

在放弃并诉诸于此之前,我已尝试操纵DOM,因此我会加载广告一次,然后在切换视图时分离/附加广告。不幸的是,似乎将广告附加到DOM会触发广告请求,并且该广告会在第3个广告请求结束后结束。我为此创建的指令代码位于https://gist.github.com/dmarcelino/3f83371d120b9600eda3

从阅读https://productforums.google.com/forum/#!topic/adsense/cl6eonjsbF0开始,我觉得Google确实不希望广告在部分视图中显示...

答案 1 :(得分:3)

等了很长时间并不断在网上搜索,我找到了一个完全正常工作的解决方案。 Leonard Teo于5月29日在google groups发表了一篇很好的评论。他已经在github上展示了这个问题的实时解决方案。他声称解决方案是由谷歌人帮助他的。

创建google-ad指令,并在广告区域属性中传递和随机值,如下所示。

window.app = angular.module('app', ['ngRoute']);

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:inline-block;width:300px;height:250px' data-ad-client='ca-pub-xxxxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxx' data-ad-region='page-" + rand + "'></ins>";
          $(element).append(html);
          return (adsbygoogle = window.adsbygoogle || []).push({});
        });
      }
    };
  }
]);

然后在视图模板中使用google-ad指令。

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

答案 2 :(得分:0)

尝试使用

<div google-ad-sense></div>

答案 3 :(得分:0)

请参阅此处以供参考(https://productforums.google.com/forum/#!msg/adsense/Ya498_sUlBE/hTWj64zROoEJ),但将脚本标记移动到index.html对我有用。基本上,我在顶部菜单中使用了ng-include,包含顶部广告的脚本标记,然后是ng-view,然后是最终广告。