AdSense - Have you Updated Your Code?

The early AdSense code consisted of a call to an external script preceded by a series of JavaScript statements setting various values to be used by the external script. This code had to be placed in the spot in the page where you wanted the ad to appear as their code used document.write statements. While it was possible to move the code to the bottom of the page where JavaScript now belongs, the additional scripts you needed to add to the page in order to do this meant that it wasn't worthwhile.

AdSense was then changed so that instead of defining all of the values for the ad within your page itself, you instead provided a slot number and the size, colours etc relating to the ad for that slot could then be defined in your AdSense account. This made it far easier to change the appearance of your ads without having to update the code in your page.

More recently Google has made a further change to the AdSense code in order to modernise the JavaScript being used. This latest change means that when you request the code for a particular ad slot that the code provided is now different from the code previously provided. The end result of running either code is the same but the new version of the code uses more modern JavaScript and is more flexible.

Instead of the following code (where I have substituted asterisks for your client and slot numbers) at the point where the ad is to be placed:

<script type="text/javascript">
google_ad_client = "ca-pub-****************";
/* 120x600, js */
google_ad_slot = "**********";
google_ad_width = 120;
google_ad_height = 600;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The supplied Google code for the same ad now looks like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 120x600, js -->
<ins class="adsbygoogle"
style="display:inline-block;width:120px;height:600px"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Now you could just plug that new code into the page in place of the original but then your code would be just as much of a jumbled mix of HTML and JavaScript as before (although with the benefit of being able to load asynchronously rather than blocking the loading of other files until the ad finishes loading as required wbere document.write is used). There is however also a further difference between this code and the earlier version in that you can also actually rearrange the code to comply with modern practice of keeping the HTML and JavaScript separate.

In place of the original code you place just the HTML part:

<!-- 120x600, js -->
<ins class="adsbygoogle"
style="display:inline-block;width:120px;height:600px"
data-ad-client="ca-pub-****************"
data-ad-slot="**********"></ins>

Then at the bottom of the page where JavaScript belongs you place:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You don't even do that when updating the code for the second ad. You do need to replace the original code with the HTML portion of the new code but all you need to do with the JavaScript is to repeat the one line of JavaScript that is supplied. The same goes for the third ad block if there is one.

So with three ads in the page the JavaScript part would look like this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

In fact if we really wanted to we could simply replace those three lines of JavaScript with one that does the same thing (since that code is designed to allow for ads to be inserted or removed without needing to recode the JavaScript whereas if you have all the JavaScript together at the bottom of the page and know how many ads there are you don't need each ad to test if it is the first one on the page):

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
adsbygoogle = [{},{},{}];
</script>

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate