Responsive link units in AdSense

Question

As of now, it appears that the only way to implement Google AdSense ad units for a website built on responsive design is to use the Google responsive ad units. However, it appears that there is no responsive option available for link units.

Is there any way to implement Google AdSense linkunits on a responsive design without disrupting the design and without having content lie outside the viewport?

I asked the same question at Google Product forums and they couldn't help either.

Answer 1

Responsive link units are now available in adsense.

Responsive link units allow you to support a wide range of devices (i.e., computers, phones, tablets, etc.) by automatically adapting their size to fit your page layout. They're intended to work with sites built with responsive design, but will work on non-responsive sites too. Regardless of which device users use to visit your site, responsive link units can help you provide a great ad experience.

How the code looks like.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive adlinks -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The texts inside the link-buttons match nicely to the content of the sites I tested and look very tempting. In my tests they performed very well, but I removed them as it feels like annoying visitors by tricking them into links that actually don't match the words shown in the buttons.

They performed outstanding below the first paragraph and still nice at the end of the page.

Answer 2

I know this is an old topic, but its relevancy is becoming greater nowadays (2015-06-17). As Google mentions in this document, you are allowed to hide any ad (not just link ads units) "on smaller mobile devices". For example, if you specifically want the adslot not to show up in screens under 400px in width, then you can do this (Google's own example):

<style>
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>

Quoting Google:

you can set a parameter with CSS media queries so that no ad request is made and no ad is shown

That is what is happening with the media query using display: none: ads will not be requested, so you don't risk infringing the Adsense policies.

In the HTML and Javascript, you just need to use the adslot_1 class, the rest of their code does not require any modification.

<ins class="adsbygoogle adslot_1"
   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>

By doing this, you do realize that the height and width of your adslot for other screen widths can be modified accordingly, which means, your ad unit becomes responsive without using the standard "Google responsive ad unit".

Expandable width solution

Therefore, specially in a link ad unit, I normally do not even use display: none. You can tackle the problem with their expandable width approach, which is yet another's Google's example:

<style>
.adslot_1 { display:inline-block;min-width:100px;max-width:970px;width:100%;max-height:100px; }
</style>

By setting a minimum and a maximum width while the width itself adapts to the screen (setting it to 100%) is an option that supports all link ads widths, from the currently largest ones (728x15 and 200x90) to the currently smallest ones (468x15 and 120x90), and you don't even need @media queries!

Therefore, if in the future Google creates smaller link units, your unit will support, request and display them! This is due to Adsense's automatic sizing based on the space available.

Specific @media queries for specific ad sizes solution

If you still prefer to set fixed widths and heights (for a particular link ad), then you can specify even better your media queries with both min-widths and max-widths. E.g.:

<style>
.adslot_1 { display:inline-block; width: 728px; height: 15px; }
@media (max-width: 479px) { .adslot_1 { width: 468px } }
@media (min-width: 480px) and (max-width: 799px) { .adslot_1 { width: 728px } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; text-align: center } }
</style>

This will allow both 468x15 and 728x15 link ads to be displayed under 800px screen widths and all the other link ad units available above this width (from 120x90 up to 200x90 and obviously, 728x15 as well). If a 100x15 link ad unit is created in the future, you can either set @media (max-width: 479px) { .adslot_1 { width: 100% } } or another media query:

@media (max-width: 199px) { .adslot_1 { width: 100px } }
@media (min-width: 200px) and (max-width: 479px) { .adslot_1 { width: 468px } }

Answer 3

This is what I did for hiding long adlinks on mobile. This method (that's what I believe) also falls under one of the acceptable modifications of changing adsense code - https://support.google.com/adsense/answer/1354736?hl=en

<style type="text/css">
.adslot_1 { display:inline-block; width: 728px; height: 15px; }
@media (max-width:800px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-..."
data-ad-slot="..."></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Answer 4

Use div containers and put both the big and small links, then use media queries to display:none.