Effective steps to replace old synchronous Adsense code with new asynchronous code in blogger blogs.

Published



On 2-7-2013 , +Google AdSense  team announced that they are giving a new option for publishers to load Google adsense ads asynchronously.
As they mentioned in there official Google+ Post, new asynchronous ad code lets Website content load quicker for users when they experience intermittent connection problems.

Why Asynchronous?


<script> tags will block HTML renderer if they are found in between any other elements.
That means if you are loading a huge JavaScript file with a blocking <script>  tag at the top of markup, you will not see any progress on the page as the mentioned script is getting loaded and evaluated.
Here adding async tag will help the performance.
if we tag with a aync, the browser will no longer stop the html renderer process,and it will load and evaluated the script block asynchronously.

How to replace old code with Asynchronous adsense code in blogger blog?


If you have approved by adsense,and enabled that in your blogger powered blog, blogger will automatically show ads in posts and sidebar. and you might have added extra ad codes using blogger template editor or "Add a widget". option in layout tab.

Lets see how to change default adsense code to new one. please not that this is not mandatory. its optional.


  • Backup template



Before make any change to your template, Backup your template. if you don't know how, here is an article that will help you to backup your template.

  • Check Earnings tab.

Open blog's dashboard, and on left side, click on the tab named "Earnings". Make sure you have set "true" for "Show ads on blog "   option. and save changes.


  • Optimize template for new adsense code



Open Template Html editor. and find </head> , if you don't know how to search inside blogger template, here is an article that will help you.

Just before the closing head tag, Add below script
 <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Save this for now


  • Replace old adsense script blocks with new asynchronous codes.



Search for "<data:adcode/>" (without quotes), inside blogger template.
Replace that with your new asynchronous code you copied from "Myads" section in adsense dashboard.

It will look similar to this.

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="yyyyyyyyyy"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>


PLEASE NOTE that you dont have to call  <script async="async" src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
script everywhere.  as +Michael Kleber  said in +Google Developers  blog, only calling on top of document is enough even if you have multiple ads in page .

If you have added other ads manually ,using 'Add a gadget' option in layout tab, Open layout tab, edit gadget contents, and replace the old adsense code with new one.

  • Save template. and test your blog.


Troubleshoot


If you are getting error message,  Error parsing XML, line --, column --: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.Make Sure your async is followed by the ="async" property. (async="async").

If you found any other problems setting it up, feel free to start discussion in comments.

Comments

  1. Thanks bro. i got error async, then async true set.

    ReplyDelete
  2. The organization safeguards gamers' rights and aims maintain up} high standards within the business. The MGA is a pillar of equity and transparency for gamers and operators alike. GLI provide testing, certification and skilled services to the worldwide gaming business. The GLI additionally undertake auditing, subject inspections and safety audits, and they work with gaming regulators, suppliers, and operators, with an purpose of ensuring the casino.edu.kg integrity of the gaming business.

    ReplyDelete