2. Jak na Smartlook, nejen pro Shoptet
Marek Čech
11.9.2020
Digitální architekti

3. Marek Čech
+420 723 582 606
marek.cech@digitalniarchitekti.cz
https://cz.linkedin.com/in/marekcech
Dlouhodobě se věnuji marketingu a především webové analytice. Pomáhám klientům se vstupem do světa
digitálního marketingu a s přípravou strategií. Na základě získaných dat provádíme aktualizaci strategií a
jejich rozvoj. Dle klientových potřeb jsem schopen zajistit také školení interních týmu, vymýšlení a exekuci
marketingových kampaní. Zabývám se i pomoci startupům a zajímavým projektům.
V poslední době si programuji v Google Apps Scriptu a pronikám do tajů Google Cloud platformy, převážně
Google Data Studio a Google Big Query.
Jednoduchost a přizpůsobení se klientovi jsou mým hlavním cílem.
3
analytik a architekt digitálních strategií

4. 4

5. Poslání Digitálních architektů
Zefektivňujeme čerpání omezených zdrojů smysluplným využitím dat.
5
efektivní využití zdrojů
technologický pokrok
vášeň pro technologie
mezinárodní prostředí
otevřenost
pozitivita
zodpovědnost

6. Skvělý pomocík pro testování a optimalizaci vstupních stránek, ověření
hypotéz při tvorbě a A/B testování nových funkcí, celých stránek či aplikací.
Umožňuje poodhalení chování zákazníka a upozorní na technické chyby.
Neocenitelný parťák pro UX a CX v případě, že to s marketingem myslíte vážně.
6

7. Obsah
› Smartlook z pohledu analytiky
◦ Kvantitativní a kvalitativní analytika
› Představení nástroje - seznámení s rozhraním
› Ukázka implementace kódů do webu (Shoptet, Google Tag Manager)
› Co nástroj umí
◦ Teplotní mapy - co jsou a jak fungují, jak nastavit, tipy jaké eventy nastavit
◦ Eventy - co jsou a jak fungují, jak nastavit, tipy jaké eventy nastavit
◦ Trychtýře - co jsou a jak fungují, jak nastavit, tipy jaké eventy nastavit
◦ Segmenty - jak filtrovat nahrávky a tvořit segmenty
› Pokročilé funkce - přehledy, JavaScriptové chyby, dev tools, API
› Dotazy
7

8. Smartlook
› založeno 2016 v Brně
› více než 250 000 uživatelů
› nahrávání návštěv webů i mobilních aplikací
› teplotní mapy
› události
› nahrávky
› trychtýře
› segmenty
› vhodný pro začátečníky i pokročilé
8

9. Kvantitativní a kvalitativní webová analytika
9

10. Kvantitativní data odpovídají na otázku co, kde - nástroj Google Analytics
Jak se vyvíjí návštěvnost?
Jak se vyvíjí konverze a konverzní poměr?
Jaké stránky uživatelé navštěvují?
Co hledají ve vyhledávání?
Jaké vstupní stránky jsou navštěvovány?
10

11. Kvalitativní data na otázku proč - nástroj Smartlook
Proč uživatel nedočetl článek?
Proč uživatel odešel z košíku?
Proč nejsou využívány konkrétní prvky?
Jak pracují s vyhledáváním?
Jak pracují s filtrací?
11

12. Smartlook - rozhraní nástroje
12

13. Smartlook - používání nástroje
› Smyslem není nakoukat všechny nahrávky
› Hledání úzkých míst odhalených kvantitativní analytikou
◦ Vstupní stránky s vysokým Bounce Rate
◦ Kampaně s nízkou efektivitou (malý konverzní poměr, vysoké PNO)
◦ Nefunkční CTA prvky
› Nebo naopak hledám pozitivní příklady
◦ Vstupní stránky s nízkým Bounce Rate
◦ Chování na klíčových vstupních stránkách
› Neocenitelný pomocník při CRO procesu (viz. závěr)
13

14. Smartlook - proč ho máme rádi?
› Snadná tvorba funnelů (trychtýřů)
› Data dostupná okamžitě
› V souladu s GDPR
› Kompletní cesta zákazníka
› Retroaktivní pohled na data - události lze vyvolat zpětně
› a mnohé další...
14

15. Ukázkové projekty
› https://wandermaps.cz - klasický eshop na platformě Shoptet
› https://digitalniarchitekti.cz - klasický firemní web na WordPress -
reference, blog, školení, představení týmu, kontakty
› http://smartlook.milujeme-data.cz/ - playground simulující statickou
stránku v HTML
15

