我希望将 Google AdSense 广告放入 responsive design(特别是使用 Twitter Bootstrap)。
挑战在于，使用响应式设计，容器的宽度可以根据浏览器窗口的宽度而改变。虽然这是响应式设计的主要优势之一，但很难适应固定宽度的内容，例如广告。例如，对于使用至少 1200 像素宽的浏览器查看页面的用户，给定容器的宽度可能为 300 像素。但是在 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 的宽度为 300 像素，让我们显示 slot_300(或者说 ID:3456789012 及其在 AdSense JavaScript 中的宽度和高度)。
现在假设您在另一台设备上查看页面，#adSlot1 现在是 480 像素宽。现在让我们使用 slot_336。 1000px 宽元素？使用 slot_728。明白了吗？
请注意，根据宽度呈现所有不同的插槽并仅呈现 .show()/.hide() 违反 Google 的服务条款。相反，如果调用广告 JavaScript，则它必须在页面上可见。 (想象一下，如果将隐藏的广告计为展示次数，这将如何搞砸每个人的报告!)
我也不太关心人们在页面 View 期间拉伸(stretch)和收缩他们的浏览器窗口。但是，如果对此有精明的答案，则可加分。在此之前，每次加载页面时可以加载一次。
您认为实现此目标的最佳、最优雅的方法是什么？
最佳答案
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>
关于javascript - 使用响应式设计时，呈现适合其容器的最大广告位的最佳方式是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12520435/