How to Make Your Adsense Ads Responsive

Total Shares:

12


Add One!

Responsiveness is an important feature in today’s web. Responsive design is a a dynamic design that automatically transforms a site’s layout depending on screen size of the device. This helps in displaying your website on a Mobile device more accurately without the need to zoom in and zoom out. The design adapts itself to the Screen size and fits in perfectly.

HackTabs now has a responsive design (try opening it on your mobile phone or tablet). And while making the design responsive, You will come across several objects on the page that are non-responsive. One such object is the Google Adsense Ad unit. By default if you are using the old Adsense code, Your Ads are not responsive. But to fix this problem Google has introduced ‘Responsive Ads’ for its publishers.

When using Responsive Ads, You will have a single Ad Code to use unlike the old Ads where you generated different code for different Ad Sizes (336×380 etc). And while using this Responsive Ad code you will be styling the Ads with CSS. Yes! it doesn’t violate the Adsense policy now (upto an extent). You will be specifying the Ad sizes in Media Queries inside your Stylesheet file.

Now lets see how to generate responsive Adsense ads for your responsive web design.

1. Generate Responsive Ad Code.

Step 1. Open your Google Adsense Account.

Step 2. Click on My Ads > New ad unit.

New ad unit

New ad unit

Step 3. Enter a Name, Choose the Ad Size as ‘Responsive ad unit (BETA)’. Then fill in the rest of the details like Color Scheme, Channels etc.

Choose responsive ad unit

Choose responsive ad unit

Step 4. Click on Save and Get Code.

Step 5. Copy the code and paste it to a Notepad file.

2. Inserting the Responsive Ad into WordPress.

The following code is compatible with Genesis Framework and is to be pasted in the functions.php. For normal WordPress Themes, You can paste the code in the single.php or where ever you need to place it (without using the function).

Step 1.

For the best page speed practices, We call the Adsense Javascript once in the Footer instead of calling it in every Ad unit. Therefore, Paste the following code into your functions.php.

// Load scripts in the Footer

add_action(‘genesis_after_footer’, ‘script_managment’);
function script_managment() {
wp_register_script( ‘adsensejs’, ‘//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’ );
wp_enqueue_script( ‘adsensejs’, ‘//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js’, false, false, true );
}

Step 2.

After this we create a new Function for the Adsense Ad.

// Adsense Ads

function adsense1 () {
if (is_single()) { ?>
<div class=”adsense1″>
<ins
style=”display:inline-block”
data-ad-client=”ca-pub-xxxxxxxxxxxxx” // REPLACE XXXX WITH YOUR PUBLISHER ID
data-ad-slot=”xxxxxxxxxxx”></ins> // REPLACE XXXX WITH YOUR AD SLOT ID
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<?php
}
}
add_action( ‘genesis_before_entry_content’, ‘adsense1′ ); // ADD THE ADSENSE AD AFTER TITLE OF THE POST
add_action( ‘genesis_after_entry_content’, ‘adsense1′ ); // ADD THE ADSENSE AD AFTER THE POST

In the above code, Replace the Publisher ID and Ad Slot ID from the code you copied into notepad earlier and paste the above code into your functions.php.

Step 3.

Open your style.css file and look at the bottom to see if it has Media Queries built in for different screen sizes. It looks like this:

@media only screen and (max-width:768px){

some css codes here

}

Now just add the following codes into your Stylesheet to display different Ad Units for different Screen Sizes.

Default Size.

This is the Ad size that will be shown to majority of your Desktop users i.e when a user is accessing the webpage on a desktop, This will be displayed.

You need to paste this code before any of the “@media only screen” tags.

.responsive-ad-ht { width: 320px; height: 50px; }

For Screen Size of 240px.

@media only screen and (max-width:240px){

.responsive-ad-ht{width:180px;height:150px}

.adsense1{margin:0 auto;width:180px} //TO CENTER THE AD UNIT

}

For Screen Size of 320px.

@media only screen and (max-width:320px){

.responsive-ad-ht{width:300px;height:250px}

.adsense1{margin:0 auto;width:300px}

}

For Screen Size of 480px.

@media only screen and (max-width:480px){

.responsive-ad-ht{width:336px;height:280px}

.adsense1{margin:0 auto;width:336px}

}

For Screen Size of 768px.

@media only screen and (max-width:768px){

.responsive-ad-ht{width:728px;height:90px}

}

You can add more Media Queries for other screen sizes, Just take reference of the Ad Sizes supported by Adsense.

After that just save your functions.php and style.css and clear your cache to see the new Responsive Ads in effect, Open them in your mobile device to see if they are working fine or not.

The above codes can be easily modified to be used with other WordPress Themes that do not use Child Themes. Though I recommend you purchase a copy of Genesis Theme which is both HTML5 compatible and has all the responsive designs features inbuilt.

Comments

Leave a Reply

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


× 9 = nine

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>