Sådan ændrer du den responsive annoncekode

Hvis vores responsive annoncekode ikke opfylder alle dine behov, kan du ændre koden, så den opfylder behovene på dit responsive website. Eksemplerne i denne artikel viser, hvordan du kan foretage disse ændringer korrekt.

Før du går i gang:

• Hvis CSS-medieforespørgsler og ændring af annoncekoden er nyt for dig, anbefaler vi, at du starter med eksempel på eksakt størrelse på annonceenhed pr. skærmbredde.
• Hvis CSS-medieforespørgsler og ændring af annoncekoden ikke er nyt for dig, kan du gå direkte til afsnittet med eksempler på avancerede funktioner i responsive annoncekoder.

Bemærk! Eksemplerne i denne artikel indeholder kun tilladte ændringer af AdSense-annoncekoden. Du overtræder ikke AdSense-programpolitikkerne ved at ændre din responsive annoncekode på en af disse godkendte måder.

Eksempel på eksakt størrelse på annonceenhed pr. skærmbredde

I følgende eksempel kan du se, hvordan du ændrer din responsive kode for at angive bestemte størrelser på annonceenheder til tre forskellige skærmbredder, dvs. mobil, tablet og computer. Det er ikke nødvendigt at have erfaring med CSS-medieforespørgsler eller ændring af AdSense-annoncekoder for at følge eksemplet.

Her er en ændret responsiv annoncekode, der angiver følgende eksakte størrelser på annonceenheder pr. skærmbredde:

• Til skærmbredder på op til 500 pixels: En annonceenhed på 320 x 100.
• Til skærmbredder mellem 500 og 799 pixels: En annonceenhed på 468 x 60.
• Til skærmbredder på 800 pixels og mere: En annonceenhed på 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>

Sådan tilpasses eksempelkoden dit eget website:

1. Opret en displayannonceenhed på din AdSense-konto, og sørg for, at Responsiv er valgt i sektionen "Annoncestørrelse". Vær opmærksom på følgende oplysninger fra den responsive annoncekode:
   • Dit udgiver-id, f.eks. ca-pub-1234567890123456
   • Id'et til din annonceenhed (data-ad-slot), f.eks 1234567890.
2. I eksempelkoden:
   • Erstat alle forekomster af example_responsive_1 med et unikt navn, f.eks. Startside, forside_123 osv.
     Bemærkninger:

     • Dit unikke navn må kun indeholde engelske bogstaver (A-Z), tal og understregninger, og det første tegn skal være et engelsk bogstav.
     • Du skal bruge et nyt unikt navn, hver gang du tilpasser denne eksempelkode.
   • Erstat ca-pub-1234567890123456 med dit eget udgiver-id.
   • Erstat 8XXXXX1 med id'et til din annonceenhed.
3. Beslut, hvilken størrelse annonceenheden skal have pr. skærmbredde:
   • Hvis du er tilfreds med de eksisterende størrelser på annonceenheden i eksempelkoden, skal du ikke foretage flere ændringer.
   • Hvis du vil angive andre størrelser på annonceenheder pr. skærmbredde, skal du gøre følgende i eksempelkoden:
     • Erstat 320px og 100px med bredden og højden på den annonceenhed, du vil bruge til skærmbredder op til 500 pixels.
     • Erstat 468px og 60px med bredden og højden på den annonceenhed, du vil bruge til skærmbredder på mellem 500 og 799 pixels.
     • Erstat 728px og 90px med bredden og højden på den annonceenhed, du vil bruge til skærmbredder på 800 pixels og mere.
4. Kopiér og indsæt den ændrede annoncekode i HTML-kildekoden på den side, hvor du vil have annoncerne vist.
   Tip! Når du har placeret annoncekoden, anbefaler vi, at du tester dine annoncer på forskellige enheder og skærme for at sikre dig, at den responsive adfærd fungerer korrekt.

Eksempler på avancerede funktioner i den responsive annoncekode

Hvis du finder ud af, at vores responsive annoncekode ikke gør alt, hvad du har brug for, kan du ændre din annoncekode, så den angiver den nøjagtige størrelse på din annonceenhed ved hjælp af CSS.

Bemærk! Vi anbefaler, at du kun bruger disse avancerede funktioner, hvis du føler dig tryg ved at ændre annoncekoden.

Angiv en udvidelig bredde og en fast højde

De kan ændre den responsive annoncekode for at angive en udvidelig bredde og en fast højde for din annonceenhed via CSS. Følgende eksempel viser, hvordan du foretager sådanne ændringer:

Eksempel på udvidelig bredde med fast højde

Dette eksempel viser, hvordan du ændrer din responsive annoncekode for at angive en fast højde på 90 pixels og en variabel bredde fra 400 pixels til 970 pixels:
<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>

Angiv en eksakt størrelse pr. skærmbredde

Du kan ændre den responsive annoncekode, så den overholder en bestemt størrelse på annonceenheden, via CSS. Det følgende eksempel viser, hvordan du foretager sådanne ændringer:

Eksempel på eksakt størrelse pr. skærmbredde

Hvis du kender de præcise størrelser på de annonceenheder, der passer bedst på dit responsive website ved brug af bestemte enheder, kan du bruge CSS3-medieforespørgsler til at angive størrelsen på din responsive annonceenhed. I følgende eksempel kan du se, hvordan du skal ændre din annoncekode, hvis du vil bruge CSS3-medieforespørgsler:
<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>

@media-regler, der anvendes, er i CSS3-syntaks og understøttes af alle moderne browsere. Vær opmærksom på, at angivelse af annonceenhedens størrelse via CSS i eksterne typografiark ikke understøttes officielt.

Sådan skjuler du en annonceenhed

I visse tilfælde, især når det gælder mindre mobilenheder, er du muligvis slet ikke interesseret i at vise en annonce. Hvis du gerne vil skjule en annonceenhed, kan du angive en parameter med CSS-medieforespørgsler, så der ikke foretages nogen annonceanmodning, og der ikke vises nogen annonce. I følgende eksempel kan du se, hvordan du foretager disse ændringer:

Eksempel på hvordan annoncer kan skjules på bestemte skærmstørrelser

Du kan bruge CSS, hvis du kun vil vise annoncer på bestemte skærmstørrelser. I følgende eksempel kan du se, hvordan du ændrer din annoncekode, så der bruges CSS3-medieforespørgsler til at skjule annoncer for bestemte skærmstørrelser:
<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>

I dette eksempel vises der ingen annoncer, hvis skærmbredden er mindre end 400 pixels.

Bemærk! Selvom du har disse muligheder, skal du altid huske at overholde vores politikker vedrørende annonceplacering. Husk! Vores programpolitikker tillader kun en begrænset ændring af din kode.