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>
我有一个带有 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>