我有一个包含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模式处理历史是否与此有关...
答案 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会触发广告请求,并且该广告会在第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,然后是最终广告。