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

AngularJS and Adsense ads not loaded on route change (up to 3 ads for the entire app)

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

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

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

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

用法如下:

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

如何解决这个问题,以便在我转到另一个视图时加载广告?

更新: 经过进一步测试,它只加载前 3 个广告,这与 Google 防止每页超过 3 个广告一致....问题是我有多个视图未被视为 "pages"。我想知道 HTML5 历史处理模式是否与此有关...

尝试使用

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

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

我已经研究了过去 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]);
        }
      );
    });
  })

这会在更改 url 之前删除所有 google 相关变量,这并不理想,但它确实允许在 ng-views 上加载广告。我不知道这是否符合 adsense 条款。

其他失败的方法 - DOM

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

阅读 https://productforums.google.com/forum/#!topic/adsense/cl6eonjsbF0 我的印象是 Google 真的不希望广告在部分视图中显示...

等了好久,网上不断搜索,终于找到了一个解决方案,演示完备。 Leonard Teo 在 google groups at May 29. He have demonstrate live solution of this problem on github 上发表了一篇不错的评论。他声称解决方案是 Google 帮助他的人。

创建一个 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>