Optimalizálás kereskedelemre - Mobile Hungary 2014

Ilyen állat pedig nincs 3. MobileHungary2014 BublikMáté KERESKEDELEMRE OPTIMALIZÁLÁS

 E-commerce + M-commerce = Smart commerce  2015-re a netes eszközök több mint fele okostelefon, táblagép  Mobilos online eladások bevétele 15-20%-ra nő  Felhasználói és vásárlási élmény növelése szükséges  Optimalizálás fontossága online kereskedőknek OKOSKERESKEDELEM

 Jó felhasználói élmény: 0-100 ms  Alig érezhető késés: 100-300 ms  Észlelhető késés: 300-1000 ms  Zavaró késés: 1+ másodperc  Oldal elhagyás: 10+ másodperc Felhasználóiélmény  Google ajánlása alapján 1 mp alatti betöltődést kell elérni

 A mobil oldalak többsége 7 másodperc alatt töltődik be  1 másodperc betöltési idő növekedés o 7% konverzió veszteség o 11%-kal kevesebb oldal megtekintés o 16%-kal kisebb ügyfél-elégedettség betöltésiidő

 Amazon o 0,1 mp oldal gyorsulás » 1% bevétel növekedés  Shopzilla o 6-ról 1,2 mp-ra gyorsulás » 12% bevétel növekedés » 25%-kal több oldalmegtekintés OLDALGYORSULÁSHATÁSAI

 Szerver válasz és layout renderelés legyen kevesebb, mint 200 ms  Átirányítások, kérések és forráskód minimalizálása  Optimalizált JavaScript futás és renderelés  Külső JS és CSS betöltésének mellőzése hajtás feletti részben TELJESÍTMÉNYNÖVELÉS

 Gyors betöltéshez nem kell renderelni egész oldalt, csak a hajtás feletti részt  Hajtás felett legyen inline stílusformázás  Késleltetett betöltés a maradék CSS és JS-hez  Kerülni kell a HTML-ben az inline JS kódot HAJTÁSFELETTIRENDERELÉS

 Ahol lehet, képek helyett CSS  Képek tömörítése  HTTP kérések minimalizálása  Kisebb felbontású képek kiszolgálása  Reszponzív képek JS-sel KÉPOPTIMALIZÁLÁS

 Gyors bejelentkezés o aktív közösségi média hozzáféréssel BELÉPÉS,FIZETÉSkönnyítés  Mobilos fizetés o PayU mobil alkalmazás

 whatsmyua.com o LG Nexus 5, Android 4.4 KitKat, Google Chrome Mobile Mozilla/5.0 (Linux; Android 4.4; Nexus 5 Build/KRT16M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36 o Apple iPhone 5s, iOS 7, Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A501 Safari/9537.53 o Smartphone Googlebot: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)  User-Agent Switcher o Böngészőbővítmény az asztali gépről való teszteléshez USER-AGENT

 Külön URL (pl.: m. aldomain)  User-agent alapján átirányítás megfelelő eszközre  Duplikációk elkerülése szükséges o desktop URL-ekre: link rel="alternate" o mobil URL-ekre: link rel="canonical"  Egyszerűbb teljesítményoptimalizálás  Két verzió tartalmát és kapcsolatát szinkronban kell tartani KÜLÖNMOBILOLDAL

 Azonos URL  User-agent alapján különböző HTML kód kiszolgálása  Eszközfüggő tartalom jelzése szükséges a Googlebotnak (HTTP fejlécben Vary: User-agent használatával)  Nincs szükség átirányításokra, kanonizációs meta elemekre DINAMIKUSTARTALOM

 Google által leginkább javasolt megoldás  Egy HTML kód és egy URL  Media Query CSS szabályok a szélességfüggő megjelenéshez @media all and (max-width: 320px) { … }  Nincs átirányítás és több tartalom  Teljesítmény optimalizálás terén nem a legelőnyösebb  Mobil eszközökre is letöltődik minden elem  Régebbi böngészők nem támogatják a HTML5 és CCS3 technológiát RESZPONZÍVDESIGN

 Legnagyobb e-commerce webhelyek Google PageSpeed Insights sebesség teljesítménytesztje (Mobil %, Asztali %) TELJESÍTMÉNYTESZT » Nem reszponzív oldalak: o apple.com (59%, 74%) o ebay.com (79%, 82%) o amazon.com (75%, 86%) o aliexpress.com (59%, 80%) » Reszponzív oldalak: o sony.com (41%, 57%) o walmart.ca (51%, 63%) o currys.co.uk (54%, 88%) o real.de (40%, 55%)

 Minta kódgyűjtemény: http://tedgoas.github.io/Cerberus  HTML-be beágyazott CSS stílusok  Táblázatok alkalmazása (table, tr, td elemek)  Media query-k használata RESZPONZÍVE-MAIL

 Szegmentálás  Mintavételezés elkerülése MOBILFORGALOMKERESŐBŐL

 Kereső- és felhasználóbarát URL-ek  Egyedi meta és szemantikus elemek  Strukturált adatok, mikroadatok  Navigáció, átjárhatóság, indexelhetőség  XML webhelytérkép  Törölt termékek, megszűnt kategóriák átirányítása KERESŐOPTIMALIZÁLÁS

 Hierarchia struktúra  Hasznos, egyedi tartalom o Kategória listázó oldalakhoz o Tematikus ismertetők, tájékoztatók o Részletes termékleírások o Felhasználók által generált tartalom o Paraméterek, címkék o Belső duplikációk elkerülése TARTALOMFEJLESZTÉS

 Not provided kulcsszó visszafejtése Új Google Analytics (GA) nézet létrehozása szűrővel: NOTPROVIDEDKULCSSZÓ

NOTPROVIDED->URL

 Brand  Nonbrand o Head o Torso o Long tail  Google AdWords és Webmestereszközök közös kulcsszóriportja KULCSSZóSZEGMENTÁLÁS

 Google Analytics új működtetési szabványa (protokoll)  Jobb adatgyűjtés bármilyen digitális eszközről  Többplatformos, cross-device mérési megoldás  Megváltozott látogatás (session) kezelési mód  Böngészősütik tiltása esetén is képes adatokat gyűjteni UNIVERSALANALYTICS

 Egyelőre nincs új riport, működésében tér el  Egyéni dimenziók és mutatók  Offline konverziók mérhetősége  Új követőkód  Régi GA fiókokban elérhető az UA-ra történő frissítési lehetőség  Rövidesen minden fióknak kötelező lesz használni TÖBBPLATFORMOSMÉRÉS

 Sok beillesztett mérő- és követőkód helyett egy tároló kód  Elemzési és követési címkék  Aktiválási szabályok  Makrók: név-érték párok  Adatréteg (dataLayer): JS-objektum  Automatikus eseménykövetés GOOGLETAGMANAGER

KÖSZÖNÖMAFIGYELMET!  Bublik Máté Keresőmarketing specialista (Allegro Group HU Kft.) hu.linkedin.com/in/matebublik twitter.com/bublikmate bublik.mate@gmail.com