AdSense Responsive Ad Units

Comment on SEO AdSense WordPress Theme by SEO Dave.

Updated to take into account a brain fart, see later comment.

Sounds like you are using the widget area correctly.

I’ve just tested two scenarios that worked as expected (update: I was wrong).

On this website under “Appearance” >> “Widgets” made sure I didn’t have the “Stallion AdSense S1 Widget” added to a widget area (or you could disable another AdSense ad on the main AdSense options page: can’t use more than 3 content ad units).

Drag n dropped the “Stallion AdSense S1 Widget” to the “Floating Content Area”.

Under “Stallion Theme” >> “AdSense Ad Options” : “Full AdSense Ad Unit Code : stradunit3” form box I’ve added a full AdSense Responsive ad unit, this code (got it from my AdSense account- this bit not completely true):

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

Update: posted the correct code, BUT I didn’t get it directly from my AdSense account, it’s a modified version of the Advanced AdSense code with the top few lines deleted, I thought it was the Smart Sizing AdSense code. Had I used the Smart Sizing code would have replicated the text widgets not loading behavior.

Won’t make any difference if you haven’t setup a responsive code like this for my tests below, the benefit of doing it this way is the above code is the best responsive AdSense ad unit code you can use.

Under “Stallion Theme” >> “Layout Options” : “Content Widget Area Alignment” tested all three options-

No Float
Float Left
Float Right

And the AdSense ad unit loaded as expected (edit: because I used an edited version of the AdSense Advanced Code, if you use smart Sizing it fails on the two floats, not sure why).

What that option does is add a CSS class to a div that holds the widget area.

The output for no Float (align content to the left, not a float).

<div id="content_widget" class="sidebar-box align-left">

The output for Float Left (float content to the left).

<div id="content_widget" class="sidebar-box floatleft">

The output for Float Right (float content to the right).

<div id="content_widget" class="sidebar-box floatright">

View source and check you see this code close to the AdSense code.

Second scenario was similar to the above, on a test site (example output, not an ad now just a text widget with some text, but I tested with AdSense ads: http://wordpress-test2.xllx-inc.com/multiple-markup-tests/ ).

Under “Appearance” >> “Widgets” made sure I didn’t have the “Stallion AdSense S1 Widget” added to a widget area (or you could disable another AdSense ad on the main AdSense options page: can’t use more than 3 content ad units).

Drag n dropped a “Text Widget” to the “Floating Content Area”.

Logged into my AdSense account and copied a Responsive AdSense ad I prepared earlier :-) Used the Smart Sizing Responsive Ad unit code:

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

The above is a full responsive AdSense ad, would work on any website, Stallion Responsive includes CSS code that uses the “stradunit1” for sizing (stradunit1 is a CSS class .stradunit1 and Stallion includes that CSS class in the mobile.css file).

Pasted the AdSense code into the text widget and again tested all three “Content Widget Area Alignment” settings as before with the same result.

Update: Re-tested the above code which is the Smart Sizing code (which shouldn’t work) and on my test website it does work for the floats IF the text widget also includes some content. For my test I’d given the text widget a heading so it showed up even if the AdSense ad didn’t. I understand what’s happening now. Because the Smart Sizing code tries to fill the entire screen (actually entire element it’s in: I thought it was screen width, it’s element width- wonder if that’s new was in beta when I first tested?) if it’s say added to a floating div with no other content, AdSense reads the element (the floating div) as having no width (that’s how floats work, they have no width, the content within “creates” the width), since there’s no space for an ad, no ad is shown. The none float code is different, the div without a float fills the entire content width, so there’s space for an AdSense ad.

I discovered something new today :-) don’t use AdSense Smart Sizing ad code within a float unless the floated div has other content to set it’s width.

Also tested the Advanced Responsive AdSense ad unit code (the version with the specific CSS built in, so doesn’t have the stradunit1 CSS class). It also worked, though the sizes didn’t work because of the built in inline CSS rules.

So couldn’t find anything wrong (edit: sort of :-)).

I know you like to change your CSS files, if you’ve edited the CSS classes .floatleft and.floatright for example adding hidden CSS or something that would move the code that could explain why you see the AdSense code in the code, but not on the page for those two settings: the CSS is hiding the content. As you can see above the only difference between

No Float
Float Left
Float Right

Is three CSS classes added to a div
.align-left
.floatleft
.floatright

If you are editing one of the CSS files try one you haven’t changed to see if it works.

David