I would like to add a small message above adsense advertisements to signify that it is an advertisement and thank the user for not using adblock. Obviously I would like this to be hidden if the user does use adblock.
I remember doing this a few years ago by simply wrapping the advert using <div class="advert">
and putting the text inside that. It seems that adblock no longer blocks elements in this way as the ad is blocked yet the text remains.
<div class="advert">
Thank you for not using adblock!
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Advertisements directly support the hosting of this site
</div>
I could create a script to detect adblock and hide the text with that but I would rather let the adblock script do the hiding if possible. I am mainly wondering if that is at all possible. Is there somewhere I can include the text so it will be seen as part of the advert and thus be blocked with it?
Well the solution is actually really simple. You just need to apply styles for the text to .adsbygoogle
and then use the ::before
and ::after
pseudo elements to display the text. When the advertisement is blocked the .adsbygoogle
element is not present so the pseudo elements aren't created.
.adsbygoogle {
font-size: 12px;
text-align: center;
}
.adsbygoogle:before {
content: 'Text above';
}
.adsbygoogle:after {
content: 'Text below';
}
It is simple, clean and semantic too which is always a plus. No need for extra markup or any javascript.