草庐IT

javascript - 适用于发布商的 DoubleClick : Specify browser and ad dimensions

coder 2024-07-25 原文

我正在尝试根据浏览器大小加载横幅。因此,在我有 728x90 横幅的位置,如果在移动设备上,则会显示 300x250。

问题是,728x90 在桌面上加载。但在移动设备上不显示 300x250。

我尝试按照示例 here 进行操作

<script type='text/javascript'>
 googletag.cmd.push(function() {
    // This mapping will only display ads when user is on desktop sized viewport
    var mapLeader = googletag.sizeMapping().
        addSize([0, 0], []).
        addSize([768, 200], [728, 90]).
        build();

    // This mapping will only display ads when user is on mobile or tablet sized viewport
    var mapLeader2 = googletag.sizeMapping().
      addSize([0, 0], []).
      addSize([768, 200], []). // Desktop
      addSize([300, 200], [300, 250]). // Tablet
      build();

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0').
        defineSizeMapping(mapLeader).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads());

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0').
        defineSizeMapping(mapLeader2).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads()); 

    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableSyncRendering();
    // Start ad fetching
    googletag.enableServices();

});
</script>

在我的 HTML 中

<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
    <script type='text/javascript'>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
    </script>
</div>
<!-- /XXXXXX/medium-rectangle-1 -->
<div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'>
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); });
    </script>
</div>

我必须把<div>对于同一位置的每个尺寸?如何加载 300x250 横幅? 728x90 工作正常。我知道我可以使用 CSS 根据浏览器大小隐藏/显示。但我不想那样做。在同一位置加载多个尺寸会减慢我的网站加载速度。

最佳答案

我真的没有机会保存您提供的示例,所以我创建了一个非常适合我的示例。我会在底部稍微解释一下。

 <html>
      <head>
        <title>Async Responsive</title>
        <script async src="http://www.googletagservices.com/tag/js/gpt.js">
        </script>
        <script>
          googletag = window.googletag || {cmd:[]};
          googletag.cmd.push(function() {

            var sizeMapping = googletag.sizeMapping().
                addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768
                addSize([980, 690],  [728, 90]).  // Screens of any size smaller than 1024x 768 but bigger than 980 x 690
                addSize([640, 480],  [120, 60]).  // Screens of any size smaller than 980 x 690 but bigger than 640 x 480
                addSize([0, 0],      [88, 31]).   // Screens of any size smaller than 640 X 480 but bigger than 0 x 0

                build();

            googletag.defineSlot(
                '/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id').
                defineSizeMapping(sizeMapping).
                addService(googletag.pubads());

            googletag.enableServices();
          });
        </script>
      </head>
      <body>
        <h1>user2636556 Testpage</h1>
        <div id="div-id">
          <script>
            googletag.cmd.push(function() { googletag.display('div-id') });
          </script>
        </div>
      </body>
 </html>

首先您必须调用 .sizeMapping() 将广告尺寸映射到浏览器尺寸,然后您需要调用 .defineSizeMapping() 来实现映射。

您为 addSize 指定的第一个维度是屏幕尺寸,每个后续维度都是广告尺寸。例如,在上面定义的第一个 addSize() 中,[1024, 768] 是浏览器尺寸,[970, 250] 是广告尺寸。

如果映射有误,或者由于某种原因无法确定屏幕尺寸,将使用 .defineSlot() 中指定的尺寸。

GPT 自适应广告不会随着浏览器大小的变化而调整大小。您可以添加自己的自定义代码以在调整大小时刷新广告位。

为了这个的功能是这个:

googletag.pubads().refresh();

如果还有其他问题,请告诉我。

关于javascript - 适用于发布商的 DoubleClick : Specify browser and ad dimensions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36128401/

有关javascript - 适用于发布商的 DoubleClick : Specify browser and ad dimensions的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前,我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞,我可以在一个地方轻松完成,而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby - inverse_of 是否适用于 has_many? - 2

    当我使用has_one时,它​​工作得很好,但在has_many上却不行。在这里您可以看到object_id不同,因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290

  4. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  5. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知? - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗?他们有邮件列表,RubyonRails有一个推特,但我不想听到那些随之而来的喧嚣,我只想知道什么时候发布新版本,尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知?,我们在StackOverflow上找到一个类似的问题:

  6. ruby - "undefined method"用于 rails 模型 - 2

    我正在使用带有Rails的Devise,我想添加一个方法“getAllComments”,所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时,我得到了undefinedmethod`getAllComments'for#我做错了什么?谢谢 最佳答案 因为getAllComments是一个类方法,而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  9. ruby-on-rails - Ruby "Undefined Method"用于类方法 - 2

    Ruby初学者努力简单地将这个@@people散列的值打印到控制台classPerson#haveafirst_nameandlast_nameattributewithpublicaccessorsattr_accessor:first_nameattr_accessor:last_name#haveaclassattributecalled`people`thatholdsanarrayofobjects@@people=[]#havean`initialize`methodtoinitializeeachinstancedefinitialize(first_name,last_

  10. python - 用于 Python 或 Ruby 的 Amazon Book API? - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:AmazonAPIlibraryforPython?我正在寻找一个AmazonAPI,它可以让我:按书名或作者查找书籍显示书籍封面获取有关每本书的信息(价格、评级、评论数、格式、页数等)Python或Ruby库都可以(我只想要最容易使用的库)。有什么建议么?我知道在SO上还有其他一些关于此的帖子,但这些API似乎很快就过时了。[几个月前我尝试了几个建议的Ruby库,但无法让它们中的任何一个工作。]

随机推荐