Responsive AdSense Advanced Code

Comment on SEO AdSense WordPress Theme by SEO Dave.

Edited comment to take into account completely getting it wrong, I advised using Smart Sizing should be use Advanced AdSense code with Stallion!

The difference between the two AdSense Responsive Ad Unit types is as follows, the two code examples are the same AdSense ad unit from my account, just the mode is changed either “Smart Sizing (recommended)” or “Advanced (code modification required)”.

Responsive AdSense code – Smart Sizing (recommended) – don’t use this code in Stallion Responsive

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- stradunit1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-8325072546567078"
     data-ad-slot="2310085616"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google AdSense basically reads the devices screen/browser width and sets the ad size as big as possible to fit the width available. If you are running FireFox and the window is over 729px** wide it will show a 728px wide AdSense ad unit, drop the browser width window to 727px** wide it will show the next widest ad size 468px. AdSense assumes it has the full width of the browser window to show the ad.

** Not checked the actual px size each ad unit kicks in, might be 800px and 500px.

That’s fine if the ad unit is located in a part of the webpage that uses the entire browser width, but what about sidebars and main content ads! The floating ad unit has on this website no more than 660px and on the sidebar no more than 300px wide, but AdSense doesn’t know this and so would try to load the 728px wide ad units in full screen desktop PCs.

It would appear if your website has a CSS class that matches the name (for example: .stradunit1) of the Smart Sized AdSense ad unit, the ad unit doesn’t show. I guess it’s stopping the CSS code AdSense Smart sizing uses automatically and nothing shows.

<!-- stradunit1 -->

You will find in Stallion Responsive under /stallion-responsive/colors/mobile.css some CSS rules for

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

These breaks the Smart Sizing AdSense code: which is why I use the Advanced version with edits.

This tells Google AdSense for the ad unit called stradunit1 when the particular min-widths of the device/browser use these ad unit sizes. So min-width 801px use an ad unit 336px by 280px etc… You can see for that ad unit Stallion sets 4 ad unit sizes based on device/browser width and the ad units are all rectangle/square which works well in that area as a floating ad.

The above is built into Stallion Responsive, so needs no editing by a user.

There are similar rules for stradunit2 and stradunit3 so as long as you create 3 AdSense Responsive ad units and name them stradunit1, stradunit2 and stradunit3 and put them in the right boxes on the main Stallion AdSenese options page it’s all automated.

Responsive AdSense code – Advanced (code modification required) – Use this code for Stallion Responsive

<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 is similar to the Smart Sizing with basically the CSS rules built in.

The CSS code is similar to what I’ve added to the Stallion Responsive mobile.css file, for min-width 800px we get a 728px by 90px ad unit, for the main content ad unit that’s too wide, so it would need reducing to no more than 468px by 60px. You can use the above code on the Stallion AdSense options page if you delete the style code.

To use with Stallion Responsive copy the Advanced AdSense code like the code above from your AdSense account and delete this bit:

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

If the user doesn’t want to use the Stallion Responsive js file (that option loads the code once in the footer rather than inline 3 times, better for performance) it’s copy the Advanced AdSense code (minus the style code above) and paste it in the box.

I recommend delete the “script async src” line from the three Advanced sizing code snippets, delete this as well:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

And tick the “Add JS Script to Footer On” box, it’s the best setup AdSense performance wise.

Phew, really messed up the original advice in this comment, completely updated now.

I should check my own Stallion Responsive tutorials : see the section “Main Content Ad Unit 1 – stradunit1” at Google AdSense Responsive Ad Unit Beta Stallion Responsive WordPress Theme Integration.

David