个人中心
gpt4 book ai didi

javascript - 使用响应式设计时，呈现适合其容器的最大广告位的最佳方式是什么？

转载 作者：可可西里 更新时间：2023-11-01 02:09:00 26 4
gpt4 key购买 nike

我希望将 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/

26 4 0
文章推荐： javascript - 使用 Objective-C 的 JavaScript 注入(inject)方法
文章推荐： java 。使用弹出消息 "already running"防止 Jar App 多次运行。 (使用 ServerSocket())
文章推荐： JavaFx:如何在 ImageView 上安装工具提示
文章推荐： javascript - 请解释javascript中冒号的用法
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com