Accelerated Mobile Pages (AMP) för e-handel

I februari 2016 lanserade Google ett nytt open source-projekt för att lösa problemet med långsamma webbsidor i mobilen – the Accelerated Mobile Pages Project. Det var främst ämnat för textbaserat innehåll, som artiklar och blogginlägg, men ganska snart började e-handlare få upp intresset för hur tekniken kunde hjälpa dem att öka konverteringarna. Ett bra exempel är eBay, som varit med och drivit på utvecklingen av AMP genom att vara tidigt ute med implementationen på sin e-handel.

Vad är AMP?

Syftet är att fokusera på det som är viktigast för besökaren – innehållet – och att leverera det så snabbt som det bara är möjligt. Vad det innebär i praktiken är en anpassad version av en webbsida där minsta möjliga mängd styling och speciellt utvalda script används. Man känner igen en AMP-anpassad sökträff i Googles sökmotor genom den lilla blixtsymbolen bredvid titeln. När man klickar på länken öppnas sidan på vad som upplevs som ett ögonblick i en separat läsare. Facebook använder en liknande symbol för sin egen motsvarighet kallad Facebook Instant Articles.

Spridning

Ok, du har förstått att det är en bra idé med innehåll som laddar blixtsnabbt i mobilen. Men vem kommer du att nå? Enligt undersökningen Adobe Digital Index hade Sverige 2016 hela 43 procent nättrafik från mobila enheter, medan det globala snittet låg på 37 procent. Siffrorna är från förra året och vår erfarenhet är att det är mer än hälften idag i Sverige. Med en ökande andel surfande från smartphones blir den mobila upplevelsen allt viktigare. Vi tror att fler och fler användare kommer att känna igen blixtsymbolen och förknippa den med en bra användarupplevelse.

Tekniken bakom AMP

AMP är en öppen teknisk standard som består av tre huvudkomponenter:

  • AMP HTML
  • AMP JS
  • AMP Cache

Man använder de interaktiva HTML-komponenterna för att bygga upp sitt innehåll och AMP JS för rendering. Innehållet levereras sedan från Google AMP Cache, som optimerar innehållet för bästa möjliga prestanda. En viktig skillnad är alltså att när en användare navigerar sig fram till din sida via Googles sökmotor levereras den från Googles CDN, inte från din server.

För att Google ska hitta sidan krävs en speciell sorts kanonisk länk som knyter ihop din vanliga version med AMP-versionen.

Kundcase – Swedish Match

På IVEO har vi implementerat AMP för vår kund Swedish Match och deras e-handelssatsning. Lösningen bygger på Episerver CMS (DXC Service), med Storm Commerce som e-handelsplattform. De sidor som lämpade sig bäst att börja med var varumärkessidor, eftersom de är viktiga landningssidor som rankar relativt högt hos Google. De innehåller också relativt många bilder, vilket kan göra att de laddar långsammare i mobilen. Ganska snart efter implementationen såg vi att vi klättrade i sökresultet. Detta tillskriver vi den snabba laddtiden, vilken förbättrats med upp till tre gånger enligt våra tester.

Sökning på Göteborgs Rapé i mobilen

Sökning på Göteborgs Rapé i mobilen

Den största utmaningen med implementationen var att få ner mängden kod för styling, utan att kompromissera med design och användarupplevelse. Det var också svårt att få dynamiska komponenter som bildspel och varukorgsfunktionalitet att fungera på ett bra sätt. Det senare löste vi genom att införa en varukorgssida, där man hamnar när man lägger en produkt i varukorgen.

En aspekt som är viktig vid implementationen är Google Analytics. För att den initiala visningen av sidan på Googles domän inte ska räknas som en bounce måste man knyta ihop den sessionen med nästa som uppstår då besökaren klickar sig vidare till din domän. Det gör man genom att implementera Google AMP Client ID.

AMP och Episerver CMS

Med Episerver CMS har du full kontroll över din markup, vilket är en förutsättning för att implementera AMP på din sajt. Vår implementation låter redaktören förhandsgranska innehållet innan det publiceras genom channels i Episerver CMS. Det gör att man snabbt kan se hur samma sida kommer se ut både i desktop, mobil och AMP på ett smidigt sätt – direkt från redigeringsläget.

