5

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.

  • Not that I can see. It appears that they changed the whole Add Ad Unit interface too though it appears not to have any new options. Most text units are small enough that they may still work. Have you tried any of them? If so- how does it look? – closetnoc Jul 17 '14 at 4:28
  • The present design of my website uses media queries to adjust the width of the page to the width of the screen. I have implemented responsive ad units that does the same : adjust the size of the ads according to the width of the screen. However, I can only find link units of fixed width. I agree that there are link units of smaller widths, but the fact that these are fixed widths makes them lose the design aesthetics of the site. In some displays, some parts of these link units lie outside the viewport that disrupts the responsive display altogether. – Rana Prathap Jul 17 '14 at 4:45
  • 1
    Bummer! I am about to work on a responsive design for my site and noticed that there was no responsive link units too. I made the assumption that they still worked okay, but it sounds like Google really needs to look into this. I wish I had an answer for you. Perhaps someone will know a CSS trick or something that will work. Google has specific CSS settings. I wonder if these can be over-ridden by the site owner to give the same responsive effect? Something to ferret out perhaps. – closetnoc Jul 17 '14 at 4:54
3

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 } }
  • Excellent! That was in the lines of what I was looking for. I always like it when I set width to 100%, so I think I will try out your second solution. Thanks! – Rana Prathap Jun 18 '15 at 2:40
4

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.

1

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>
  • How is this acceptable? The adsense link you had posted clearly says Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit.. Your example is not a responsive ad unit. Rather its adding display:none to a fixed width link unit ad. Isint that violation of adsense terms? – Neel Apr 3 '15 at 9:35
  • Actually you are right. It seems, even if its not responsive ad, when you add display:none property to <ins>, then no ads will be requested. So I guess this method should be fine as far as google is concerned since no ad requests will be made if screen width is below 800px. – Neel Apr 3 '15 at 10:07
-1

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

  • 1
    Can you expand on this? Possibly give a simple example? – closetnoc Dec 10 '14 at 4:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.