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. I følgende eksempler kan du se, hvordan ændringerne foretages på den rigtige måde:

Vigtigt!

Du kan være sikker på, at eksemplerne i denne artikel kun indeholder 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="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Sådan tilpasses eksempelkoden dit eget website:

  1. Opret en responsiv annonceenhed på din AdSense-konto, og notér følgende oplysninger fra din responsive annoncekode:
    • Dit udgiver-id, f.eks. ca-pub-1234567891234567
    • 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 enegelske 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-XXXXXXX11XXX9 med dit 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 sider, hvor du vil have annoncerne vist.
    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.
Optimize your mobile site with a responsive ad unit one-pager Optimer dit mobilwebsite med en responsiv annonceenhed
Få mere hjælp til at ændre din responsive kode ved at downloade vores oversigt på én side: Optimer dit mobilwebsite med en responsiv annonceenhed

Tilbage til toppen

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 annoncekoden 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
Nedenstående 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:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
De @media-regler, der anvendes, er i CSS3-syntaks og understøttes af alle moderne browsere. Hvis du vil understøtte ældre browsere, f.eks. Internet Explorer 7 eller tidligere versioner, anbefaler vi, at du først angiver en standardstørrelse. Dette sikrer, at der vises en annonce, selvom medieforespørgsler ikke understøttes. Vær opmærksom på, at angivelse af annoncekodens 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 til brug af CSS3-medieforespørgsler med det formål at skjule annoncer på bestemte skærmstørrelser:
<style type="text/css">
.adslot_1 { display:inline-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-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

Selvom du har disse muligheder, skal du altid huske at overholde vores politikker vedrørende annonceplacering. Husk! Det er kun begrænsede ændringer af din kode, der er tilladt i henhold til vores programpolitikker.

Tilbage til toppen

Var denne artikel nyttig?
Hvordan kan vi forbedre siden?