如何使 Adsense 广告与响应式网站一起使用

Posted 2023-03-06

技术标签:

【中文标题】如何使 Adsense 广告与响应式网站一起使用【英文标题】：How to make Adsense ads work with responsive website 【发布时间】：2013-01-03 09:00:03 【问题描述】：

我查看了当前的解决方案，这两个帖子已经部分涵盖了这个问题； Making Adsense Responsive 和 In javascript 'If mobile phone'

我有一个响应式网站，唯一在手机上破坏它的是我页面上的横向谷歌广告，这使它首先突出了额外的空间，因为它比其他所有东西都大。

我正在寻找是否有人有可行的解决方案，这样我基本上可以在这个大横幅和用于移动浏览器的较小格式之间切换，屏幕尺寸更小并且不会破坏我的响应式网站。

我目前的解决方案是缩小屏幕尺寸并在低于某个阈值时显示较小的广告。有没有更好的办法？

【问题讨论】：

【参考方案1】：

您可以将此代码用于 AdSense，这并不违反 TOS，因为它不会“即时”更改广告，您只是根据屏幕尺寸投放广告，而不是更改广告本身。

<script type="text/javascript">


    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    google_ad_client = "ca-publisher-id";

    if (width > 800) 
        // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
        google_ad_slot = "ad-unit-1"; 
        google_ad_width = 728; 
        google_ad_height = 90;
     else if ((width <= 800) && (width > 400))  
        // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
        google_ad_slot = "ad-unit-3"; 
        google_ad_width = 468; 
        google_ad_height = 60;
     else  
        // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets)
        google_ad_slot = "ad-unit-2"; 
        google_ad_width = 300; 
        google_ad_height = 250;
    

</script>

<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

还有一个用于 DFP 的：

var width = window.innerWidth 
    || document.documentElement.clientWidth 
    || document.body.clientWidth;
if (width >= 800) 
    // Activa el anuncio "Leaderboard" de 728x90 para pantallas anchas
    document.write('<div id="div-gpt-ad-1234567891234-1" style="width:728px; height:90px;"">');
    googletag.cmd.push(function()  googletag.display('div-gpt-ad-1234567891234-1'); );
    document.write('</div>');

 else if ((width < 800) && (width > 400))  
    // Activa el anuncio "Medium Rectangle" de 300x250 para medianas (tablets) 
    document.write('<div id="div-gpt-ad-1234567891234-2" style="width:300px; height:250px;"">');
    googletag.cmd.push(function()  googletag.display('div-gpt-ad-1234567891234-2'); );
    document.write('</div>');

 else  
    // Activa el anuncio "Banner" de 468x60 para pantallas pequeñas (móviles) 
    document.write('<div id="div-gpt-ad-1234567891234-3" style="width:468px; height:60px;"">');
    googletag.cmd.push(function()  googletag.display('div-gpt-ad-1234567891234-3'); );
    document.write('</div>');

【讨论】：

【参考方案2】：

Google 现已推出responsive ad units。您需要生成新的广告代码才能使用它们。

【讨论】：

【参考方案3】：

我认为 2019 年不需要这样做，因为 Google Adsense 正式推出了太多新的广告格式，适合各种屏幕尺寸（响应式）。

但是，当用户从不同的屏幕尺寸浏览时，您可以使用一些 Javascript 代码来确定广告位置或何时显示或隐藏它们。

【讨论】：

【参考方案4】：

此工具顶部有一个免责声明，以确保 Google 对您使用它感到满意，但这将完全满足您的需求。

http://www.responsiveads.com/responsive-adsense/

来自他们的blog

Google 很可能会为此提出自己的解决方案在不久的将来的某个时候，但与此同时，出版商可以使用我们的解决方案使 AdSense 能够通过其网站获利跨所有屏幕！

【讨论】：

嗯，很有趣。我一直在研究它，如果上面的代码也不能正常工作，我会给它一个机会。这是最好的情况，但我并不担心不同的尺寸或随着屏幕缩小而刷新尺寸。如果人们以响应的方式玩，那是他们的意愿，但我猜这将是罕见的。对我来说，我只需要根据访问页面时使用的屏幕尺寸显示大广告还是小广告。但是，我确实希望 Google 会在他们的代码中包含这样的修复程序。感谢分享，不然找不到了。我尝试让这个解决方案发挥作用，并输入代码，但它似乎只向我展示了较小尺寸的广告。奇怪，但我会继续玩它，看看是否有解决方案。仅供参考，这违反了 AdSense 服务条款。【参考方案5】：

这是 AdSense 的一个大问题。根据服务条款，您不能以编程方式刷新广告，这意味着如果您的布局在调整大小后需要加载不同的广告，您将无法加载。

话虽如此，Google DFP（支持加载 AdSense 广告）确实有a refresh method。我已经阅读了所有政策，您似乎可以将这种方法用于您自己的广告，但在使用 AdSense 时则不能。

编辑：前几天刚与 Google 通了电话...他们确认在提供 AdSense 时使用 DFP 的刷新功能违反了他们的 AdSense 政策。刷新功能只能与您自己的广告一起使用，否则您可能会失去帐户和赚取的资金。

【讨论】：

嘘谷歌，嘘，你的政策很糟糕，你应该感到难过。我真正想到的是是否有办法加载一个或另一个广告？我知道我曾经有一个网站的移动版本，并且会在每个网站中放入不同的代码。这也违反它吗？我认为它只会加载基于代理的广告，但我不想刷新当前的广告......也许我没有考虑这个权利？ @Nicko，您绝对可以选择必须加载的内容。实际上，您可以在客户端执行此操作。问题是在您展示广告后更改广告，而无需刷新页面。我建议对您正在使用的布局进行客户端检测是最好的选择。然后，如果布局发生变化，您可以刷新页面。不是很好，但也不是世界末日。如果设备旋转或其他导致视口发生变化的变化，用户会遇到不方便的重新加载，但仅此而已。 @Nicko，我还应该指出，这不仅仅是谷歌的问题。整个行业都在摇摆不定。 IAB 刚刚发布了一份关于如何处理的报告，留下的问题多于答案。 (iab.net/responsivedesign) 虽然我们可以选择目前最有效的广告创意尺寸，但如果想出一种让广告和网站一样流畅的方法肯定会很好。这将要求广告商放弃一些控制权……这不太可能发生。感谢您的洞察力。我认为这将是我将实施的解决方案，并且我并不担心如果屏幕尺寸发生变化，广告会发生变化，这将是一种罕见的情况，我会很好地显示它或。如果屏幕较小，我只需要加载较小的广告，如果屏幕较大，则加载完整的广告。如果它适合与否，我不用担心。我对此的后续问题是，如果您知道如何实施我最初发布的修复...

if ($(window).width() &lt; 480 || $(window).height() &lt; 480)      //small screen, load other JS files     $.getScript('/js/script.js', function ()          //the script has been added to the DOM, you can now use it's code     );

我猜这将是一个开始【参考方案6】：

我用简单的 css 完成了这个。

如果它不是 Flash 对象，您可以调整它的大小。

如果是 iframe，则将其宽度设为 100%

根据加载的广告，它可能会切断一些图像，如果是这种情况，那么您将需要一些 javascript 来测量动画并相应地重新加载添加。

【讨论】：

【参考方案7】：