我希望将Google AdSense广告投放到responsive design(特别是使用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
及其宽度和高度) .
现在让's say you view the page on another device and #adSlot1 is now 480px wide. Now let'使用 slot_336
. 1000px宽元素?使用 slot_728
. 得到它?
注意它是's against Google'的TOS来渲染所有不同的插槽而仅仅是 .show()
/ .hide()
,具体取决于宽度 . 相反,如果广告JavaScript被调用,它必须在页面上可见 . (想象一下,如果将隐藏的广告计算为展示次数,这会如何搞砸每个人的报告!)
我也不太关心在页面浏览期间拉伸和缩小浏览器窗口的人 . 但是,如果有一个精明的答案,奖励积分 . 在此之前,每页加载可以加载一次 .
你有什么建议是最好,最优雅的方法来实现这一目标?
3 回答
AdSense不支持流畅的宽度(我不知道),但您可以使用JavaScript根据实际容器大小提供不同的尺寸 .
看看这个:
http://james.cridland.net/code/dynamic_google_adsense.html
EDIT
如果您解释了如何使用上述链接中的示例,将会很有帮助 .
这是一个更详细的例子,作为一个理论上应该工作的jQuery插件 .
用法示例[宽度,高度,槽]
更有可能(和更丑陋)的成功方式是:
这可能看起来有点简陋,特别是与Sunn0的回答相比,但是这个简单的事情呢?
编辑以包含代码
您应该能够在窗口调整大小时调用sunn0的插件,并让它也能响应 . 你应该考虑限制resize事件 . 这是一篇很好的帖子 .
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/