Question

我重新设计了我的网站，我决定对桌面平板电脑智能手机进行响应。我的问题是adsenses代码，因为我想根据屏幕尺寸在不同的地方展示不同类型的广告。

我的第一个想法是为每个设备创建css样式，并为那些我不想使用的设备使用display:none或visibility:hidden。

像这样：

@media (min-width:992px) {
    .desktop-only {
        display:none;
    }
}

问题在于我将在桌面设备中展示3个广告，在平板电脑中展示2个广告，在智能手机中展示1个广告。 HTML中的代码总数为6. Google接受的最大AdSense数量为3。

使用display:none或visibility:hidden还会从源代码中删除它吗？如果没有Google的问题，最好的做法是什么？

Answer 1

没有任何一个CSS属性可以从网页来源中删除广告。两者之间的区别在于：可见性：隐藏＆＃39;隐藏元素，但它仍保留在页面上的位置，并显示：无＆＃39;使其完全不可见，并且很可能不被Google考虑（参见下面的示例）。

但是，我建议在加载页面后使用javascript动态加载广告。您可以为广告准备占位符，并使用您的css @media选择器显示/隐藏它们，这样您就可以了将轻松识别要加载的内容。

＆＃13;

function toggleVisible() {
  var div1 = document.getElementById("div1");
  if (div1.style.visibility == "hidden")
    div1.style.visibility = "visible";
  else
    div1.style.visibility = "hidden";
}

function toggleDisplay() {
  var div2 = document.getElementById("div1");
  if (div2.style.display == "none")
    div2.style.display = "";
  else
    div2.style.display = "none";
}

＆＃13;

div {
  padding: 6px;
  border: solid 1px gray;
  }

＆＃13;

<div id='div1'>invisible element</div>
<div id='div2'>hidden element</div>
<p>Some text</p>
<input type=button value="toggle visible" onclick="toggleVisible()">
<input type=button value="toggle hidden" onclick="toggleDisplay()">

＆＃13;

<强>更新

Google机器人会检查页面上实际存在的DOM元素的结构。它可能是一个简单的静态HTML加载或六个脚本执行结果和二十个AJAX与服务器之间的结果。无论如何，它只看到现有元素，而不是其他情况下可能存在的元素。我建议的解决方案是基于这个事实。

不是将Google广告静态插入到页面源中，而是准备一些占位符：

＆＃13;

<p>Page content...</p>
<div id="ad1" class="desktop-ad"></div>
<div id="m-ad1" class="mobile-ad"></div>
<p>Page content...</p>
<div id="ad2" class="desktop-ad"></div>
<p>Page content...</p>
<div id="ad3" class="desktop-ad"></div>
<p>Page content...</p>

＆＃13;

以及以下CSS类：

＆＃13;

.desktop-ad {
      display: inline;
  }

.mobile-ad {
      display: none;
  }

@media only screen and (max-width: 480px) {
  .desktop-ad {
      display: none;
  }

  .mobile-ad {
      display: inline;
  }
}

＆＃13;

最后你在页面加载上运行代码，如下面的伪代码：

＆＃13;

function insertAds() {
    var mobileAd = document.getElementById("m-ad1");
    if (mobileAd.style.display == "none") {
        // insert desktop ads
      
        document.getElementById("ad1").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
      
      document.getElementById("ad2").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
      
      document.getElementById("ad3").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
    }
    else {
        // insert mobile ads
        document.getElementById("m-ad").HTML = '<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" data-ad-client="[client_id]" data-ad-slot="[slot]"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
    }
}

＆＃13;

因此，谷歌将在桌面上看到3个广告块，在移动设备上看到1个广告块，但从来不会看到所有4个广告块。

Answer 2

现在，Adsense提供响应式广告单元，可根据屏幕尺寸/设备功能自动调整自身。没有你玩CSS的任何技巧。

https://support.google.com/adsense/answer/3213689?hl=en

在不同的设备中显示不同的adsense

2 个答案: