Google AdSense Ads Design to Achieve Adaptive

Earlier we in the “adaptive webdesign explains website adaptive modification method “in an article today, we will focus on adaptive design approach Google AdSense ads.

The so-called adaptive web design is to make the same page code, can on different devices (from the desktop computer monitor to a smart phone or other mobile device) can have a better browsing experience, basically modified for dual-column web sites The most simple, as long as the increase viewport tag in the HTML head, tail increase in the CSS file for different screen resolutions rules, use the relative width layout width, hide the sidebar, half an hour will be able to enhance the mobile site browsing experience.

But after the completion of the site changes, we will find the original Google AdSense ad units did not achieve adaptive, browsing experience is not good, in fact, simply a few steps, you can let Google AdSense ads adaptive design.

The easiest way is to create a new ad unit, in the “ad sizes” select “Adaptive ad unit” can be, as shown below, that we will not discuss more.

Now mainly discuss such old ad units how to implement adaptive designs.

First, if the original Google AdSense ad code type “sync”, the code must first be changed to “asynchronous” code, login Google AdSense backstage, in the corresponding ad unit, click on “Get Code”, and the current default code is asynchronous code.

Google AdSense Ads Design Customize:

google adsense ads designed to achieve adaptive

After that, we need to make some modifications to the code; there are two ways to modify:

The original sample code:

<Ins class = “adsbygoogle”

style = “display: inline-Block; width: 300px; height: 250px”

Data-ad-Client = “ca-pub-00000”

Data-ad-slot = “00000”> </ ins >

Method 1, the smart Re-size

The middle row ins code of style = “display: inline-block; width: 300px; height: 250px” Replace style = “display: block”, and increased data-ad-format = “auto” in the back of the property.

The revised code becomes:

<Ins class = “adsbygoogle”

style = “display: Block”

Data-ad-Client = “ca-pub-00000”

Data-ad-slot = “00000”

Data-ad-format = “Auto”> </ ins>

Method 2, advanced re-size

Increased <style> style content in front of the entire code, display ads of different sizes for different screen resolutions.

The revised code becomes:


.my_adslot {width: 320px; height: 50px;}

media (min-width: 500px) {.my_adslot {width: 468px; height: 60px;}}

media (min-width: 800px) {.my_adslot {width: 728px; height: 90px;}}

</ style>

<Ins class = “adsbygoogle my_adslot”

style = “display: inline-Block”

Data-ad-Client = “ca-pub-00000”

Data-ad-slot = “00000”> </ ins>

The above two methods are recommended to use Method 1, easy to use.

After this modification, the original Google AdSense ad units can achieve adaptive web design.

Some users might doubt, this method modifies the Google AdSense ad code is in line with Google’s policies, according to the official website on Google AdSense , as adaptive design code changes are acceptable modifications, and is therefore appropriate to site Advertising (modify ads code) does not violate Google AdSense policy.