AdSense WordPress Theme

SEO Dave

Comment on AdSense Responsive adsbygoogle.js File

AdSense Responsive adsbygoogle.js File

One possibility is you are using broken AdSense code.

The AdSense responsive code I use on this site lacks this code:

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

Which means my AdSense ads code is broken (incomplete), but because Stallion Responsive includes the adsbygoogle.js code link it via the option:

“Stallion Theme” >> “AdSense Ad Options” : “Add Responsive Beta JS Script to Footer” – “Add JS Script to Footer On”.

If you view source of any page of this site you’ll find the above AdSense js file code loaded near the footer area.

I’ve added this options for performance reasons, only load the file once (using the default code supplied by AdSense means you add it three times!) and in the footer rather than mid content.

If that’s not ticked on and your three AdSense ads lack at least one copy of the code I pasted above (it must be loaded once) the AdSense Responsive ad code is incomplete and won’t load correctly.

If I recall correctly you don’t even need AdSense turned on (main Stallion Theme options page) for the js file to load using “Stallion Theme” >> “AdSense Ad Options” : “Add Responsive Beta JS Script to Footer” – “Add JS Script to Footer On”. Means you can turn AdSense off and still use AdSense on text widgets without adding the code above three times inline.

BTW I got a little more code than you posted and see above, suggests you named your AdSense ad “Testing Responsive”. That name won’t work with the Stallion Responsive CSS rules, it must be named:

stradunit1
stradunit2
stradunit3

You can’t test with other named ad units, only those three will work correctly. any other name will try to fill the entire page width, so would revert to the 728px wide ads that don’t fit. Try testing with my stradunit1 AdSense code that I posted in the first response to you, that’s the full code straight from my AdSense account and should work on any site not banned by AdSense.

To use other names you’d have to edit the bottom CSS rules in mobile.css.

If you need to post code surround by code tags

<code>

Code here

</code>

Otherwise WordPress strips it for security reasons.

David

AdSense Responsive adsbygoogle.js File

SEO Dave

Comment on Responsive AdSense Advanced Code

Responsive AdSense Advanced Code

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

Responsive AdSense Advanced Code