Annonseenheter

Slik endrer du responsiv annonsekode

Neste: Retningslinjer for bannerannonser med fast størrelse

Hvis den responsive annonsekoden vår ikke dekker alle behovene du måtte ha på det responsive nettstedet ditt, kan du redigere annonsekoden slik du måtte ønske. I eksemplene i denne artikkelen kan du se hvordan du gjør slike endringer på den rette måten.

Før du begynner:

Hvis du ikke har tidligere erfaring med CSS-mediesøk eller redigering av annonsekode, anbefaler vi at du starter med eksempelet på eksakt annonseenhetsstørrelse per skjermbredde.
Hvis du allerede er kjent med CSS-mediesøk og redigering av annonsekode, kan du gå rett til eksemplene på avanserte funksjoner for responsiv annonsekode.

Merk: Alle eksemplene i denne artikkelen er godkjente endringer av AdSense-annonsekoden. Du bryter ikke programretningslinjene for AdSense hvis du endrer den responsive annonsekoden på disse godkjente måtene.

Eksempel på eksakt annonseenhetsstørrelse per skjermbredde

Dette eksempelet viser hvordan du kan endre den responsive koden for å angi spesifikke annonseenhetsstørrelser for tre forskjellige skjermbredder, dvs. mobilenheter, nettbrett og datamaskiner. Du trenger ikke å ha tidligere erfaring med CSS-mediespørringer eller endring av AdSense-annonsekode for å kunne fullføre dette eksempelet.

Her er en endret responsiv annonsekode som angir følgende eksakte annonseenhetsstørrelser per skjermbredde:

For skjermbredder opptil 500 piksler: en annonseenhet i formatet 320 x 100.
For skjermbredder mellom 500 og 799 piksler: en annonseenhet i formatet 468 x 60.
For skjermbredder på minst 800 piksler: en annonseenhet i formatet 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=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

  <!-- example_responsive_1 -->

  <ins class="adsbygoogle example_responsive_1"

       style="display:block"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="8XXXXX1"></ins>

  <script>

  (adsbygoogle = window.adsbygoogle || []).push({});

  </script>

Slik kan denne eksempelkoden tilpasses nettstedet ditt:

Opprett en bannerannonseenhet i AdSense-kontoen din, og sørg for at du velger Responsiv i Annonsestørrelse-delen. Noter ned følgende informasjon fra den responsive annonsekoden:
- publisist-ID-en din, for eksempel i-gno/re-d1234567890123456
- ID-en for annonseenheten din (data-ad-slot), for eksempel 1234567890
Gjør følgende i eksempelkoden:
- Erstatt alle forekomster av example_responsive_1 med et unikt navn, for eksempel Home_Page eller front_page_123.
  Merk:
  - Det unike navnet kan bare inneholde engelske bokstaver (A–Z), tall og understreker, og det første tegnet må være en engelsk bokstav.
  - Du må bruke et nytt unikt navn hver gang du tilpasser denne eksempelkoden.
- Erstatt i-gno/re-d1234567890123456 med publisist-ID-en din.
- Erstatt 8XXXXX1 med ID-en for annonseenheten din.
Velg hvilke størrelser annonseenheten skal ha per skjermbredde:
- Hvis du er fornøyd med de eksisterende størrelsene på annonseenheten i eksempelkoden, trenger du ikke å gjøre flere endringer.
- Hvis du vil angi andre størrelser på annonseenheten per skjermbredde, må du gjøre følgende i eksempelkoden:
  - Erstatt 320px og 100px med bredden og høyden på annonseenheten du vil bruke for skjermbredder på opptil 500 piksler.
  - Erstatt 468px og 60px med bredden og høyden på annonseenheten du vil bruke for skjermbredder mellom 500 og 799 piksler.
  - Erstatt 728px og 90px med bredden og høyden på annonseenheten du vil bruke for skjermbredder på 800 piksler eller mer.
Kopier den redigerte annonsekoden, og lim den inn i HTML-kildekoden på siden der du vil at annonsene skal bli vist.
Merk: Når du har plassert annonsekoden der, anbefaler vi at du tester ut annonsene på ulike enheter og skjermer for å påse at den responsive atferden er som forventet.

Eksempler på avanserte funksjoner for responsiv annonsekode

Hvis den responsive annonsekoden vår ikke dekker alle behovene du måtte ha, kan du redigere annonsekoden slik at annonseenheten blir tilordnet en eksakt størrelse via CSS.

Merk: Vi anbefaler at du bare bruker disse avanserte funksjonene hvis du vet hvordan du skal endre annonsekoden.

Angi en utvidbar bredde og fast høyde

Du kan endre den responsive annonsekoden slik at du angir en utvidbar bredde og fast høyde for annonseenheten din via CSS. I eksempelet nedenfor ser du hvordan du kan gjøre disse endringene:

Eksempel på utvidbar bredde og fast høyde

I dette eksempelet ser du hvordan du redigerer den responsive annonsekoden for å spesifisere 90 piksler som fast høyde og en bredde på mellom 400 piksler og 970 piksler:

<ins class="adsbygoogle"

       style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Angi en nøyaktig størrelse per skjermbredde

Du kan endre den responsive annonsekoden slik at du angir den nøyaktige størrelsen for annonseenheten din via CSS. I eksempelet nedenfor ser du hvordan du kan gjøre disse endringene:

Eksempel på eksakt størrelse per skjermbredde

Hvis du kjenner til den eksakte annonseenhetsstørrelsen per enhet som passer best på det responsive nettstedet, kan du bruke CSS3-mediesøk til å angi størrelsen på den responsive annonseenheten. I eksempelet nedenfor viser vi hvordan du redigerer annonsekoden for å bruke CSS3-mediesøk:

<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="i-gno/re-d1234567890123456"

        data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

@media-reglene har CSS3-syntaks og støttes i alle moderne nettlesere. Vær oppmerksom på at det ikke er offisiell støtte for å angi størrelsen på annonseenheter via CSS i eksterne stilark.

Skjuling av annonseenheter

I enkelte tilfeller, spesielt på mindre mobilenheter, er det mulig at du ikke ønsker å vise en annonse i det hele tatt. Hvis du ønsker å skjule en annonseenhet, kan du angi en parameter med CSS-mediespørringer, slik at det ikke blir sendt annonseforespørsler eller vist annonser. I det følgende eksempelet ser du hvordan du gjør dette:

Eksempel på skjuling av annonser i bestemte skjermstørrelser

Hvis du bare vil vise annonser på visse skjermstørrelser, kan du bruke CSS til dette formålet. I eksempelet nedenfor viser vi hvordan du redigerer annonsekoden for å bruke CSS3-mediesøk til å skjule annonser på visse skjermstø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="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

I dette eksemplet blir ingen annonser vist hvis skjermbredden er mindre enn 400 piksler.

Merk: Når du endrer den responsive annonsekoden du har kopiert, må du slette disse to linjene:

data-ad-format="auto"

    data-full-width-responsive="true"

Merk: Til tross for denne fleksibiliteten må du fortsatt overholde retningslinjene for annonseplasseringer. Husk at det kun er tillatt med begrensede kodeendringer i henhold til programretningslinjene.

Var dette nyttig for deg?

Hvordan kan vi forbedre den?