Rya*_*yan 12 javascript jquery adsense
我希望将Google AdSense广告融入响应式设计(特别是使用Twitter Bootstrap).
挑战在于,通过响应式设计,容器的宽度可以根据浏览器窗口的宽度而变化.虽然这是响应式设计的主要优势之一,但是很难适应固定宽度的内容,例如广告.例如,对于使用至少1200px宽的浏览器查看页面的用户,给定容器可以是300px宽.但是在768px宽的浏览器窗口中,同一容器可能只有180px宽.
我正在寻找JavaScript(jQuery？)解决方案来加载适合容器宽度的最大广告格式.
假设我有以下广告位(广告格式):
name width x height slot_id
slot_180 180 x 160 1234567890
slot_250 250 x 250 2345678901
slot_300 300 x 250 3456789012
slot_336 336 x 280 4567890123
slot_728 728 x 90 5678901234
这是我需要包含的脚本:
<script type="text/javascript"><!--
google_ad_client = "ca-ABCDEFGH";
google_ad_slot = "[###slot_id###]";
google_ad_width = [###width###];
google_ad_height = [###height###];
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';
这里有一些示例html:
<body>
<div class="row">
<div class="span3"><p>Lorem ipsum</p></div>
<div class="span3" id="adSlot1"><!-- [### INSERT AD 1 HERE ###] --></div>
<div class="span3"><p>Lorem ipsum</p></div>
<div class="span3"><p>Lorem ipsum</p></div>
</div>
<div class="row">
<div class="span4" id="adSlot2"><!-- [### INSERT AD 2 HERE ###] --></div>
<div class="span4"><p>Lorem ipsum</p></div>
<div class="span4" id="adSlot3"><!-- [### INSERT AD 3 HERE ###] --></div>
</div>
</body>
我想展示适合给定容器的最大广告位.
例如:
如果#adSlot1的宽度为300px,那么让我们在AdSense JavaScript中显示slot_300(或者更确切地说是id:3456789012及其宽度和高度).
现在让我们假设您在另一台设备上查看该页面,#adSlot1现在是480px宽.现在让我们使用slot_336.1000px宽元素？使用slot_728.得到它？
请注意,这是对谷歌的服务条款,以使所有不同的插槽,仅仅.show()/ .hide()取决于宽度.相反,如果广告JavaScript被调用,它必须在页面上可见.(想象一下,如果将隐藏的广告计算为展示次数,这会如何搞砸每个人的报告!)
我也不太关心在页面浏览期间拉伸和缩小浏览器窗口的人.但是,如果有一个精明的答案,奖励积分.在此之前,每页加载可以加载一次.
你有什么建议是最好,最优雅的方法来实现这一目标？
AdSense不支持流畅的宽度(我不知道),但您可以使用JavaScript根据实际容器大小提供不同的尺寸.
看看这个:
http://james.cridland.net/code/dynamic_google_adsense.html
编辑
如果您解释了如何使用上述链接中的示例,将会很有帮助.
这是一个更详细的例子,作为一个理论上应该工作的jQuery插件.
var google_ad_slot, google_ad_width, google_ad_height;
(function( $ ){
$.fn.google_ads = function(slots) {
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
return this.each(function(){
/* Get slot container width */
var width = $(this).width();
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
if( slot !== null ){
/* Set global variables for external script */
google_ad_slot = slot[2];
google_ad_width = slot[0];
google_ad_height = slot[1];
/* Append script to slot container */
var script_el = $('<script>', {
'type': 'text/javascript',
'src': 'http://pagead2.googlesyndication.com/pagead/show_ads.js'
}).on('load', function() {
/* May need to wait with next slot until script is loaded */
console.log('loaded');
});
$(this).append(script_el);
}
});
};
})( jQuery );
用法示例[宽度,高度,槽]
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;"></div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;"></div>
<script type="text/javascript">
var google_ad_client = "ca-pub-527527527527527";
$('.slot').google_ads([
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
]);
</script>
更有可能(和更丑陋)的成功方式是:
<script type="text/javascript">
var get_google_ad_params = function(width, slots){
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
return slot;
};
var slots = [
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
];
</script>
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-1').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-2').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
| 归档时间： |
|
| 查看次数： |
964 次 |
| 最近记录： |