Google Analytics – průvodce pro web designery

Technical Performance Dashboard od Vigetu vám z nitra Analytics vytáhne aktuální údaje týkající se rychlosti načítání, prohlížečů a podílu mobilních zařízení. Prostě tu část statistik, která zajímá právě vás.

Trackomatic: další čísla pro vývojáře

Mimochodem, Viget jsou také autory pluginu Trackomatic. Ten vám bude do událostí v Analytics ukládat další zajímavé hodnoty. Například:

• Velikost viewportu: rozměry vnitřku okna prohlížeče, nikoliv rozlišení obrazovky, které nás příliš nezajímá.
• First Input: čím uživatelé „klikají“ na vaší stránce – myší, dotykem, klávesnicí… ?
• Site Exit: kam uživatelé odcházejí?
• Javascript Error: výborný report návštěv, které skončily chybou ve skriptu.

Statistiky pro webové vývojáře vestavěné v Google Analytics

Rychlost webu

• Přehledy najdete v rozhraní Analytics pod Chování > Rychlost webu.
• Hodí se vidět Časování stránek napříč různými kontexty: prohlížeči, regiony atd.
• V Časování uživatelů mohou být vaše vlastní měření. Například: jak rychle se načetl konkrétní obrázek nebo kdy se stáhly fonty z Google Fonts. Je to potřeba nastavit.
• Standardně se pro měření rychlosti používá jednoprocentní vzorek vašich shlédnutí stránky. Pokud to chcete jinak, je potřeba měřit s jiným nastavením. Ja například používám ‚siteSpeedSampleRate‘: 50.

Prohlížeče, operační systémy, mobilní zařízení

• Menu: Technologie > Prohlížeč a pak odkazy nad tabulkou.
  Zdejší statistiky se hodí pro zjištění, zda technické vybavení vaší cílové skupiny není v něčem specifické. (Starší, ale povětšinou pořád platné články k prohlížečům: Stav trhu mobilních prohlížečů a Proč podporovat i prohlížeče pod pětiprocentní hranicí podílu).
• V menu Cílové publikum > Mobilní zařízení > Přehled najdete momentální podíl desktopu, tabletů a mobilů.
  Někde tam uvidíte i přehled nejpoužívanějších mobilních zařízení, ale těch je děsně moc, takže to obvykle k ničemu nebývá. Může snad jen sloužit jako rada jaké si koupit zařízení pro testování responzivních webů.

Tipy pro práci s Analytics

Všechny zásadnější změny zapisujte do poznámek

Analytics disponují výborným nástrojem pro evidenci zásadních změn v historii webu. Poznámky najdete v menu Administrátor > Výběr dat > Poznámky nebo přímo v přehledech vpravo po kliknutí na šipku pod grafem.

Kromě vývojářských aktivit – jako je nasazení větší aktualizace nebo optimalizace rychlosti – se samozřejmě hodí i pro další větší změny kolem webu (úprava designu, publikování zásadnějšího obsahu…). Marketingové aktivity je lepší měřit pomocí URL s parametry.

Nechávejte si posílat e-mailové reporty

Předpokládám, že jako vývojáři nebudete rozhraní Analytics navštěvovat zrovna každý den. Hodí se ale nastavit si vlastní upozornění a e-mailové reporty. (Administrátor > Výběr dat > Vlastní upozornění / Naplánované e-maily nebo v přehledech nahoře). Příklady: nárůst počtu mobilních uživatelů, pomalé načítání webu nebo snížení podílu starých prohlížečů pod požadovanou úroveň.

Ladění: Analytics tajemství zbavená

Možnosti jak Analytics debugovat je docela dost:

• Analytics Debugger – rozšíření pro Chrome, které pro základní ladění úplně stačí. Výsledky zobrazuje v konzoli DevTools.
• Ladící verzi Analytics: analytics_debug.js. Prostě ji volejte v měřícím kódu a opět otevřete konzoli v DevTools.
• WASP.inspector – komplexní rozšíření do Chrome DevTools pro průzkum všech doplňků stránky. Nejen pro Analytics, ale i Tag Manager nebo Facebook kódy.
• Event Tracking Tracker – ladění ukládání událostí do Analytics. Ty nezmizí ani při přechodu na jinou stránku.

