Adsense: How to Modify Responsive Ad Code

AdSense Responsive Ad Code makes it possible for publisher to display advertising content that can be adjusted automatically according to the width of gadget's screens used by visitors. But Google also gives guidance to publishers on how to change responsive ad code to adjust to the appearance of an add in different screen sizes.

A simpler choice is to install fixed ad unit which is suitable for all types of gadgets, and if that is the case then most appropriate size is 300x250. This ad size can be used for smart phone as well as large desktop. However, the mentioned ad size is not allowed to be displayed "above the fold" on a smartphone, as it would push the entire post down the screen which annoyed visitors.

By changing responsive ad code, the publisher can control the size of the ad unit displayed, instead of leaving it entirely to Google. For example, publishers can display 336x280 on desktop, and replace it with a 300x250 for "below the fold" ad or 320x100 for "above the fold" ad on small gadget.

Here are the instructions on how to change responsive ad code:

How to Modify Responsive Ad Code for "above the fold" area

Screen widths up to 500px: 320x100 ad unit.
Screen widths 500px - 799px: 468x60 ad unit.
Screen widths 800px and wider: 728x90 ad unit.
Use code shown below:

<style>

.responsive1{width:320px;height:100px}

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

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

</style>

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

<ins class="adsbygoogle responsive1"

style="display:inline-block"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Another option for above the fold area is to display 320x100 for screen width up to 500px; for screen width 500px and wider is to display 100% of screen width and height 90px.
Use code shown below:

<style>

.responsive2{width:320px;height:100px}

@media(min-width: 500px) {.responsive2{width:100%;height:90px} }

</style>

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

<ins class="adsbygoogle responsive2"

style="display:inline-block"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

How to Modify Responsive Ad Code for "below the fold"

Screen widths up to 500px: 250x250 ad unit.
Screen widths 500px - 799px: 300x250 ad unit.
Screen widths 800px and wider: 336x280 ad unit.
Use code shown below:

<style>

.responsive3{width:250px;height:250px}

@media(min-width: 500px) {.responsive3{width:300px;height:250px} }

@media(min-width: 800px) {.responsive3{width:336px;height:280px} }

</style>

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

<ins class="adsbygoogle responsive1"

style="display:inline-block"

data-ad-client="ca-pub-xxxxxxxxxxxxxxx"

data-ad-slot="xxxxxxxxxx"></ins>

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Responsive width and a fixed height

It is possible to have responsive width and a fixed height for ad unit using CSS. This code is particularly quite useful if you want to place an ad for your header. The following example shows you how to make responsive ad code with a fixed height of 90px and a variable width from min-width of 320px to max-width of 970px:

<ins class="adsbygoogle"

   style="display:inline-block;min-width:320px;max-width:970px;width:100%;height:90px"

   data-ad-client="ca-pub-1234"

   data-ad-slot="5678"></ins>

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

<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Do not forget to change the numbers in data-ad-client and data-ad-slot with numbers in your Adsense account. Good luck.

Leave comments

Type it first, then click "Login ..." or "Posting".

aroengbinang.org