The Stallion Responsive Premium WordPress Theme includes mobile responsive AdSense ads by default, but the code used is not the best AdSense code possible for performance (how fast your site loads) which is increasingly important to Google search engine rankings.

Below I’ll explain how to build the best possible mobile responsive AdSense code using the new Google AdSense Responsive Ad Unit Beta code AND the end result is even better than integrating AdSense manually.

If you improve site performance, Google web search should send you more traffic, which means you make more money from AdSense.

What is Google AdSense Responsive Ad Unit Beta?

Stallion Responsive AdSense Options
The new AdSense Responsive Ad Unit Beta units after being setup correctly automatically resize based on screen size, so if you are using a mobile phone the ads will be smaller than when using a desktop PC. The javascript for the AdSense Responsive Ad Unit Beta units also loads asynchronously, which basically means it loads faster than the old AdSense code.

Stallion Responsive by default includes mobile responsive AdSense ad units, but they are built on the old AdSense code which doesn’t load asynchronously, so performance wise they are not the best (they are good, but not the best). There is no way to incorporate Google AdSense Responsive Ad Unit Beta units into a WordPress theme without the user creating the beta units within the Google AdSense Control Panel, so they require a little more effort than activating AdSense ads in Stallion Responsive.

You will find on the Stallion AdSense Options page boxes for adding entire ad unit code, the first three boxes labeled Full AdSense Ad Unit Code is where we’ll be adding our code.

Log into your AdSense Control Panel and we’ll create three new AdSense Responsive Ad Unit Beta units under My Ads > +New Ad Unit.

Main Content Ad Unit 1 – stradunit1

For the 1st unit use the following settings.

Name: stradunit1 – it is essential it has this name.
Ad Size: Responsive ad unit (BETA) – must be this unit type, surprisingly unlike all other options it can not be changed later!

Other settings are important, but up to you, choose whatever colour you want etc… the above two settings are the important ones for integration into Stallion Responsive.

Save the new beta ad unit and you’ll have the option of Smart Sizing or Advanced, select Advanced (this is important) and copy the beta ad unit code, it will look something like this:

<style>
.stradunit1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .stradunit1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .stradunit1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- stradunit1 -->
<ins class="adsbygoogle stradunit1"
     style="display:inline-block"
     data-ad-client="ca-pub-8325072546567078"
     data-ad-slot="2310085616"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The code below is what we copy and paste into the Full AdSense Ad Unit Code : stradunit1 form on the Stallion AdSense options page, the remaining code isn’t needed (Stallion Responsive has this code built in with improvements).

<!-- stradunit1 -->
<ins class="adsbygoogle stradunit1"
     style="display:inline-block"
     data-ad-client="ca-pub-8325072546567078"
     data-ad-slot="2310085616"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Should look like the screenshot below-

AdSense Responsive Ad Unit Beta

Tick the Add JS Script to Footer On box on the next option (this loads the JS AdSense file in the footer rather than inline, good for performance) and Save Settings.

Ad Unit 1 is done, you will find the floating AdSense ad unit uses the ad colours you set under the Google AdSense Control Panel, not the colours set on the Stallion AdSense Options page for this unit and the ad will resize based on screen size.

Repeat the procedure for units 2 and 3 with the following settings.

Movable Content Ad Unit 2 – stradunit2

For the 2nd unit use the following settings.

Name: stradunit2
Ad Size: Responsive ad unit (BETA)

Instructions as described for stradunit1.

The code you copy and paste into the Full AdSense Ad Unit Code : stradunit2 should look similar to this:

<!-- stradunit2 -->
<ins class="adsbygoogle stradunit2"
     style="display:inline-block"
     data-ad-client="ca-pub-8325072546567078"
     data-ad-slot="3786818816"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The parts that should be different are the data-ad-client (ca-pub-8325072546567078) and the data-ad-slot (3786818816). The data-ad-client is unique to your account (your AdSense publisher number), the data-ad-slot is unique to that ad unit.

Sidebar Content Ad Unit 3 – stradunit3

For the 3rd unit use the following settings.

Name: stradunit3
Ad Size: Responsive ad unit (BETA)

Instructions as described for stradunit1.

The code you copy and paste into the Full AdSense Ad Unit Code : stradunit3 should look similar to this:

