CODEWITHSUNDEEP
javascripthtmlcssadsense
Tasos
Tasos

Reputation: 7577

Show different adsense in different devices

I redesign my website and I've decided to do it responsive for desktop-tablet-smartphone. My problem is the adsenses code since I want to show different kind of ads in different places according to the screen size.

My first thought was to create css styles for every device and use display:none or visibility:hidden for those that I don't want to use.

Like this:

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

The problem here is that I will show 3 ads in desktop, 2 ads in tablet and 1 ad in smartphone. Total piece of codes in the HTML are 6. The maximum number of accepted adsense from Google is 3.

Using display:none or visibility:hidden will remove it also from the source code? What is the best practice to do this without having a problem with Google?

Upvotes: 0

Views: 2373

Answers (2)

Anton
Anton

Reputation: 4052

Now Adsense offers Responsive Ad Unit, that would automatically adjust itself based on the screen size/device capabilities. Without you playing any tricks with CSS.

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

Upvotes: 0

Alexander Dayan
Alexander Dayan

Reputation: 2924

No one of CSS properties can remove ads from the page source. The difference between two is that 'visibility:hidden' hides element while it still reserves its place on the page and 'display:none' makes it completely invisible and most probably not considered by Google (see the example below).

However, I'd suggest to load ads dynamically using javascript after loading the page. You can prepare placeholders for ads and show / hide them with your css @media selectors, so you will easily recognize what to load.

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()">

UPDATE

Google robot checks the structure of DOM elements actually existing on the page. It can be result of one simple load of static HTML or result of execution of six scripts and twenty AJAX trips with server. Anyway, it see only the existing elements and not the elements that could exist in other circumstances. The solution I suggest is based on this fact.

Instead of static insert Google ads into the page source you prepare some placeholders:

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

and the following CSS classes:

.desktop-ad {
      display: inline;
  }

.mobile-ad {
      display: none;
  }

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

  .mobile-ad {
      display: inline;
  }
}

And finally you run the code on page load like a pseudo code below:

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

Therefore, Google will see 3 ad blocks on desktop or 1 ad block on mobile, but never all the 4 blocks.

Upvotes: 2

Related Questions