在不同的设备中展示不同的广告

Show different adsense in different devices

本文关键字:      更新时间:2023-09-26

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

我的第一个想法是为每个设备创建 css 样式,并为我不想使用的设备使用 display:nonevisibility:hidden

喜欢这个:

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

这里的问题是我将在桌面上显示 3 个广告,在平板电脑上显示 2 个广告,在智能手机上显示 1 个广告。HTML 中的代码总数为 6 条。谷歌接受的广告数量上限为 3。

使用 display:nonevisibility:hidden 也会将其从源代码中删除吗?在不遇到 Google 问题的情况下执行此操作的最佳做法是什么?

任何 CSS 属性都不能从网页源代码中移除广告。两者之间的区别在于,"visibility:hidden"隐藏元素,同时它仍然保留其在页面上的位置,而"display:none"使其完全不可见,并且很可能不会被Google考虑(请参阅下面的示例)。

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

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";
}
div {
  padding: 6px;
  border: solid 1px gray;
  }
<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()">

更新

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

您无需在网页源代码中静态插入 Google 广告,而是准备一些占位符:

<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>

以及以下 CSS 类:

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

最后,您在页面加载时运行代码,就像下面的伪代码一样:

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>';
    }
}

因此,Google 会在桌面设备上看到 3 个广告屏蔽,在移动设备上看到 1 个广告屏蔽,但绝不会看到所有 4 个屏蔽。

现在,

Adsense 提供了自适应广告单元,可以根据屏幕尺寸/设备功能自动调整。无需您使用 CSS 玩任何技巧。

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

相关文章:
  • 没有找到相关文章