Google AdSense

How to Use Different AdSense Ads for Mobile & Desktop in the Same Location

How to Use Different AdSense Ads for Mobile & Desktop in the Same Location

Google AdSense has introduced Responsive AdSense Ads long back to make sure the Ad gets displayed depending on the screen resolution.

For example, when you choose responsive ad, a 728×90 leaderboard ad will be displayed in the desktop version and a smaller 468×60 banner to viewers on a tablet.

But what if you completely want to hide the ad?

Many people asked me various questions like “How to display different AdSense ads in desktop and mobile?”.

Well, I have faced this problem myself few months back and came up with a solution, which I’m going to share with everyone now.

This will probably solve most of your problems.

There are many plugins in WordPress which will fulfill your need. You can use plugins like Ad Inserter, Advanced Ads, etc.

I have personally used them in few of my blogs.

They are very effective, easy to use and you don’t need any technical knowledge to work with them.

Understanding the basics of javascript is enough to deal with this method.

Here, we are going to use conditional if tags to hide or display the ad units depending on the screen resolution.

You can even use two different ads for mobile and desktop in the same location.

Here’s the code:

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script type=”text/javascript”>
var td_screen_width = document.body.clientWidth;

if ( td_screen_width >= 468 ) {
/* large monitors */
document.write(‘<ins class=”adsbygoogle” style=”display:inline-block;width:468px;height:15px” data-ad-client=”ca-pub-75254981981XXXXX” data-ad-slot=”3494921416″></ins>’);
(adsbygoogle = window.adsbygoogle || []).push({});
}

if ( td_screen_width < 468 ) {
/* Phones */
document.write(‘<ins class=”adsbygoogle” style=”display:inline-block;width:200px;height:90px” data-ad-client=”ca-pub-75254981981XXXXX” data-ad-slot=”4972194885″></ins>’);
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

Change styles, data ad client and data ad slot according to your AdSense ads code after getting your code from Google Adsense account.

The above code implementations should help you in majority of the cases. We already wrote an article on making custom ads responsive.

Do let me know if you are still having any more doubts in your comments below and we would be happy to help you.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular

To Top