16. Praktická ukázka
Implementace Smartlooku na Shoptetu přes GTM
- založit účet ve Smartlooku
- založit nový projekt ve Smartlooku - ukázat, co se nastavuje
- založit nový Google Tag Manager účet + kontejner
- vložit kód do Shoptetu
- vložit kód Smartlooku jako Custom HTML, NOVĚ i jako šablonu
- spustit na All Pages
16

17. Praktická ukázka
Implementace Smartlooku přímo do kódu webu přes FTP
- otevření souboru přes FTP
- vložení Smartlook kódu dle instrukcí do všech souborů webu
- nahrání souboru zpět na FTP
17

18. Smartlook - na co si dát pozor
› Návštěvy v dalších záložkách oknech se dle časové souslednosti spojují do
jedné nahrávky
› Spočítejte si měsíční náklady dopředu
› Pozor na integraci Google Analytics pro velké účty
› Smartlook pro mobilní aplikace - nahrávka vzniká v zařízení a následně se
musí nahrát na servery
› Nahrávání standardních roletek (u select inputů) není možné
› Označení textu není vidět
› Obsah cenzurovaných polí se nenahrává
› Některé prvky (čísla, emaily) se automaticky cenzurují (nespoléhat na to)
› Standardně se obsah žádného pole formuláře nenahrává - nutné povolit
pro bezpečná pole
18

19. Nahrávky - recordings
› zachycení celého chování uživatele
› vhled do jeho možného uvažování
› historie nahrávek u jednoho uživatele
› občas zábavná podívaná pro klienta a jeho marketingové oddělení
19

20. Nahrávky - praktická ukázka
Segmenty + historické nahrávky uživatele v přehrávači
Psaní poznámek
Základní ovládání
20

21. Události - eventy
› Skvělé díky neomezenosti jejich počtu u Power balíku a možnosti vytvářet
je zpětně z historických dat
› Eventy i heatmapy by měly vycházet z cílů webu (potažmo obchodních /
marketingových cílů) a z definice jaké aktivity na webu (MDA- most
desired actions) jsou pro klienta důležité, ty se pak postupně analyzují
Jaké eventy měřit?
› Hlavní CTA tlačítka - registrace, newsletter, odeslání formulářů, přidání do košíků
› První políčko formuláře, další políčka dle možností
› Stránky pro funelly (pageviews)
› Používejte Kategorie - košík, hledání, filtrace, registrace, účet
› Chyby - Errors
› Zběsilá kliknutí - Rage Clicks
21

22. Praktická ukázka
Zajímavé události v elektronickém obchodu
- kroky košíku
- přidání do košíku (add to cart)
- parametry produktů / záložky
- překlikávání obrázků
- výběry platebních metod, dopravy
Zajímavé události na firemní stránce
- CTA tlačítka
- cookies a další lišty
- štítky
- související články
- odběr newsletteru
- stažení souborů
22

23. Teplotní mapy - heatmapy
› teplotní mapy (heat mapy) se používají pro pochopení chování zákazníků
a jejich technologické vybavenosti
› click mapa / move mapa / scroll mapa
Jaké heatmapy nastavit?
› Hlavní stránky v menu
› TOP obsah - v Google Analytic - Behaviour - Site Content - All Pages
› Top stránky - nejsledovanější, nejprodávanější, nejvíce komentované (řeším pozitivní i negativní
stránky)
› Hlavní stránka
› Stránky z uživatelského účtu - pozor na GDPR a ochranu údajů obecně
› Vyhledávání - výsledky
› Nejhorší stránky - hodnota stránky, Exit Pages, Bounce Rate
› Nové stránky, blog - řešit v reálném čase, přeskládání článku
› 23

24. Praktická ukázka
› Nastavení heatmapy pro konkrétní stránku (historie + nová data)
› Neproklikávací prvky
› Chování v kategorii
› Přetékání textů
› Starý náhled webu - jak resetovat
› Teplotní mapy na blogu
› V detailu produktu
› Cenzura textů
24

25. Praktická ukázka
› historie dat heatmapy - např. redesign stránky, rozdílný vzhled k určitému
datu
25

