Ställa in höjden på din flödesannons

Flödesannonsens höjd justeras automatiskt av AdSense så att annonsen passar in väl i det tillgängliga utrymmet. Det innebär att de flesta utgivare inte behöver ändra höjden på sina flödesannonser. Om du har särskilda krav på flödesannonsens höjd kan du anpassa annonskoden för den aktuella höjden. Du kan ange en fast eller variabel höjd beroende på om flödet visas på en icke-responsiv eller responsiv webbplats.

Exemplen i den här artikeln visar godkända modifieringar av AdSense-annonskoden. Du bryter inte mot programpolicyerna för AdSense om du ändrar annonskoden för din flödesannons på de här sätten.

Ange en fast höjd (icke-responsiva webbplatser)

Du kan ange en fast höjd på din flödesannons genom att lägga till ett höjdattribut i annonskoden, till exempel height:120px. Använd det här alternativet om flödesannonsenheten placeras i en fast behållare, det vill säga inte är responsiv.

Om du inte vet vilken höjd du ska ange kan du använda utvecklingsverktygen i webbläsaren för att avgöra den exakta höjden på annonsen utan tomt utrymme. Läs mer i Ta reda på storleken på bilderna i ditt flöde.

Det här exemplet visar en flödesannons med en fast höjd på 120 pixlar:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block;height:120px"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ange en variabel höjd (responsiva webbplatser)

Om bredden på flödesannonsenheten styrs av skärmens bredd, det vill säga är responsiv, måste du ange olika höjd för varje skärmbredd med hjälp av CSS-mediefrågor i annonskoden.

När du bestämmer vilka höjder du ska ange föreslår vi följande:

1. Ändra storleken på webbplatsen till flera olika skärmbredder, som 350, 500 och 1 000 pixlar.
2. Ta hjälp av utvecklingsverktygen i webbläsaren för att bestämma den exakta höjden på annonsen utan tomt utrymme för varje skärmbredd. Läs mer i Ta reda på storleken på bilderna i ditt flöde.

Det här exemplet visar en flödesannons med en höjd på 180 pixlar för skärmbredder upp till 350 pixlar, en höjd på 130 pixlar för skärmbredder från 500 till 800 pixlar och en höjd på 200 pixlar för skärmbredder över 800 pixlar:

<style>
  @media (min-width: 350px) {
    .infeed {
      height: 180px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 130px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 200px;
    }
  }

</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle infeed"
     style="display:block;"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Viktigt! I exemplet ovan har vi markerat de ändringar du behöver göra i annonskoden. Tänk på att använda samma klassnamn (till exempel infeed) i hela annonskoden.

När du har ändrat annonskoden är det viktigt att testa flödesannonsen på olika skärmstorlekar så att du ser att den inställda höjden fungerar på alla typer av enheter.

Varför visas mina flödesannonser ibland med extra tomt utrymme eller en Mer-knapp?

Flödesannonsenheter är responsiva och fungerar med en mängd olika visningsområden. Storleken anpassas automatiskt till sidlayouten genom att annonsen utökas till hela bredden på flödesbehållaren där den placeras. Höjden baseras på innehållet i själva annonsen och dina inställningar för flödesannonser i AdSense.

Ibland kan vi inte justera annonshöjden när en flödesannons placeras i användarens visningsområde (ovanför mitten) utan att ändra layouten på innehållet under annonsen. I sådana fall kanske vi infogar ett tomt utrymme eller visar en Mer-knapp som utökar annonsen. Syftet är att ge en så god användarupplevelse som möjligt.