Melding

Ga naar Uw AdSense-pagina, waar u gepersonaliseerde informatie over uw account vindt om het maximale uit AdSense te halen.

Advertentieblokken

Uw responsieve advertentiecode aanpassen

Als onze responsieve advertentiecode niet alle functies biedt die u nodig heeft, kunt u uw advertentiecode aanpassen zodat deze beter voldoet aan de vereisten van uw responsieve site. In de volgende voorbeelden ziet u hoe u deze aanpassingen correct doorvoert.

Belangrijk:

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.
    Opmerking: 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 advertentiecodes

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.

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.

Was dit nuttig?

Hoe kunnen we dit verbeteren?
true
Uw AdSense-pagina

Maak kennis met de AdSense-pagina: een nieuwe bron waar u gepersonaliseerde informatie en nieuwe mogelijkheden in uw account kunt vinden om het maximale uit AdSense te halen.

Zoeken
Zoekopdracht wissen
Zoekfunctie sluiten
Google-apps
Hoofdmenu
15479677921655485176
true
Zoeken in het Helpcentrum
true
true
true
true
true
157
false
false