Förhandsgranskning av AMP-sida i Episerver CMS

Förhandsgranskning av innehåll i Episerver CMS

Sammanfattning och avslutande tankar

Det som tidigare hindrat e-handlare var att viktiga funktioner som analytics, betalning och varukorgsfunktioner inte var möjliga på grund av de hårda restriktionerna för vilka script som tillåts. Men i takt med att dessa funktioner blir tillgängliga tror vi att tekniken kommer att bli ett viktig konkurrensmedel för e-handlare inom en snar framtid och att det kan löna sig att vara tidigt ute. Laddtider är en viktig konverteringsaspekt, även om det inte är allt. Allt innehåll är inte lika enkelt att lägga i AMP Cache, till exempel dynamiskt innehåll som förändras med hög frekvens, lagersaldon t.ex, eller javascript-tunga lösningar byggda i React eller Angular, så kallade Single Page Applications. Det är bra idé att först förstå vad som får just dina besökare att konvertera för att se om AMP kan vara en lösning för dig.

Vidare läsning

https://www.ampproject.org/
https://ampstart.com
https://developers.google.com/amp/

Skrivet den 30 oktober av

Kristoffer Palm

Utmärkelse i Årets Byrå 2017 (igen!)

Varje år genomför undersökningsföretaget Regi en branschstudie för byråer där man mäter kundnöjdhet bland Sveriges köpare av digitala tjänster och kommunikation. Resultatet baseras på över 3000 bedömningar från kunder. Förra året fick IVEO förstapris i kategorin Årets Digitalbyrå 7-25 MKR.

Årets utmärkelse innebar en tredjeplats och det är vi förstås mycket stolta över. Placeringen baserar sig på betyg inom ett antal NKI-kriterier (Nöjd Kund Index). Inom följande NKI-kriterier fick vi högst ranking inom vår byrådiciplin:

  • Proaktivitet
  • Kreativitet som helhet
  • Engagemang
  • Leveranssäkerhet

Följande parametrar fick vi näst högst ranking:

  • Teknisk digital kompetens
  • Projektledning
  • Prisvärdhet

Dessa NKI-kriterier har stor betydelse för oss och att kunna klassa sig bland de bästa digitalbyråerna, med den höga standarden som flera av våra duktiga branschkollegor håller, är vi mycket stolta över. Vi ser fram emot ett spännande 2017/2018 och eftersträvar förstås att åter vinna förstaplatsen i nästa års upplaga av Årets byrå.

 

Skrivet den 1 maj av

Johan Wallberg

Inga kommentarer Skriv en kommentar
Kategorier: Utmärkelser

Donera oanvända twittertecken till Läkare i Världen

Tillsammans med JMW Kommunikation fortsätter vi vårt pro bono-arbete för Läkare i Världen. Vi har gått vidare på inslagen bana med att leta oanvända ytor för kommunikation där vi kan låta människor donera annonsyta till Läkare i Världen. På så sätt hjälper vi dem spara in annonspengar som istället kan gå till kärnverksamheten, d.v.s. att hjälpa fler människor i behov av vård. Förra året gjorde vi mobilappen Screen Donor där användare kunde donera yta på sina mobilskärmar till annonser från Läkare i Världen. I år satsar vi på Twitter med tjänsten Tweet Donor.

Det är nämligen så att det finns siffror som visar att medellängden på ett twitterinlägg är cirka 68 tecken. Då maxantalet tecken på Twitter får vara 140 så innebär det att 72 tecken, i genomsnitt, går till spillo varje gång någon twittrar. Tecken som skulle kunna användas till att säga någonting viktigt om Läkare i Världen. Därför har vi skapat Tweet Donor.

Med det sagt hoppas vi nu att du som har ett Twitterkonto ska logga in på www.tweetdonor.com, skriva dina redan din tänkta ”tweets” precis som vanligt, de tecken du inte använder kommer att omvandlas till viktiga textbudskap från Läkare i Världen. Texten läggs in automatiskt i ditt inlägg och du kan sedan välja att publicera som vanligt i ditt flöde. På detta sätt hjälper du Läkare i Världen att nå ut till fler människor vilket är viktigt då de som ideell organisation är beroende av bidrag och volontärer.

Se filmen om TweetDonor

Skrivet den 19 april av

Per Almhorn