How to Use Google Adsense Asynchronous Code

On with 0 Comment
Google Adsense is one of the most popular pay-per-click ad network used by millions of online publishers across the globe. Using Adsense code on a website is quite easy and simply requires copy pasting the relevant code at a specific location within the template. Earlier, the code used to serve these ads was synchronous in nature. At times, this resulted in slow page speed while downloading multiple elements from the web server. The remedy to this simple problem is to deploy asynchronous Adsense code for each of the ad on a single page. This way, your Adsense code won't stall downloading of other critical elements while a visitor is opening a heavy web page. Let's see how to implement this code in a correct way that'll help your website load much faster than ever before giving a better browsing experience to your readers.

Understanding the Basics

Before we move ahead, let's brush up how our regular synchronous code is used. One simply generates the code snippet from his account, copies it and eventually places it at the right place. The same process is repeated if there are multiple ads on the same page.

Now we all must agree that in most of the cases there is more than one ad on a single web page. That's where implementation of asynchronous Adsense code is slightly different from its predecessor. In this case, the code is divided into two parts viz., Common snippet and Ad snippet.
  • Common snippet - The first part is a piece of small code that is used by all the ad units present on the web page. In other words, you don't need to include it separately with each ad unit. Once it is included in the page, all the ad units utilize its support automatically within that same web page.
  • Ad snippet - This is the actual ad unit which is pasted at the exact location where you want to ad to appear on the web page. While rendering the ad, this ad snippet makes use of the common snippet which you've already included once in the web page.
It's quite obvious that the common snippet should be included before all other ad units present on the web page. With these simple facts in our hand, let's move on the next step of actually implementing the asynchronous Adsense code on our website.

Implementing Asynchronous Adsense code

Head on to your Adsense account and create a new ad unit as per your preference. While fetching the ad code, choose the asynchronous code option. This will give the following code skeleton for use in your website.


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

The code shown above contains both the common snippet as well as the ad snippet. Let's dissect this code to differentiate between the two. Following is the common snippet that needs to be included just once on your web page.


/* Common snippet that needs to be included just once on the web page */
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

If you carefully look at this common snippet, you'll notice the async keyword within it. This means that this script is loaded asynchronously while the page is fetched by the browser. Therefore, you can safely insert it at the top within <head> tag of your web page.

Now let's take a look at the second part consisting of the actual ad code that renders the ad unit at a specific location on the web page. Here's the ad snippet that takes help of the common snippet discussed above.


/* Ad snippet that renders the ad unit on the web page */
<ins class="adsbygoogle"
     style="display:inline-block;width:250px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="8197438417"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You should insert this code where you want the ad to appear on the web page. If you've already integrated your Google analytics account with your Google Adsense account and are using google_analytics_uacct="UA-xxxxxx-xx" option in your old synchronous code, you can replace it with data-analytics-uacct="UA-xxxxxx-xx" in this new asynchronous code.

While implementing this new code, make sure you do not intermix old (synchronous) and new (asynchronous) code on the same web page. It may create problems with reporting and data fetching. In simple words, if you decide to use the new code, remove all instances of the old ad code from your website and replace it with the new version shown above.

0 comments:

Post a Comment