<!-- stradunit3 -->
<ins class="adsbygoogle stradunit3"
     style="display:inline-block"
     data-ad-client="ca-pub-8325072546567078"
     data-ad-slot="5263552012"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The three code snippets above are active ads from my AdSense account, so if you find something isn’t working try one of them with your site, if it still doesn’t work it’s probably not the AdSense code at fault (if a domain is banned from the AdSense program ads don’t load, check your domain at http://www.isbanned.com ).

Do not click your own AdSense ads, you’ll get your AdSense account banned

You now have three AdSense for Content ad units using the new Responsive Beta code. I haven’t set the remaining ad units to use the beta code.

If you want to understand what we’ve done, the first part of the AdSense Beta code (see below) we didn’t copy and paste includes the inline CSS styling which tells AdSense what size ad to load for different screen sizes and the main AdSense javascript file that Stallion Responsive loads in the footer area..

<style>
.stradunit1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .stradunit1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .stradunit1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

The default sizes in the code above (just three of them) are a 320px by 50px ad unit for small screens (anything below 500px screen size), a 468px by 60px ad unit for screens 500px to 799px and a 728px by 90px ad unit for screens 800px+ (Desktop PCs). These are the wrong screen sizes and ad sizes for most sites, so Stallion Responsive has many more built in for those three ad units. Below are the CSS styles built into Stallion Responsive for each ad unit.

.stradunit1 { width: 180px; height: 150px; }
@media(min-width: 241px) { .stradunit1 { width: 250px; height: 250px; } }
@media(min-width: 321px) { .stradunit1 { width: 300px; height: 250px; } }
@media(min-width: 801px) { .stradunit1 { width: 336px; height: 280px; } }
.stradunit2 { width: 180px; height: 150px; }
@media(min-width: 241px) { .stradunit2 { width: 250px; height: 250px; } }
@media(min-width: 321px) { .stradunit2 { width: 300px; height: 250px; } }
@media(min-width: 361px) { .stradunit2 { width: 320px; height: 50px; } }
@media(min-width: 481px) { .stradunit2 { width: 468px; height: 60px; } }
@media(min-width: 721px) { .stradunit2 { width: 728px; height: 90px; } }
@media(min-width: 801px) { .stradunit2 { width: 728px; height: 90px; } }
.stradunit3 { width: 180px; height: 150px; }
@media(min-width: 241px) { .stradunit3 { width: 250px; height: 250px; } }
@media(min-width: 321px) { .stradunit3 { width: 300px; height: 250px; } }
@media(min-width: 361px) { .stradunit3 { width: 320px; height: 50px; } }
@media(min-width: 481px) { .stradunit3 { width: 468px; height: 60px; } }
@media(min-width: 721px) { .stradunit3 { width: 728px; height: 90px; } }
@media(min-width: 801px) { .stradunit3 { width: 300px; height: 250px; } }

As you can see they cover many more screen sizes and ad unit sizes that work perfectly with Stallion Responsive. The CSS code above is within the Stallion Responsive mobile.css file, the benefit of loading in the mobile.css file instead of inline is a performance improvement.

The final line of code we didn’t copy and paste is the AdSense js file, the benefit of loading this file in the footer is again improved performance AND we only load it once. If you manually added the AdSense beta code three times verbatim it would be loaded three times!

By naming the three Beta Ad Units as described above and only copying the part of the code not already included in Stallion Responsive we’ve removed three blocks of inline CSS (replaced by the CSS in the mobile.css file) and prevented the AdSense javascript file from loading unnecessarily (we load it once in the footer rather than three times inline).

We could still add entire AdSense Responsive Beta Ad Units to those boxes with different ad names (we use the ad names stradunit1, stradunit2 and stradunit3 because the ad name is used by AdSense as a CSS class which I’ve added to the mobile.css file) and generate your own inline CSS (or even add your own to a child theme CSS file), but those IMO are the best ad sizes for the screen sizes Stallion Responsive is designed to work with.

David Law

David Law > AKA SEO Dave
*
: Experienced WordPress SEO Expert, Internet Marketer, Developer of the Best SEO Package Stallion Responsive WP SEO Theme (tested to WordPress 4.8 June 2017) and Nice Guy :-)

Website - SEO Tutorial for WordPress