Uw responsieve advertentiecode aanpassen

Als onze code voor responsieve advertenties niet alle functies biedt die u nodig heeft, past u uw advertentiecode aan zodat die beter voldoet aan de vereisten van uw responsieve site. De voorbeelden in dit artikel tonen hoe u deze wijzigingen op de juiste manier aanbrengt.

Voordat u begint:

• Als u nog geen ervaring heeft met CSS-mediaquery's en het aanpassen van uw advertentiecode, adviseren we u te beginnen met het voorbeeld van exacte advertentieblokformaten per schermbreedte.
• Als u al vertrouwd bent met CSS-mediaquery's en weet hoe u uw advertentiecode kunt aanpassen, kunt u direct doorgaan naar het gedeelte Voorbeelden van geavanceerde functies voor responsieve advertentiecode.

Opmerking: De voorbeelden die in dit artikel worden beschreven, zijn acceptabele aanpassingen van de AdSense-advertentiecode. Als u uw responsieve advertentiecode op deze manieren aanpast, voldoet u daarmee aan het programmabeleid van AdSense.

Voorbeeld van exacte advertentieblokformaten per schermbreedte

In dit voorbeeld ziet u hoe u uw responsieve code aanpast om specifieke advertentieblokformaten in te stellen voor drie schermbreedten: voor mobiel, tablet en desktop. U heeft geen eerdere ervaring met CSS-mediaquery's of met het aanpassen van AdSense-advertentiecode nodig om dit voorbeeld te volgen.

Hier volgen enkele aangepaste responsieve advertentiecodes waarmee de volgende exacte advertentieblokformaten per schermbreedte worden ingesteld:

• Voor schermbreedten tot 500 pixels: een advertentieblok van 320 x 100.
• Voor schermbreedten tussen 500 en 799 pixels: een advertentieblok van 468 x 60.
• Voor schermbreedten van 800 pixels en breder: een advertentieblok van 728 x 90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Zo past u deze voorbeeldcode aan voor uw eigen site:

1. Maak een display-advertentieblok in uw AdSense-account en zorg ervoor dat u Responsief geselecteerd laat in het gedeelte Advertentieformaat. Noteer de volgende informatie uit uw responsieve advertentiecode:
   • Uw uitgevers-ID, bijvoorbeeld ca-pub-1234567890123456.
   • De ID van uw advertentieblok (data-ad-slot), bijvoorbeeld 1234567890.
2. In de voorbeeldcode:
   • Vervang alle instanties van example_responsive_1 door een unieke naam, bijvoorbeeld Home_Page, front_page_123, enzovoort.
     Opmerkingen:

     • Uw unieke naam mag alleen letters van het Engelse alfabet (A-Z), cijfers en underscores bevatten en het eerste teken moet een letter van het Engelse alfabet zijn.
     • Elke keer dat u deze voorbeeldcode aanpast, moet u een andere unieke naam gebruiken.
   • Vervang ca-pub-1234567890123456 door uw eigen uitgever-ID.
   • Vervang 8XXXXX1 door de ID van uw eigen advertentieblok.
3. Beslis welk formaat uw advertentieblok moet hebben per schermbreedte:
   • Als u tevreden bent met de bestaande advertentieblokformaten in de voorbeeldcode, hoeft u geen extra wijzigingen aan te brengen.
   • Als u wel andere advertentieblokformaten per schermbreedte wilt instellen, gaat u in de voorbeeldcode zo te werk:
     • Vervang 320px en 100px door de breedte en hoogte van het advertentieblok dat u wilt gebruiken voor schermbreedten tot 500 pixels.
     • Vervang 468px en 60px door de breedte en hoogte van het advertentieblok dat u wilt gebruiken voor schermbreedten tussen 500 en 799 pixels.
     • Vervang 728px en 90px door de breedte en hoogte van het advertentieblok dat u wilt gebruiken voor schermbreedten van 800 pixels en breder.
4. Kopieer en plak de aangepaste advertentiecode in de HTML-broncode van de pagina waar u de advertentie wilt weergeven.
   Tip: Nadat u de advertentiecode heeft geplaatst, raden we u aan uw advertenties op verschillende apparaten en schermen te testen om te controleren of uw responsieve advertentieblokken correct werken.

Voorbeelden van geavanceerde functies voor responsieve advertentiecode

Als onze responsieve advertentiecode niet alles doet wat u nodig heeft, kunt u uw advertentiecode wijzigen. Geef bijvoorbeeld via CSS een exact formaat op voor uw advertentieblok.

Opmerking: We raden u aan deze geavanceerde functies alleen te gebruiken als u weet hoe u uw advertentiecode kunt wijzigen.

Een variabele breedte en een vaste hoogte opgeven

U kunt uw responsieve advertentiecode aanpassen om een variabele breedte en een vaste hoogte voor uw advertentieblok op te geven via CSS. In het volgende voorbeeld ziet u hoe u deze wijzigingen aanbrengt:

Voorbeeld van variabele breedte met vaste hoogte

In dit voorbeeld ziet u hoe u de responsieve advertentiecode kunt wijzigen om een vaste hoogte van 90 pixels en een variabele breedte van 400 pixels tot 970 pixels op te geven:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Een exact formaat per schermbreedte opgeven

U kunt uw responsieve advertentiecode aanpassen om het exacte formaat voor uw advertentieblok op te geven via CSS. In het volgende voorbeeld ziet u hoe u deze wijzigingen aanbrengt:

Voorbeeld van exact formaat per schermbreedte

Als u weet welk exact advertentieblokformaat per apparaat het meest geschikt is voor uw responsieve site, kunt u met behulp van CSS3-mediaquery's het formaat van uw responsieve advertentieblok instellen. In het volgende voorbeeld ziet u hoe u uw advertentiecode kunt wijzigen om CSS3-mediaquery's te gebruiken:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

De @media-regels hebben een CSS3-syntaxis en worden door alle moderne browsers ondersteund. Houd er rekening mee dat het instellen van het formaat van het advertentieblok via CSS in externe stylesheets niet officieel wordt ondersteund.

Een advertentieblok verbergen

In bepaalde gevallen, met name op kleinere mobiele apparaten, wilt u wellicht helemaal geen advertentie weergeven. Als u een advertentieblok wilt verbergen, kunt u een parameter met CSS-mediaquery's instellen zodat er geen advertentieverzoek wordt gedaan en er geen advertentie wordt weergegeven. In het volgende voorbeeld ziet u hoe u deze wijzigingen aanbrengt:

Advertenties verbergen voor specifieke schermformaten

Als u advertenties alleen wilt weergeven voor bepaalde schermformaten kunt u hiervoor CSS gebruiken. In het volgende voorbeeld ziet u hoe u uw advertentiecode kunt aanpassen om CSS3-mediaquery's te gebruiken om advertenties te verbergen voor specifieke schermformaten:
<style type="text/css">
.adslot_1 { display: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>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In dit voorbeeld worden geen advertenties weergegeven als de breedte van het scherm minder is dan 400 pixels.

Opmerking: Ook met deze flexibiliteit moet u zich altijd houden aan ons beleid voor advertentieplaatsingen. Houd er rekening mee dat volgens ons Programmabeleid alleen beperkte wijzigingen in uw advertentiecode zijn toegestaan.