Single Page apky a měření shlédnutí „stránky“

Analytics standardně změří shlédnutí stránky jen při konvenčním postupu, kdy se každá nová stránka načítá se serveru na vlastním URL.

Pokud měníte URL z javascriptu, pak to Analytics nepoznají a novou pageview nezapočtou. Musíte jim to výslovně říct. Takže ke každé změně URL javascriptem dávejte kód podobný tomuto:

ga('send', 'pageview', '/new-page.html', {'title': 'Nová stránka'} );

Více v podrobnějším článku od H1.cz.

Vlastní reporty: například ukládání breakpointu

Do Analytics si můžete uložit co chcete. V některých případech může být například užitečné měřit aktivní breakpoint:

var breakpoints = {
  sm: '(max-width: 767px)',
  md: '(min-width: 768px) and (max-width: 991px)',
  lg: '(min-width: 992px) and (max-width: 1199px)',
  xl: '(min-width: 1200px)'
};

Object.keys(breakpoints).forEach(function(breakpoint) {
  var mql = window.matchMedia(breakpoints[breakpoint]);
  if (mql.matches) {
    ga('set', 'dimension1', breakpoint);
  }
});

Tuhle vychytávku mám z prezentace Philipa Waltona Google Analytics for Web Developers, která je skvělá úplně celá a rozhodně si ji projděte.

Dosavadními postupy získáme dost dat. Teď ještě, abychom je nějak uměli vyhodnocovat.

Jak číst čísla z Analytics? Úplné základy

Pokud se nepovažujete za odborníka nebo odbornici, na vyhodnocování čísel si raději nějaké najděte. Opět platí, že mylnými závěry můžete nasekat zbytečné chyby.

Data vždy berte s rezervou. I když Analytics umí rozumně odfiltrovat roboty a spam, nedůvěřujte jim bezhlavě.

Co je vlastně ta „návštěva“, kterou vidím v rozhraní Analytics?

Analytics operují s pojmy uživatel, návštěva a hit, což je například interakce se se stránkou. Jeden uživatel může během dne udělat více návštěv a v rámci každé z nich pak mnoho hitů.

Je důležité vědět, že k ukončení návštěvy a startu nové dochází v případě dvou návštěv na těchto hranicích: půlnoc, 30 minut nečinnosti uživatele, příchodu uživatele z jiného zdroje.

Analytics měří návštěvy standardně jen mezi při přechodu mezi jednotlivými stránkami.

Jak porovnávat data?

Vždy analyzujte větší časový úsek. Při porovnávání období také vedle sebe dávejte stejně období stejného typu. Pozor na sezonnost, online nebo i offline marketing, pozor na jiný počet vikendů a svátků v období a tak dále.

Vlastní výběry dat pro vývojáře

V rámci jedné služby si můžete nastavit různé Výběry dat. Zde si můžete sestavit přehledy, provést jiná nastavení, přičemž výchozí výběr dat zůstane zachován. Můžete si pak třeba:

• nastavit jiné cíle – třeba konkrétní rychlost načtení stránky
• použít jiné poznámky, filtrace, upozornění
• nastavit uživatele pouze do vymezeného výběru dat

Vlastní segmenty

V reportech lze přidat další segment (nahoře je volba + Přidat segment, která po kliknutí umožní vybrat z možností). Vyberete si část vaší návštěvnosti, kterou pak můžete porovnávat s jinou částí. Výchozí segment je pochopitelně „Všichni uživatelé“.

Pro začátek vám budou stačit přednastavené segmenty. Segmentem mohou být třeba návštěvy z mobilních zařízení nebo návštěvy, během nichž se na webu něco zakoupilo.

Jen pozor na vzorkování, tedy výběr dat. Při použití segmentu se může stát, že vidíte třeba jen 10 % návštěv.

Shrnutí základního použití Google Analytics pro vývojáře

• Naučte se Analytics správně vložit.
• Nainstalujte si Technical Performance Dashboard a sledujte čísla o rychlosti webu, prohlížečích a dalších technických aspektech.
• Zásadnější změny zapisujte, nechte si posílat emailové reporty.
• Využívejte nástroje pro debugování Analytics.
• Nastavte měření i tam, kde se nemění URL adresa.
• Naučte se data správně číst, porovnávat a vyhodnocovat.