Mobiel is het meest gebruikte kanaal voor e-commerce en PWA is de bewezen oplossing om de beste ervaring te creeëren op dit kanaal. U gaat dus uiteindelijk over naar een PWA-oplossing. Tijdens deze sessie op de Webwinkel Vakdagen 2019 leerde u van ISM'er Remco Dekkers welke PWA-oplossingen er beschikbaar zijn voor Magento en waar u bij het inzetten van een PWA-oplossing rekening mee moet houden.

1. WWVD - PWA MET MAGENTO
ZO PAK JE HET AAN!

2. Remco Dekkers – CTO
Manager afdeling TECH / Product owner “Magento 2 Best Practice”
Verantwoordelijk voor de
afdeling techniek binnen ISM
waar de bouw, hosting en
onderhoud uitgevoerd wordt
voor Magento websites. De
passie van Remco ligt bij het
inzetten van technologie ter
ondersteuning van de business.
Remco Dekkers
CTO
r.dekkers@ism.nl

3. Wij zijn trots te werken voor

4. Digitale strategie &
klantreis
Webshop design
Webshop bouw
Online marketing &
optimalisatie

5. 25+
Jaren ervaring in e-commerce
500+
E-commercespecialisten
3
Locaties
100+
E-marketingklanten
100+
Designklanten
34
Magento 2 getrainde specialisten

6. ISM eCompany
Stand 217
217

10. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

11. Snellere laadtijd Makkelijker navigeren Altijd ingelogd
Waarom gebruiken consumenten native apps?

12. 8 Gebruik de app
7 Accepteer voorwaarden
6 Open app
5 Installeer
4 Download en wacht
3 inloggen in app store
2 Zoek in app store
1 Laad app store
Native app - gebruikersreis

13. laag hoog
hooglaag
Bereik
Betrokkenheidvangebruiker
Mobiele webshops
Native apps Progressive Web Apps

14. start zoekopdracht selecteert product niet meer op voorraad...

15. ...notificatie weer op voorraad blijft op de hoogte... verliest internet connectie

16. ... gaat verder met shoppen krijgt push notificatie voegt toe aan mandje

17. ... betaalt in 1 tap voeg toe aan startscherm openen als native app browsen op volledig scherm

18. 2Gebruik de app
1Klik op URL
8 Gebruik de app
7 Accepteer voorwaarden
6 Open app
5 Installeer
4 Download en wacht
3 inloggen in app store
2 Zoek in app store
1 Laad app store
Native app - gebruikersreis Progressive Web App -gebruikersreis

19. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

20. Vergelijkbare trends
Dynamic HTML (ajax, jQuery) Responsive web design (RWD)

21. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

22. Investeren in…
Echt nodig? De apps van Bol, Amazon en Aliexpress kunnen het ook niet.
Bekijk per onderdeel. bijv wishlist
Eenvoudig toe te voegen. Integreer met (e-mail) marketing tool?
Nog niet beschikbaar op iOS
Eenvoudig toe te voegen
Werkt op iOS en Android
Wachten op ondersteuning iDeal en PSP’s
Afhankelijk van design en implementatie, maar nieuwe PWA oplossingen gaan helpen
Standaard Magento 2 is niet supersnel, nieuwe PWA oplossingen gaan hierbij helpen
Offline werken
Push berichten
Startscherm
Betaalgemak
App gevoel
Snelheid

23. Architectuur nieuwe PWA oplossingen
logic
data
presentation
UI
data
logic
presentation
data
logic
presentation
Server
Client HTML HTML JSON
Multi Page Application Single Page Application

24. PWA oplossingen voor Magento
Sterkte punten Aandachtspunten
PWA Studio
• Ontwikkeld door Magento
• Ondersteuning Commerce functies*
• Marktplaats voor extensies*
• In ontwikkeling: phase 2 MVP
Vue Storefront
• Grote en actieve community
• “Volwassen” product: versie 1.7
• 12+ websites in productie
• Commercieel SaaS optie
• Ondersteund alleen Open source
• Vue technologie, alle anderen React
Deity Falcon
• Meerdere jaren ervaring met PWA
• Nederlands bedrijf
• Passie voor performance
• Performance as a Service oplossing
• Kleinere community
• In ontwikkeling: versie 0.3
Frontcommerce • Meerdere jaren ervaring met PWA
• Commercieel
• Gesloten ontwikkeling

25. Check voor Best practices
Sticky header (incl. navigatie)
Labels onder menu iconen
Menu rechtsboven voor mobiel
Uitgebreide (3 laags) navigatie
Directe toegang tot search
USP's prominent in beeld
Directe ingang naar populairste categorien

26. PWA oplossing
PWA oplossingen beschikbaar, maar…
Beperkte ondersteuning Magento Commerce
Veel nog in ontwikkeling
Geen marktplaats met extensies
Kans op vendor lock-in, want nog weinig
partners vergeleken met “standaard”
Magento
Alternatief…
Investeren in verbeteren snelheid
Verbeteren van de gebruikerservaring
d.m.v. A/B testen

27. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

28. Een kopie wordt door Google
dichtbij bezoeker opgeslagen
Gebruikt een geoptimaliseerde subset
van HTML en javascript

29. Nu AMP
Redenen om nu met AMP aan de slag te gaan
01
02
het is eenvoudiger te
implementeren dan PWA
de AMP website kan bestaan
naast de reguliere website
Magento marktplaats bevat extensies die
AMP toevoegen
AMP biedt ook voordelen nadat PWA
oplossing in gebruik genomen is, want
laadt sneller
03
AMP kan stap voor stap
toegevoegd kan worden
Test resultaat met A/B testen
04
05
!

30. Magento en PWA, zo pak je het aan
PWA basis
Investeer nu in aanbieden van push
berichten en startscherm installatie.
Integreer de push berichten met
e-mail marketing tools en processen
PWA oplossing
Bepaal of oplossing voldoet aan al je
eisen en wacht anders op volwassen
worden van de PWA oplossingen
Verbeteren
Ga door met het continue verbeteren
van snelheid en gebruikerservaring.
Voeg nieuwe betaalmethode door
zodra deze beschikbaar is
AMP
Implementeer AMP stap voor stap en
meet de resultaten

31. ISM eCompany
Stand 217
217
Bezoek de stand van ISM eCompany voor meer over Magento 2 Best practices

32. Van Nelleweg 1, 3044 BC Rotterdam +31 (0)10 243 60 000 info@ism.nl www.ism.nl