Elkészítettem webáruházat a Google AMP (Accelerated Mobile Pages) technológia felhasználásával olyan, amely összes A-tól Z-ig szabályok szerint megfeleljenek.
Sok mindent egyedül leprogramoztam, saját UX / UI design tervezés szerint implementáltam, egyedileg fejlesztettem a webshopot, amit élesbe került az statikus, de szükséges szerint el tudom készíteni dinamikusan, azaz 2db CMS (WordPress és Drupal) alatt is.
Október 6.-án estén publikáltam az egyedi webáruházamat, természetesen demó változat miatt nem dinamikusan, hanem statikusan mutatom meg az érdeklődöknek, hogy a későbbiekben miként lehet tovább fejleszteni, lehetőleg dinamikusan főleg a megrendelési funkciók (folyamat lépései) miatt szükséges.
DEMO webcíme: https://amp.juszkocs.hu/
Responsive - minden eszközön felhasználóbarát: Akár legkisebb mobilon, azaz 320-astól nagyobb monitor, azaz 1920-ig felhasználó barát az oldal.
Fontos megjegyzés:
Mivel ingyenesen vállaltam, tanácsokat / segédeket és tippeket adtam meg, így 100% helyett 70%-ileg csináltam meg, hogy a versenytársak NE legyenek kényelmesek és NE 100%-ilag lustaságból lopjanak Tőlem.
Ebben a cikkben mindent részletesebben leírtam, és ezek alapján megfogják érteni.
Fontos tudnivalók, amiket tudni kell, mielőtt megnézi a webáruház demót
Ahogy említettem, hogy ez egy demó, így ne ijedjenek meg, ezért arra gondoltam, hogy minden menüt lépésről lépésre leírom nektek a tudnivalókat. Így lehet elkerülni a félreértéseket meg esetleg túlreagálásokat.
Bemutatkozásról (másképpen javaslatokról) van szó, így nem valódi, ezért dinamikus helyett statikus lett a webáruház oldal.
Miért bízz bennem ez az új technológiával kapcsolatban?
Mert tavaly október 12.-én Budapesten a Google cég rendezett egy versenyt, amely a “Google Hackathon webfejlesztői” számára versenyt hirdették. Az amerikai férfi volt és Google cégen dolgozik, aki szervezte a programot.
Arról szólt, hogy felmérték a programozók tudását, akik készítenek az AMP weboldalt, és mi csapattal nyertünk, én voltam az aki nagy szerepet játszott és nekem köszönhetően szép eredményt hoztunk. Nélkülem nem sikerültek volna.
Aki ismeri engem, az nagyon jól tudja, hogy régebben sok helyen versenyeztem már a siketekkel és a hallókkal egyaránt. Sokszor első lettem egyénileg (általános suli alatt és képviseltem őket), de volt már, hogy csapatban (gimnázium idején alatt, de nem képviseltünk őket) is elsők lettünk. Nagyon eredményes tudok lenni, ha tényleg engem érdekel és motivál valamelyik téma, máris tudok elérni, hogy első legyek, mert ebben nagyon jó vagyok és soha nem szoktam veszíteni. Bármi verseny terén nagy tapasztalatokkal rendelkezem.
Webshopos adataim:
Website Name: Car dealers webshop demo (Autókereskedő webáruház drótváz)
Website URL: https://amp.juszkocs.hu
Description: Google AMP - DEMO introduction website ( Google AMP élőnézet (példa) bemutatkozás weboldal)
Category: Ecommerce (Elektronikus kereskedelem)
Sector: Car dealers (Autókereskedő)
Version: 1.0
Author: Juszkó Csaba, JUSZKOCS
Author URL: https://www.juszkocs.hu
Menütérkép első lépések útmutató, mint bemutatkozás
Főoldal:
Itt minden ami kiemelt, lehetőleg égetően fontos témák a marketing szempontból, de semmiképpen ne legyen bőségesebbek, mert rondíthatja el a betöltési időt, mivel főoldal a legfontosabb indexelő oldala.
Feljebb, aki szeretne többet tudni a részletekben, tovább lehet kattintani a másik menübe.
url: https://amp.juszkocs.hu/index.html
Modellek:
Összeraktam az alap dolgokat, amikre a marketing szerint szükséges:
- Belső
- Külső
- Üzletek
- Boxok: Kocsik áttekintések, az egyikre kattintás után minden tulajdonságokról és technikai adatokról megtudhatja a vevők
url: https://amp.juszkocs.hu/Modellek.html
Modellek aloldal:
Összeraktam minden áttekintésen, amire lesz szükség. (Marketing szempontból)
Mivel hosszú lett volna, ezért létrehoztam egy TAB menüt (“lapozó” menü) és TAB content (lapozó tartalom) részt, azzal segíti, hogy nem kell sokat lefelé görgetni.
- Videó bemutatkozás
- Lapozó tartalmakon:
- Leírás
- Technikai adatok
- Árak
- Letölthető dokumentumok
- Újdonságokról, miért válasszon minket, szolgáltatásokról
- Minden képek (külső, belső), Megrendelés és Időpontfoglalás
url: https://amp.juszkocs.hu/Modellek/Modell_altermek_oldal.html
Elvihetők:
Nemcsak az újabbakat, hanem használtakat is lehet megjeleníteni.
Szűrő boxokkal rendelkezik az oldal. JSON fájllal lettek feltöltve anyagok.
Szűrő lista működése:
- Lehet egyik márkát vagy lehet összes márkát listázni
- Lehet olcsóbb-drágább-at vagy drágábbat-olcsóbbat listázni
url: https://amp.juszkocs.hu/Elvihetok.html
Elvihetők aloldal:
Bemutatkozáshoz minden kell ami fontos: videó, külső / belső képek, leírások, technikai adatok, árak és dokumentumok.
Mert ezek alap dolog, hogy több információt nyújtana a vevők számára, és akkor nagyobb lesz esélye jó döntést hozni, hiszen az ilyen márkák eléggé nagyon drágák.
url: https://amp.juszkocs.hu/Elvihetok/Elvihetok_kocsi.html
Kereskedők:
Saját márka szerint térképet beállítható, hogy lakcím segítségével közelebbi üzletre megtalálhatják a vevők.
Lehet létrehozni hozzá hasonlóan menüpontot, csak annyi, hogy Szerviz és innen megtalálhatják, hogy melyik a legközelebb lakcím helyétől a szerviz.
url: https://amp.juszkocs.hu/Kereskedok.html
Tartozékok:
Mint tudjuk, hogy minden boltokban a kiszemelt kocsikban önmagában kevés, ezért majdnem mindenki külön extrával szoknak megrendelni az elképzelésük szerint.
Itt is a szűrő boxokkal rendelkezik az oldal. Természetesen JSON fájllal is lettek feltöltve anyagok.
Szűrő lista működése:
- Lehet egyik terméket vagy lehet összes terméket listázni
- Lehet olcsóbb-drágább-at vagy drágábbat-olcsóbbat listázni
url: https://amp.juszkocs.hu/Tartozekok.html
Tartozékok termék:
Minden információ található, amiket termékről tudni kell:
- Képek
- Leírása (vázlatosan és részletesebben)
- Adatok (táblázat)
- Árak
- Csillag értékelések (dinamikus esetén)
- Termékről vásárlók véleményezés, hozzászólások (dinamikus esetén)
url: https://amp.juszkocs.hu/Tartozekok/Tartozekok_termek.html
GYIK (Gyakori kérdések):
Itt fontos, mert ha elakadnak valamiben, könnyebben megtalálhatják az információkat.
url: https://amp.juszkocs.hu/GYIK.html
Blog:
Minden bármi új kocsikról szóló cikkeket érdemes gyártani, mert akkor több lesznek követők és akkor több lesz vásárlók. Mert a blog vagy hírek segítségével több látogatói forgalmat tud hozni a weboldalára.
url: https://amp.juszkocs.hu/Blog.html
Kapcsolat:
Űrlapok, térképek, elérhetőségi adatok -> ezek alap dolog, hogy meg kell adni a kapcsolatteremtés érdekében.
url: https://amp.juszkocs.hu/Kapcsolat.html
Adatvédelem és Cookie:
2018 május óta sajnos törvény szerint kötelező tudatni a látogatókkal.
url: https://amp.juszkocs.hu/Adatvedelem_es_cookie_tajekoztato.html
ÁSZF:
Itt is szabály szerint kötelező, ez csak akkor, ha webáruházat indít. Ha nem webáruházat, hanem weboldalt üzemeltet, akkor nem szükséges.
url: https://amp.juszkocs.hu/ASZF.html
Oldaltérkép:
Szükséges, mert esetleg valaki nem találja meg amit keres, itt megtalálhatják.
url: https://amp.juszkocs.hu/Oldalterkep.html
Időpontfoglalás:
Modell altermék vagy Elvihetők kocsi oldalról jön az időpontfoglalás.
Itt kétféle dátumot lehet kiválasztani kényelmesen:
- Az egyik mezőre kell kattintani és akkor jelenik meg a naptár ablak és kiválaszthatja.
- A másik pedig 3db gombok közül lehet az egyiken lenyomni és akkor jelenik meg a dátumválasztás.
url: https://amp.juszkocs.hu/Idopontfoglalas.html
Kosárba rakási és megrendelési folyamata:
Első lépés:
Jobb felső sarkon található kosár ikon, klikkelj rá.
Megjegyzés a kosárral kapcsolatban:
Ha kosár ikon mellette legyen ott piros hátterrel fehér szám, akkor itt található egy gombfelirata: Kosárba, klikk ide és akkor meg fog jelenni, csak innen elérhető a beállítás és statikus miatt: https://amp.juszkocs.hu/Tartozekok/Tartozekok_termek.html
Második lépés:
Pénztár oldal jelenik meg, ahol:
- megrendelt termékek táblázat (dinamikus esetén X-szel lehet eltávolítani)
- rendelés összegzése
Amikor véglegesíteni szeretne a megrendelést, és akkor klikkelj rá a “Megrendelem” gombra.
url: https://amp.juszkocs.hu/Penztar.html
Harmadik lépés:
Itt van lehetőség részletesebben kitölteni a Vevő adatokat.
Szállítási lehetőséget is ki lehet választani:
- ha nem sürgős, alap szállítási díj, akkor marad az összeg ár
- ha sürgősre lesz szükség, akkor dupla szállítást díjat lehet felszámolni és látni fog, hogy a végösszege változik, mert beállítottam.
url: https://amp.juszkocs.hu/Megrendelem.html
Negyedik lépés:
Megrendelés visszaigazolás (köszönőoldal tartalma + generált kód, amivel későbbiekben lehet azonosítani könnyebb ügyintézés érdekében)
url: https://amp.juszkocs.hu/Megrendeles_visszaigazolas.html
Csaknem minden oldalon szerepelnek:
Elégedett ügyfeleink mondták:
Ez a blokk nagyon fontos, hogy szerepeljenek, mert csak így növeli a potenciális ügyfélszerzés számát.
Call to action (CTA) box:
Ezt azt jelenti, hogy cselekvésre ösztönzi, az is fontos, mert könnyen felveheti kapcsolatba.
Csillag értékelések és hozzászólások / kommentek:
Statikus esetén nem érdemes használni csillagok értékelést és véleményeket (hozzászólásokat).
Dinamikus esetén igen, mindenképpen, mert benne van strukturált (schema), amivel osztályozni lehet a csillagok értékelést, amit Google látja és ez alapján befolyásolhatja a rangsorolást.
Hozzászólásokat is érdemes használni, mert ha pozitív reagálás, akkor többen fogják ajánlani és akkor Google még jobban megbízik.
Google Analytics vagy Google Tag Manager? És miért?
Jelenleg Google Analytics demós követőkód van fent. De ha nem lenne demo és valódi Google AMP weboldalt készítjük, akkor Google Tag Managert javaslom használni.
Miért mindenképpen kelleni fog a GTM és nem GTAG?
Mert itt közeljövőben sokkal könnyebb lesz használni, nem szükséges sokszor felvenni a külsős webfejlesztő szakemberrel, hogy weboldalba illessze be bármi kódot. Helyette ez a Google Tag Manager megoldja, így olcsóbb és rövidebb az idő.
Ráadásul az AMP HTML programnyelv nem egyszerű programozásról van szó, kizárólag csak aki meg tudja csinálni, aki érti hozzá, ezért célszerűbb választás, ha GTM-t válasszuk ki.
Search Console és indexelés?
Mivel ez demo miatt nem szükséges létrehozni a Search Console-t, hogy indexelje. Elég, hogy amikor kíváncsiak, hogy miként csináltam meg a demot, innen a blogon vagy a weblapon megtalálhatják.
Valódi AMP weboldalhoz szükséges esetén, csak annyit elárulom, hogy nem nagy változás. Ugyanannyit kell intézni, mint a szokásos hagyományos weboldalokon. Csak pluszban van egy funkció, amely AMP-állapotjelentés, ami segítségével kijavíthatja a hibákat, amiket Search Console talált, mert csak így javulhat a Google Keresés eredményei közötti, AMP-specifikus funkciókkal való megjelenését.
UX és UI design féle a Google AMP szabályok elvárásai szerint tervezése
Először így terveztem az a dolgot, hogy olyanok pluginok legyenek, amiket támogat a Google AMP szabályok és szígorúan Design szabásnál 50kbtye legyen a limitje.
Aztán minden korosztályok és minden látássérültek / szemüvegesek számára legyen könnyen használható.
Pluszban előre figyeltem, hogy a PageSpeed vizsgálaton, mindketten, azaz mobilon és desktopon minimum 90 pontok felettiek legyenek.
Ezek szerint jól sikerültek.
Itt megtekinthető az UX és UI Design tervezésről részletesebben cikkem. (kizárólag csak ami AMP-val kapcsolatban, amit megtapasztaltam)
Weboldal betöltési idő, sebesség vizsgálata és optimalizálás
PageSpeed
Eredmény szerint itt is átment az AMP DEMO weboldal.
Itt is 90 pontok felett.
Mi az a PageSpeed és hogy érheted el, ha szeretnéd jobb pontod legyen? Akkor itt nézd meg.
Web.dev
Google eszköz alatt vizsgáltam meg, ott is tökéletes eredmény lett.
Fontos megjegyzés:
DEMO miatt nem akarok, hogy a Google keresőben szerepeljen, ezért nincsenek indexelve, se kitöltve a strukturált adatok, stb. Ezért a SEO résznél 100 helyett 90 pont jelenleg. Csak akkor lehet több pontom, ha valós tartalmat feltenni és akkor indexelhető állapottá teszem őket.
Mi az a Web.dev google eszköz? Hogy érheted el, hogy magasabb pontod legyen?
Akkor itt nézd meg.
Egyéb fontos vizsgálat (Mobilbarát teszt):
Mobilbarát teszt vizsgálat szerint igen mobilbarát az AMP DEMO honlap és nincsenek betöltési problémák.
Itt azért fontos, mert nagyon sok honlap van, amely bár mobilbarát, de vannak oldalbetöltési problémák.
Amiket én csináltam, tökéletesek, nincsenek problémák. Ezért nem árt tudni.
Statikus és dinamikus weboldalak összehasonlítása és javaslatok
Összefoglalva írom, hogy melyiket érdemes választani és mivel lehetne megoldani:
Statikus esetén:
- Nem minden menüpontok használhatóak
- Kosárba rakási folyamata nem lehetséges, ha egyszerre több terméket szeretne megrendelni -> ezt el kell felejteni
Javaslatok:
- Mivel statikus, így a megrendelés űrlapon létre kellene hozni egy több választható checkbox listát, amiket lehetne pipálni, hogy mit/miket kér a vevő
- Nincs Admin felület, ezért JSON fájllal lehet exportálni / importálni a termékeket / anyagokat FTP tárhelyen, így olcsóbb, nem szükséges felkeresni a webfejlesztő szakembert
- Ha külső blogot szerkeszteni kívánt, akkor JSON fájllal lehet használni a Hírek menüpontban megjeleníteni boxokat. Végül hozzáadni lapozási gombokat ( ha sok boxok)
Dinamikus esetén:
- Minden menüpontok használhatóak. Nincsenek kifogások.
Javaslatok:
- Keresni kell olyan CMS rendszert, amit támogat. Ez esetében legnépszerűbb és legkönnyebb kezelhető: WordPress
- PHP Framework-kal is készülhet
- Utolsó sorban: egyedi fejlesztés
Összefoglalás
Ki merem jelenteni, hogy teljesen letisztult, minden korosztálynak alkalmas, könnyen kezelhetőek, használhatóak és hozzáférhetőek.
Remélem mindent leírtam, ami jut eszembe és sikerült. Azért írok, mert aki nézi a demó webáruházamat, nehogy félreértsenek és túlreagáljon.
Ráadásul későbbiekben a leendő új ügyfeleknek bemutatom, hogy mi a jó és mi a nem jó, illetve miért igen és miért nem. Ahogy említettem az elején, hogy nem voltam hajlandóan 100%-osan átadni az én tudásomat / tapasztalataimat, hanem kizárólag csak 70%-osan elkészítettem.
Szükséges lesz SSL tanúsítványra is, AMP szigorú szabályt követel, pár funkcióhoz kelleni fog, nélküle nem fog működni.
De azért vázlatosan egy kicsit besúgom, hogy miket érdemes továbbfejleszteni bármi CMS-vel vagy bármi PHP keretrendszerrel, vagy bármi egyedi fejlesztéssel. Lentiekben megosztom mindenkinek.
Tovább lehet fejleszteni a valódihoz szükséges szerint:
Design beszabás: jelenleg 43 kbyte van, így még 7kbyte van hátra befejezni, így lehet tovább szépíteni, például: effektusosan jelenjen meg.
Fizetőségi lehetőségek: például nemcsak kézpénzzel, hanem bankkártyával is fizetni lehessen, össze lehet kötni. Igen megoldható AMP-val is.
Dinamikusan fejlesztés: Megrendelések és kosárba rakások folyamata; Admin és felhasználói (belépés és regisztrálás) felület.
JSON-ban URL-ek megadása: Bár demóban ugyanaz 1-1db termék oldal található, de a JSON fájlban lehet bővíteni egy sort, amit meg kell adni külön label-t, ahova kell a külön URL-hez szükség betölteni, és akkor lehet létrehozni több, különböző egyesével termék oldalakat.
Kocsik és tartozékok feltöltése: JSON fájlok felhasználásával van lehetőség feltölteni az anyagokat.
Marketing: jelenleg nem igazi releváns kulcsszavak vannak fent, hanem csak csupán minden menüneveket adtam meg, amiket jutott eszembe, azokra szükség van az érdeklődöknek / vevőknek.
Hogy jól szerepeljen a kereső oldalon, ahhoz szükség lesz először kulcsszótervezés és akkor azután lehet véglegesíteni a menütérképet.
Tartalmak szövegírás
Képek fotózás vagy vásárlás / szerkesztés / méretezés
Strukturált adatok kitöltése
Google termékek létrehozása / beállítása
- Google Analytics vagy Google Tag manager
- Google Search Console
- Google Cégem
Ha szeretne hirdetni, akkor:
- Google Ads
- Facebook Ads
Megjegyzés:
Én csak a Google termékek felét szoktam használni, de lehet mást használni, amp.dev oldalon van egy “Supported Platforms, Vendors and Partners” címen található több információk, hogy rajta kívül melyik platformokat támogat. Erről is írtam cikket, itt megtekinthetőek.
Fontos szabályok megtartása
Sajnos itt létezik 3 fontos szabályok, amiket érdemes megtartani, különben érvénytelen lesz a Google AMP weboldal:
- Kizárólag saját AMP javascript pluginok használhatják, mást nem.
- Design beszabásot úgy kell figyelni, hogy ne lépjen át a 50 kbtye határt.
- Érdemes mindig vizsgálni, hogy a validátor szerint rendben van-e, ne legyen 1 apró hiba sem.
Hogy eredményes legyen, 8 fontos ágában szükséges teljesíteni a jobb weboldal teljesítmény érdekében:
- Keresőoptimalizálás (SEO)
- Látványtervezés (UX Design tervezés)
- Szövegírás
- Piackutatás, marketing
- Fejlesztés
- Információs architektúrák
- Használhatóság
- Hozzáférhetőség
Ha ezek megtartva és akkor AMP weboldalad nagyon eredményes lesz. :-)
Az által felsoroltakból is van ilyen egy összefoglaló eszköz, aminek neve: Web.dev google webhely ellenőrzés, amit megvizsgálja, hogy megfelelnek-e (bár nem vizsgálja ezeket: szövegírást, marketinget).
Korábbi minden cikkek, amelyek ez a technológiáról írtam
Az elmúlt években különböző, több témakörökben már írtam erről a programnyelvről, akkor a címkék közül kattintson az “amp” címkére és között megnézheti.
0 Megjegyzések