26. Trychtýře - funnely
› Jednotlivé kroky (akce), které uživatel dělá na webu (cesta zákazníka)
› Trychtýře mají snadné použití, lze jít do historie
› Po Google Analytics (v základu omezené) asi nejjednodušší momentálně
dostupný nástroj na funnely
› Možnost hledat nahrávky odpadlíků
Jaké trychtýře nastavit?
› E-commerce: (domovská stránka) > detail produktu > košík > checkout > děkovná stránka
› E-commerce: (domovská stránka) - hledání - detail - košík - nákup
› Blog: homepage > detaily článků > odběr emailu > děkovná stránka
› SaaS: homepage > představení trial verze > práce v rozhraní > stránka s upgradem > děkovná
stránka
› Lead generation: vstupní stránka s formuláře > první pole > odeslat > děkovná stránka
› Obecně registrace: Začátek registrace - dokončení - nákup
26

27. Praktická ukázka
› průchod košíkem
› detail článku - klik na související
› detail článku - klik na štítek
27

28. Segmenty - filtry
› Slouží pro snadnou orientaci v nahrávkách
› Filtr je dočasný, segment je trvalý pro všechny uživatele účtu
Jaké segmenty používat?
› Dle délky nahrávky
› Dle zařízení
› Dle vstupní stránky / kampaně / URL
› S nákupem / bez
› S přihlášením / bez
› Poznámky
› Kombinace výše uvedeného
28

29. Praktická ukázka
› poznámky
› zdroje
› landing page
› referrer (např. Google)
› UTM (campaign = xy)
29

30. Pokročilé funkce
› Dashboardy - Manažerské přehledy umožňují vybrat nejpoužívanější údaje
na úvodní stránku projektu ve Smartlooku
◦ Výpis JavaScriptových chyb, top události
› Dev Tools - network hooks + konzole - jedna z novějších funkcí pro
pokročilé
◦ Nutné zapnout
› API - vlastní eventy a identifikace uživatelů, parametry k eventům, API PRO
EU POUZE V PLACENÉ VERZI
› Kohorty - nová věc, skupiny uživatelů dle času akvizice
› Events breakdown - custom parametry při měření přes API
30

31. Praktická ukázka
Manažerský přehled (dashboard) Smartlook
31

32. 32

33. Praktická ukázka
Kohorty / retenční tabulky
33

34. 34

35. Praktická ukázka
Identifikace uživatelů
35

36. 36

37. Praktická ukázka
Citlivý obsah
37

38. Web Smartlook
38

39. 39

40. Vlastní události
40

41. Další příklady použití pro nástroj Smartlook
› Komunikace s vývojáři - pošlu nahrávku místo abych vysvětloval
› Redesign - odladění technických problémů - tvorba bug listu, backlogu
› Překlikávání kroků v košíku, viditelnost tlačítek v košíku
› Důvody opuštění procesu objednávky
› Problémy se zobrazením na menších přenosných zařízeních, responsivita a
použitelnost
› Používání neinteraktivních prvků webu (obrázky vypadající jako tlačítka,
text vypadající jako odkaz)
› Nefunkční CTA prvky - tlačítka, formuláře (množství opakovaných tzv. Rage
kliků)
› Pomoc s odhalením 404 chyb, neošetřených chybových hlášek a dalších
problémů s načítáním obsahu (pomocí nahrávek)
41

42. Tipy a triky - jak začít s nástrojem pracovat?
› 1) Nastavím klíčové události, teplotní mapy a trychtýře dle doporučení /
problematických míst / fungujících míst viz přechozí snímky
› 2) Nakoukám relevantní nahrávky (vhodně filtruji abych se dostal na
úrovně stovek nahrávek), heatmapy, vývoj událostí
› 3) Vše sepisuji a dávám vývojářům k úpravě, zaměřuji se především na:
◦ Opuštění procesu objednávky
◦ Problémy s načítáním obsahu (404, technické chyby)
◦ Problémy s filtrací
◦ Formuláře
◦ Volby typu produktů/služeb
◦ Kontaktní stránka
› 4) Kontroluji dopad na konverzní poměr webu, kontaktujte podporu,
pokud něco nefunguje
› Postupně zjistíte, co ještě potřebujete vědět a co nastavit
› Snažte se pochopit své uživatele 42

43. Prostor pro dotazy
43

44. https://digitalniarchitekti.cz/smartlook/
44
na tomto odkazu hledejte další materiály

45. Děkuji za pozornost a zpětnou vazbu
› Marek ČECH
› +420 723 582 606
› marek.cech@digitalniarchitekti.cz
› https://cz.linkedin.com/in/marekcech
› www.digitalniarchitekti.cz
› Děkuji za jakoukoliv zpětnou vazbu
45

46. Doporučujeme prostudovat
› https://help.smartlook.com/en/collections/1948272-smartlook-school
› https://smartlook.github.io/
› www.digisemestr.cz
› www.digitalniarchitekti.cz
› www.digitalnigaraz.cz
46