Responsive Design en Google AdSense

google_adsense_logoHet team van Google AdSense is aan het kijken naar nieuwe advertentieformaten en instellingen. In een kort bericht op Google+ vraagt het team aan gebruikers om met suggesties te komen. "We're constantly working to bring you new ad formats and settings; a few examples include the new 300x600 ad size, the ability to select font settings for your ads, and enhanced text ads. We’d also like to hear your feedback and ideas: Which new ad formats or settings would you like to see in AdSense?" aldus het team.

Zo lopen er op dit moment diverse testen van Google waaronder een test met geanimeerde advertenties, in die zin dat de opmaak van de advertentie wijzigt op het moment dat je hier met de muis overheen gaat. Een andere test betreft pijlen om tussen advertenties te kunnen navigeren, iets wat al enkele jaren geleden werd gebruikt maar op een gegeven moment verdwenen was. Iets waar tegenwoordig met name veel om gevraagd wordt door webmasters zijn advertenties die werken in een responsive design. Responsive design komt tegenwoordig steeds vaker voor en wordt ook aanbevolen door Google, echter een probleem is hier dat AdSense advertenties een vast formaat hebben.

CSS en Javascript

Het is niet toegestaan om de advertenties op een bepaald moment te verbergen of aan te passen met CSS en ook is het niet toegestaan om de code van Google AdSense aan te passen. Er is op dit moment wel een oplossing beschikbaar bedacht door Amit Agarwal Labnol.org. WebSonic.nl heeft nagevraagd of deze methode niet in strijd is met de algemene voorwaarden en een woordvoerder heeft aangegeven dat dit niet het geval is, zodoende kan deze techniek dus veilig ingezet worden voor het plaatsen van advertenties.

De oplossing is het plaatsen van een advertentie op de manier hieronder. Te zien in de code is dat er telkens wordt gekeken hoe breed het scherm is en aan de hand daarvan wordt de juiste advertentie geplaatst. Wil je deze code gebruiken dan dien je deze formaten dus allemaal aan te maken in Google AdSense en vervolgens de juiste code in te voeren achter 'google_ad_slot'. De opgegeven breedtes (800 en 400) kun je in dit geval wijzigen naar wens of aanvullende voorwaarden / breedtes toevoegen aan de code.

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 60;
} else if (window.innerWidth < 400) {
        google_ad_slot = "ad-unit-2";
        google_ad_width = 300;
        google_ad_height = 250;
} else {
        google_ad_slot = "ad-unit-3";
        google_ad_width = 468;
        google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Lees meer over: ,
Nieuwsbrief

Vul je e-mailadres in en ontvang dagelijks een overzicht van de laatste berichten.