How to Customize Adsense Synchronous Ads Size (Responsive Synchronous Ad Size)

0 34

Synchronous ads tends to perform well but it also decrease page rendering time and user engagement, but synchronous ads are not responsive they must be configured manually with small javascript coding knowledge.

WE ARE NOT AGAINST ADBLOCK, BUT DISABLE IT TO VIEW this website PROPERLY, THANKS.

Adsense Sync ads advertisement Synchronous loading
When using adsense Synchronous Adunits, ads will be loaded in order in a blocking manner so browser will wait to fetch the content and show it when all Ad resources have loaded

Having synchronous responsive units is good for tracking which ad-size is performing well in Google adsense dashboard, unlike full responsive ads using suitable and well performing adsize will help you earn more from the same traffic you have

 

When you want to make a synchronous ad-code, you must create different Adunits with related sizes, 728×90 Leaderboard, 336×280 Large rectangle, 300×250 Medium rectangle and 320×100 Large mobile banners are the most outperforming ad-sizes usually recommended by experts

Im going to use 728×90, 336×280 and 300×250 in the following example & its pure javascript so no jQuery needed

<div id="postad" style="text-align: center;">
<script type="text/javascript">
var width = document.getElementById("postad").clientWidth;  // Check for available width
google_ad_client = "ca-pub-xxx"; // Replace ca-pub-xxx with your Google adsense publisher id
if (width >= 728 ) { 
google_ad_slot = "Leader-Board-Adslot"; // Replace with a 728x90 adslot id
google_ad_width = 728;
google_ad_height = 90;
} else if (width < 728 && width >= 336) { 
google_ad_slot = "Large-Rectangle-Adslot"; // Replace with a 336x280 adslot id
google_ad_width = 336;
google_ad_height = 280;
} else {
google_ad_slot = "Medium-Rectangle-Adslot"; // Replace with a 300x250 adslot id
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

The above responsive code is suitable for ads above or below posts

but for sidebars using 336×280 or 300×250 is better

Here is an example

<div id="sidebar" style="text-align: center;">
<script type="text/javascript">
var width = document.getElementById("sidebar").clientWidth;  // Check for available width
google_ad_client = "ca-pub-xxx"; // Replace ca-pub-xxx with your Google adsense publisher id
if (width >= 336) { // Checks if width is greater than or equal to 336 if true shows 336x280 ad
google_ad_slot = "Large-Rectangle-Adslot"; // Replace with a 336x280 adslot id
google_ad_width = 336;
google_ad_height = 280;
} else { // if width is lessthan 336 pixel then 300x250 ad will be shown
google_ad_slot = "Medium-Rectangle-Adslot"; // Replace with a 300x250 adslot id
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

You can configure Header ad as following

<div id="headerad" style="text-align: center;">
<script type="text/javascript">
var width = document.getElementById("headerad").clientWidth;  // Check for available width
google_ad_client = "ca-pub-xxx"; // Replace ca-pub-xxx with your Google adsense publisher id
if (width >= 728) { 
google_ad_slot = "Leader-Board-Adslot"; // Replace with a 728x90 adslot id
google_ad_width = 728;
google_ad_height = 90;
} else {
google_ad_slot = "Large-Mobile-Banner-Adslot"; // Replace with a 320x100 adslot id
google_ad_width = 320;
google_ad_height = 100;
}
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

You can configure Header Ad further with a 468×60 Banner

<div id="advancedheaderad" style="text-align: center;">
<script type="text/javascript">
var width = document.getElementById("advancedheaderad").clientWidth;  // Check for available width
google_ad_client = "ca-pub-xxx"; // Replace ca-pub-xxx with your Google adsense publisher id
if (width >= 728 ) { 
google_ad_slot = "Leader-Board-adslot"; // Replace with a 728x90 adslot id
google_ad_width = 728;
google_ad_height = 90;
} else if (width >= 468 && width < 728) { 
google_ad_slot = "Banner-adslot"; // Replace with a 336x280 adslot id
google_ad_width = 468;
google_ad_height = 60;
} else {
google_ad_slot = "Large-Mobile-Banner-Adslot"; // Replace with a 300x250 adslot id
google_ad_width = 320;
google_ad_height = 100;
}
</script>
<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

Here width is calculated using the div id & ClientWidth so it can accurately calculate available inner width, if you want to calculate the width space occupied by the element, including padding and borders replace clientWidth with offsetWidth

var width = document.getElementById("divid").clientWidth;

every div must have a unique Id, or calculation may fail & wrong sized Ads may show, with this method you can show responsive Synchronous ads, i have been using this method since a long time it is totally safe, you can remove the javascript comments starting with // …………

I will explain how to hide Synchronous Adsense ads in another post.

Leave A Reply