Google Adsense Asynchronous ad code implementation tutorial

Google Adsense Asynchronous Ad Code Benefit

Google Adsense has come up with Asynchronous ad code.This is still in beta stage.But it can be used safely on your website without any issue.I have tried Asynchronous version of ad code without any issue on this website.You should also replace your existing Adsense ad codes with Asynchronous version of ad code.

The reason I use asynchronous adsense ad code is performance and better pagespeed score.The performance is more evident on mobile browsers than on desktop browsers.I have conducted a simple test to verify benefit of asynchronous adsense ad code over synchronous adsense ad code.

In this test I checked a web page on this website twice.First time with Synchronous version of Adsense code and second time with Asynchronous version of ad code.Below is the screen shot of both the tests

Web Page with Synchronous Adsense ad code

Google Adsense Synchronous Ad code score
Google Adsense Synchronous Ad code score

Web Page with Asynchronous Adsense ad code

Google Adsense Asynchronous Ad code score
Google Adsense Asynchronous Ad code score

In first case the problem reported in PageSpeed test was

Your Page has one blocking script resource and the resource causing the issue was Google Adsense JavaScript resource.The resolution mentioned was Use Asynchronous version of Google Adsense JavaScript resource.

This was the only problem reported in PageSpeed test.So I resolved this problem by using Asynchronous version of ad code.

By using Asynchronous version of ad code pagespeed score increased from 79 to 98 in case of mobile browsers and from 93 to 99 in case of desktop browsers.There is no problem reported in PageSpeed analysis as well.So the pagespeed gain was entirely due to switch from synchronous ad code to asynchronous ad code.

So it is easy way to increase your PageSpeed score and make your website faster.Website speed has become an important metrics in SEO and visitor experience.So you should switch from old ad code to new asynchronous version of ad code.

Creating Google Adsense Asynchronous Ad Code

Creation of Google Asynchronous Ad code is very simple.You do not have to create new adsense ad unit for this case.You can use your existing adsense ad unit.Follow below steps to get asynchronous ad code from your existing adsense ad unit.The method remains the same for new ad units as well.The way you create new ad unit does not change.

  • After sign into your Google Adsense account go to My ads page
  • Click on Get code option of ad unit you want to use on your site.
  • From the Pop up select Asynchronous (BETA) in Code Type drop down
  • Copy the Ad code.

Now we know the process to get the ad code.Next we will see process to add the ad codes on your website.

Adding Google Adsense Asynchronous Ad Code

The process of adding asynchronous ad code is slightly different from that of synchronous ad code.The asynchronous ad code looks like

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- your ad unit name -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-000000000000000000"
     data-ad-slot="000000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You will have unique numbers instead of zeros in above code.Now the code is divided into two parts.The first part is the line above your ad unit name line.This part remains the same for all ad units.I have reproduced the first ad code part for your reference

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

Now the important part begins.You should copy the first ad code part as shown above and paste it above </head> tag of your website.For WordPress users this tag is in header.php file of your theme.You should add first part of asynchronous ad code just above this tag and save the file.You should add first part of ad code only once for any number of ad units.

The important part is completed above.Now you should add second part of ad code just like you do for synchronous ad code.To be more detailed the second part of asynchronous ad code is added to the place you want to show the ads.I have reproduced second part of the ad code for your reference.

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

You should add second part of each ad unit you want to display on your web page.So for example if you want to show three ad unit then add second ad code of all three ad unit.But you will have to add first part only once.The first part of ad code remains the same for all ad unit.

One important point is you should not use any synchronous ad code if you are using asynchronous ad code.So delete all your synchronous ad code after adding asynchronous ad code.

Conclusion

Google Adsense Asynchronous ad code is a part of Google initiative to make web a faster place.So you should take benefit of this feature and replace your existing ad code with this ad code.

Consider sharing this post in case you found this useful.

5 thoughts on “Google Adsense Asynchronous ad code implementation tutorial

  1. I switched to asynchronous ad unit around a month ago and after doing so, i faced sudden drop in the earning. I suggest everyone that do not switch to this new ad as i have already suffered, so i don’t want anyone else to suffer.

    • Does you traffic and other factors remain the same?

  2. Thanks for publishing such a helpful article, solved my asynchronous ads problem. 🙂

  3. I don’t know why, but asynchronous ads are not showing on my WordPress blog. Do you have any solution?

    • Are you getting blank spaces? Please follow the steps mentioned above

Leave a Comment