Modifiera din responsiva annonskod

Om koden för en responsiv annons inte ger önskat resultat kan du behöva ändra den så att den bättre uppfyller kraven på din responsiva webbplats. Exemplen i denna artikel visar hur du gör ändringarna på rätt sätt.

Innan du börjar:

• Om du inte har använt CSS-mediefrågor och modifierat annonskod tidigare rekommenderar vi att du börjar med exemplet exakt annonsenhetsstorlek per skärmbredd.
• Om du redan är bekant med CSS-mediefrågor och med att modifiera annonskod kan du gå direkt till avsnittet exempel på avancerade kodfunktioner för responsiva annonser.

Obs! Exemplen i den här artikeln visar tillåtna modifieringar av AdSense-annonskod. Du bryter inte mot programpolicyerna för AdSense om du ändrar din responsiva annonskod på de här sätten.

Exakt annonsenhetsstorlek per skärmbredd

Det här exemplet visar hur du modifierar koden för att ställa in specifika annonsenhetsstorlekar för tre skärmbredder, för telefoner, surfplattor respektive datorer. Du behöver ingen tidigare erfarenhet av CSS-mediefrågor eller av att modifiera AdSense-annonskod för att följa det här exemplet.

Nedan visas modifierad responsiv annonskod för att ställa in följande fasta annonsenhetsstorlekar per skärmbredd:

• för skärmbredder upp till 500 pixlar: annonsenhet på 320 × 100
• för skärmbredder mellan 500 och 799 pixlar: annonsenhet på 468 × 60
• för skärmbredder på 800 pixlar och bredare: annonsenhet på 728 × 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å här anpassar du koden till din egen webbplats:

1. Skapa en displayannonsenhet i ditt AdSense-konto och se till att Responsiv är markerat i avsnittet Annonsstorlek. Anteckna följande uppgifter från den responsiva annonskoden:
   • Ditt utgivar-id, till exempel ca-pub-1234567890123456
   • annonsenhetens id (data-ad-slot), till exempel 1234567890
2. Gör följande i exempelkoden:
   • Ersätt alla förekomster av example_responsive_1 med ett unikt namn, till exempel Home_Page, front_page_123 osv.
     Anmärkningar:

     • Det unika namnet får endast innehålla engelska bokstäver (A–Z), siffror och understreck. Det första tecknet måste vara en bokstav mellan A och Z.
     • Du måste använda ett annat unikt namn varje gång du anpassar exempelkoden.
   • Ersätt ca-pub-1234567890123456 med ditt utgivar-id.
   • Ersätt 8XXXXX1 med annonsenhetens id.
3. Bestäm annonsenhetens storlek för respektive skärmbredd:
   • Om du är nöjd med de befintliga annonsenhetsstorlekarna i exempelkoden behöver du inte göra något mer.
   • Om du vill ställa in olika storlekar för respektive skärmbredd gör du så här i exempelkoden:
     • Ersätt 320px och 100px med bredden och höjden på annonsenheten som ska användas på skärmbredder på upp till 500 pixlar.
     • Ersätt 468px och 60px med bredden och höjden på annonsenheten som ska användas på skärmbredder mellan 500 och 799 pixlar.
     • Ersätt 728px och 90px med bredden och höjden på annonsenheten som ska användas på skärmbredder på 800 pixlar och större.
4. Kopiera och klistra in den modifierade annonskoden i HTML-källkoden till sidan där annonsen ska visas.
   Tips! När du har placerat annonskoden på din webbplats rekommenderar vi att du testar annonserna på olika enheter och skärmar för att kontrollera att de responsiva egenskaperna ger önskat resultat.

Exempel på avancerade kodfunktioner för responsiva annonser

Om du märker att vår responsiva annonskod inte uppfyller dina behov kan du modifiera den och ange en exakt storlek på annonsenheten via CSS.

Obs! Vi rekommenderar att du bara använder de här avancerade funktionerna om du känner dig säker på hur man modifierar annonskod.

Ange expanderbar bredd och fast höjd

Du kan modifiera den responsiva annonskoden med hjälp av CSS och ange att annonsenheten ska ha expanderbar bredd. I det här exemplet kan du se vilka ändringar du ska göra:

Exempel med expanderbar bredd och fast höjd

Det här exemplet visar hur du modifierar den responsiva annonskoden för att ange en fast höjd på 90 pixlar och en variabel bredd på 400–970 pixlar:
<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>

Ange en exakt storlek per skärmbredd

Du kan modifiera den responsiva annonskoden med hjälp av CSS och ange att annonsenheten ska ha en exakt storlek. I det här exemplet kan du se vilka ändringar du ska göra:

Exempel med exakt storlek per skärmbredd

Om du vet vilken exakt storlek på annonsenheten som passar bäst för respektive enhet på din responsiva webbplats, kan du ange storleken med hjälp av CSS3-mediafrågor. Följande exempel visar hur du modifierar annonskoden för att använda CSS3-mediefrågor:
<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>

Reglerna för @media följer CSS3-syntax och stöds i alla moderna webbläsare. Tänk på att det officiellt inte finns stöd för att ställa in annonsenhetsstorlek via CSS i externa formatmallar.

Dölja en annonsenhet

I vissa fall, särskilt när det gäller små mobila enheter, kanske du inte vill visa någon annons alls. Du kan dölja annonsenheten genom att ställa in en parameter med hjälp av CSS-mediefrågor så att det inte sker någon annonsbegäran och ingen annons visas. I det här exemplet kan du se vilka ändringar du ska göra:

Exempel på att dölja annonser på vissa skärmstorlekar

Om du bara vill att annonsen ska visas på vissa skärmstorlekar, kan du ställa in detta med hjälp av CSS. Följande exempel visar hur du modifierar annonskoden för att dölja annonser på specifika skärmstorlekar med hjälp av CSS3-mediefrågor:
<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 detta exempel visas inga annonser om skärmbredden är mindre än 400 pixlar.

Obs! Kom ihåg att du alltid måste följa våra policyer för annonsplacering. Tänk på att vi bara tillåter begränsade modifieringar av annonskod enligt våra programpolicyer.