Anpassa dina annonser för mobilen och tablets

Att anpassa sina annonser för mobilen och tablets är enormt viktigt. De senaste två sommarmånaderna har besökarna till denna bloggen varit fler än tidigare. Men, majoriteten av besökarna har använt sig av mobilen.

Vad innebär då det?

Till att börja med så var annonserna på denna sida anpassade för besökare som surfar in med sin dator. För alla som använde mobilen kom annonserna långt ner på sidan och de flesta mobila besökare såg aldrig våra annonser. Det innebär att annonsintäkterna blev låga.

För att även kunna tjäna några kronor på de mobila besökarna har vi valt att anpassa annonserna. Nu visas en storlek på annonserna om du använder mobilen, en annan om du använder en tablet och en tredje om du använder din dator.

För Starta-Blogg.se används WordPress och temat Hueman.

anpassa annonser för mobilen

Annonsen högst uppe bredvid Starta-Blogg.se är anpassad för olika skärmstorlekar.

Anpassa annonser för olika skärmstorlekar

Först måste vi skapa några div:ar där vi lägger in olika annonskoder. Du kan använda vilken annonskod som helst, till exempel Adsense eller något affiliatenätverk.

I vårt fall väljer vi en stor annonsenhet från Google Adsense för datorer och surfplattor och en mindre annonsenhet för mobiler.

Nedanstående kod + vår annonskod är vår reklam högst upp på sidan. Koden nedan klistrade vi in i filen header.php

<div class="ads-header-desktop">Annonskod för datorer</div> <div class="ads-header-tablet">Annonskod för tablets</div> <div class="ads-header-mobile">Annonskod för mobiler</div>

Finjustera annonsernas placering

När annonserna är inlagda handlar det om att finjustera positionen på annonserna. Koden nedan klistrar du in i style.css. Beroende på hur placeringen blir på din sida kan du justera annonsplaceringen i sidled genom att ändra margin-right och i höjdled genom att ändra margin-top. Glöm inte att testa placeringen med både dator, mobil och en tablet.

.ads-header-desktop {
  float: right;
  margin-right: 0px;
  margin-top: 0px  }
.ads-header-tablet { 
  float: right;
  margin-right: 0px;
  margin-top: 0px; } 

.ads-header-mobile {
  float: right;
  margin-right: 0px;
  margin-top: 0px;} 

Dölj och visa annonser för mobilen, tablets etc.

Nu gäller det att skapa kod som gör så att rätt annons visas beroende på vilken storlek skärmen har. En annons ska visas på mobilskärmen, en annan annons på datorskärmen och en tredje på surfplattor.

Nedanstående kod klistrar man in i style.css. Koden gör att bara en av annonserna visas, beroende på skärmstorleken.

/* hide or display */
.ads-header-desktop { display: block; }
.ads-header-tablet,
.ads-header-mobile { display: none; }

@media only screen and (min-width: 720px) and (max-width: 800px) {
.ads-header-tablet { display: block; }
.ads-header-desktop,
.ads-header-mobile { display: none; }
}

@media only screen and (max-width: 719px) {
.ads-header-mobile { display: block; }
.ads-header-desktop,
.ads-header-tablet { display: none; }
}

En snygg lösning på ett problem. Numera ser besökaren en så stor annons som möjligt beroende på skärmens storlek. Att anpassa annonser för mobilen och tablets är ett steg mot att maximera sina intäkter från bloggen.

Du gillar kanske också...

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Genom att använda Starta-Blogg, godkänner du användning av cookies. more info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

Close