I had been trying out various alternatives for pages displaying ads from Google to get all of the JavaScript together just before the </body> tag where it belongs.
Replacing the ad with an empty div with an ID and using postScribe to add the script tag dynamically works fine for one ad and even works for three ads in some browsers provided that the code for each ad is in a separate file. Unfortunately Google Chrome automatically add an async attribute to the script tag that the script then adds resulting in all of the ads using the last size that you specified rather than each using the size you specified before adding each individual ad.
While searching for a solution to this I discovered that Google have solved the entire problem of JavaScript jumbled through the page to display Adsense ads. They call it their new responsive ad layout but it works equally well when you just want to specify fixed sizes for each of the ads.
With the “responsive” ad formats you have CSS to define how big each ad will be, an empty <ins> tag in each spot where the ads are to appear, one call to an external script at the bottom of the page, and one line of JavaScript for each ad.
I decided to try the new ad system out on one of my sites.
The CSS I used to get two ads with different sizes is:
.responsive-120x600-js { width: 120px; height: 600px; }
.responsive-300x250-js{ width: 320px; height: 250px; }
(note the class name is the same as the name I applied to each ad when creating it).
The HTML in each spot where an ad is to appear in the page is (with zeros substituted for my publisher code and 9s substituted for the specific ad slot code):
<ins class="adsbygoogle responsive-300x250-js"
style="display:inline-block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="9999999999"></ins>
of course the second ad uses the other class to specify to use the other size.
Just before the bottom of the page I then added a call to:
<script type="text/javascript" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
and in then added the following JavaScript after that call to add the two ads to the page:
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
This worked really nicely in all of the different browsers I tested it in so with this new way of applying their ads they have finally entered the 21st Century in so far as how the ads can be added to the page. No more JavaScript jumbled with the HTML and no more document.write. Of course this isn’t where Google says to put the script calls but I just experimented with moving pieces down and getting rid of multiple references to the same script until I got it like that (while making sure that the changes didn’t stop the ads appearing correctly).
The ad option is still labelled as BETA at the moment but while there may be some situations where the responsive design aspect of this may not work - particularly if you let Google choose ad sizes based on your container div widths rather than using media queries in the CSS - but it works fine for fixed sized ads.
I guess the next step will be to replace all the ads on my other sites with ones using this new way of attaching them.
If you use Adsense when do you think you will switch to using this more modern way of attaching the ads? Do you think this was an appropriate way for Google to offer or would you have done it differently?
If you are getting your ads from somewhere else do they provide a way to attach the JavaScript to the bottom of the page or do they still use the antiquated document.write and require the JavaScript be jumbled with the HTML? How does their way differ from the new way Google now offers?
Unfortunately Google still generates HTML with inline event handlers so if you block all inline scripts using a Content-Security-Policy header then the ads don’t display. I wonder when Google will fix this?