A/B testování ve WordPressu s Google Analytics

A/B testování ve WordPressu s využitím Google Experiments

A/B testování je jedinečnou možností, jak vzájemně porovnat výkon více variant jedné podstránky Vašeho webu. Když hovoříme o výkonu, může to pro každého znamenat něco jiného. Pro někoho je metrikou pro měření výkonu doba strávená na stránce, pro někoho vyplnění poptávkového formuláře, e-shopy se zase orientují na počet dokončených objednávek. V praxi testování probíhá tak, že na množině uživatelů, z nichž je každé podskupině nabídnuta jiná varianta vstupní stránky, měříme již zmíněné metriky.

O A/B testování jsem měl mylnou představu, že je jeho konfigurace buď kdovíjak náročná nebo si člověk musí zaplatit drahý plugin. Jelikož se mi podařilo svůj první A/B experiment rozchodit za cca 10 minut a zadarmo, není pravda ani jedno.

Nastavení A/B testování se v prostředí Wordpresu skládá ze dvou částí:

  1. Nastavení Experimentu v Google Analytics
  2. Vložení JavaScriptového kódu na stránku předlohy A/B testování.

Nastavení Experimentu v Google Analytics

O Google Experimentech obecně a jejich nastavení je přehledně psáno v dokumentaci Google. Začnete tím, že si otevřete v Google Analytics v sekci Chování záložku Experimenty a zvolíte možnost „Vytvořit experiment“ (galerie obr.1). Samotná kofigurace se skládá ze 4 kroků. :

  1. Nastavíte si název experimentu, metriku, kterou budete sledovat (můžete i více). A podíl návštěvníků, které experimentu podrobíte. (obr.2)
  2. Nastavíte předlohu, tedy původní stránku webu, se kterou budete chtít poměřovat její varianty. (obr. 3)
  3. Zvolíte možnost manuálního přidání kódu na stránku předlohy (obr.3). Manuální přidání popisuji níže v tomto článku.
  4. Zkontrolujete přidání kódu a spustíte experiment.

Manuální přidání JavaScriptového kódu experimentu do stránky předlohy

Je třeba, aby kód experimentu figuroval v kódu hlavičky stránky (mezi tagy <head></head>) pouze na stránce předlohy. Hlavičku můžete editovat přímo z administrace Wordpresu na záložce Vzhled -> Editor, kde vyberete jako stránku k editaci Záhlaví (header.php). Jelikož je ale hlavička pro všechny podstránky vašeho webu společná musíte si vypomoci krátkým PHP úryvkem, který říká, že kód experimentu bude umístěn pouze v hlavičce vybrané stránky:

if ( is_page( 'ID stránky' )) {
javascriptový kód zkopírovaný z Google Experiments }

Tento kód umístíte hned za tag ; ve zdrojovém kódu již zmiňovaného souboru header.php. ID stránky zjistíte snadno. Pokud stránku v administraci editujete, ID je číselná položka v URL adrese za řetězcem „post.php?post=“. V mém případě se jednalo o stránku s ID 2.

if ( is_page( '2' )) {    
<!-- Google Analytics Content Experiment code --><script>// <![CDATA[
function utmx_section(){}function utmx(){}(function(){var
k='110749754-0',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl': '://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+ '&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date(). valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+ '" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
// ]]></script><script>// <![CDATA[
utmx('url','A/B');
// ]]></script><!-- End of Google Analytics Content Experiment code -->} 

Jak spustit Tumblr blog na vlastní subdoméně

Ve skutečnosti je tento problém velmi snadno řešitelný, ale než jsem se k němu progooglil a zjistil, že to skutečně funguje zabralo docela dost času. Nastavit CNAME záznamy ve správě DNS. V administračním rozhraní u registrátora vaší domény (v mém případě skvělý blueboard.cz) je třeba editovat CNAME záznam podle následujícího obrázku na hodnotu domains.tumblr.com.

Změnit doménu na Tumblr.com. Na adrese administrace jednoho z vašich tumblr blogů ve tvaru https://www.tumblr.com/settings/blog/váš-název-blogu zvolíte možnost use custom domain a nastavíte doménu na váš vysněný název, u kterého už jste si v předcházejícím kroku nastavili CNAME záznam. Následně subdoménu otestujete, uložíte a počkáte, než se na ni blog převede (až 24h).

Webexpo 2015 – 2. část

Vojta Roček

Design for change

Na loňském Webexpu mě nejvíc bavila přednáška Adama Hrubého nazvaná Design for change. Na písmenko stejně se jmenovala i letošní přednáška Vojty Ročka a opět to byl pro mě největší zážitek festivalu. Vojta na začátku zdůvodnil proč přednášku nazval stejně jako Adam loni. Inspirovalo ho úsilí, které Adam věnoval trpělivému vysvětlování smyslu rebrandingu Ekologického právního servisu zaměstnancům této firmy. Mluvil o tom, že drazí konzultanti, kteří mají okamžitě řešit problémy firem jsou takovými prášky v době nemoci. Firmu na chvíli dostanou z akutního problému, ale neřeší příčinu. Datová analytika by měla být nástrojem ke změně chování firem a ne pouze hašení aktuálních problémů. Jako podstatnou úlohu HR označil vybírání vhodných pracovníků ne podle toho co umí, ale jak jsou ochotni se změnit, zlepšovat.

Umění měnit se a učit se z vlastních chyb je totiž v prostředí internetu ještě mnohem podstatnější než v offline světě.

 

Martin Michálek

Designování webu v prohlížeči

Martin nejprve ukázal schéma jakým se dříve vytvářely weby: nabídka -> návrh -> frontend -> programátor -> spuštění a nazval jej niagarský průseropád s narážkou na vodopádový typ agilního vývoje a jeho schopností vytvářet chyby, které dopadnou na články na konci procesu. Pozdější vylepšení schématu o analýzu UX generování chyb úplně neomezilo, protože UX designér a grafik z podstaty nemohou vidět problémy, které při psaní samotného kódu později potkají frontendistu. Jako řešení, které sám se svými kolegy dnes používá uvedl zabývat se frontendem již na začátku společně s grafikou a UX. Akcentoval také přístup mobile first. posteskl si, že by pro jeho práci byl ideální nástroj, který by kombinoval funkcionalitu prohlížeče a Photoshopu.

Ondřej Špaček

Bezpečnost pro markeťáky

Ondřejova přednáška o bezpečnosti byla zábavná a přínosná. Odhalila mi například skutečnost, že šifrování MD5 rozhodně není bezpečné. Alternativou je prý šifrování bcrypt, které je pomalejší a neumožňuje robotům zkoušet v rychlém časovém sledu různé podoby hesel. Součástí přednášky byla spousta vtipných příhod, které Ondřej neustále zažívá při svém rýpání se v mezerách zabezpečení bank, e-shopů a dalších institucí. Zmínil například nelogičnost přístupu Aukra, které mělo pro délku hesla limit, přitom nejbezpečnější hesla jsou nejdelší. mBank zase neumožňovala do hesla dávat české znaky. Proč? Protože web programovali poláci. 

V jedné nejmenované Fiobance mají platnost hesel 365 dní.

jako nešťastný uvedl i zvyk některých institucí (zejména bank) vyžadovat po uživatelích změnu hesla každý rok. To zpravidla vede k tomu, že si uživatelé vytváří hesla ve tvaru Fio2015, Fio2016, aby si je snadno zapamatovali. trvání na pravidelné změně hesla tak paradoxně vede k tomu, že jsou tato hesla slabá a snadno prolomitelná. Jako riziko uvedl také bezpečnostní otázky při zapomenutí hesla (je jednoduché ho zjistit/vygooglit).

Ondřej Galik

Banka v cloudu

Od České spořitelny (ČS) by asi zábavu čekal málokdo, Ondřej ale zábavný byl a alespoň v mých očích značku svého zaměstnavatele přecijen trochu vylepšil. Mluvil o tom, že velkým molochům, jakými banky bezpochyby jsou, trvá často i 5 let, než zareagují na technologick0 trendy. Ve své přednášce mluvil o tom, jak ČS přesunula svá data do cloudu a jaké problémy a potenciální vylepšení pro uživatele to přineslo. 

Představte si, že starý dobrý outlook vaší mámě vyměníte ze dne na den za Gmail.

Jako základní problém tohoto kroku uvedl technickou nevyspělost zaměstnanců České spořitelny, která pramení hlavně z věkvého průměru. Riziko špatného zabezpečení dat v cloudu s nadsázkou shodil:

Nás překvapilo, kolik dat máme a jaké prd z toho víme. Nám i kdyby je někdo ukradl, tak s tím nic neudělá.

jako hlavní výhodu cloudu uvedl to, že data, která nejsou citlivá na soukromí mohou snadno poskytnout vývojářům k dalšímu zpracování pro interaktivní aplikace, což také prý už dělají. Můžeme se tak těšit například na budík, který po každém zamáčknutí pošle peníze na charitu? Z dalších přednášek už jsem zápisky nepořizoval. Hezký souhrn ale zpracovala například Olga Pohl z Agentury Hrivnak.      

Webexpo 2015 – 1. část

Od letošního Webexpa uplynuly téměř dva týdny a já se dostávám k zápiskům, které jsem z něj pořídil. Zjišťuji, že jsem papíru popsal opravdu hodně a tak mě teď čeká nemilý úkol, krácení a škrtání do formy, ve které to nebude úplně tl;dr;.

Organizaci festivalu bych pochválil za rozmístění přednáškových sálů, které byly od sebe letos všechny co by kamenem dohodil a tak nebyl problém stihnout vše, co člověk vidět chtěl (nepočítáme li kolize, které zde stejně jako na hudebních festivalech prostě jsou a nic s tím nenaděláme). Skladba řečníků lákala. Kapacity ze Slacku, Applu, MailChimpu nebo Skypu slibovaly předat spoustu zajímavých informací a v reálu skutečně nebylo moc přednášek, ze kterých bych odešel nespokojený.

Amit Paunikar

Find your inner product manager

Amit, který pracuje v pražské pobočce Skypu (je prý jedna z největších na světě), zdůraznil, že product manager (PM) je takový CEO produktu a je zodpovědný za všechna jeho selhání. Přirovnal PM k chobotnici kde každé chapadlo mělo symbolizovat nějaký důležitý skill. Nezapsal jsem si všechny, ale zaznělo zde, že by měl se svým týmem jednat jménem svých klientů, do kterých by měl mít schopnost se vcítit. K tomu měl také jeden citát:

Nezáleží na tom, jestli ve svém hotelu nabízíte kaviár, když vaše pokoje nemají koupelny.

tedy, že důležité je uspokojit základní potřeby zákazníků a až pak je vhodné zaměřit se na nějaký ten benefit navíc. Další důležitou schopností PM podle Paunikara je přemýšlet ve třech časových dimenzích. V dlouhodobém výhledu (roky), ve střednědobém výhledu (měsíce) a v okamžitém výhledu (dny). Jako špatný příklad dlouhodobého plánování byla uvedena firma Kodak, které s novými technologiemi ujel vlak. Jako příklad nutnosti být připraven na okamžité podněty byl zase uveden Facebook. Dobrý Produktový manažer by si měl podle Paunikara také vyzkoušet práce na pozicích svých podřízených, tedy například sednout si na zákaznickou podporu nebo zkusit si v reálu svůj produkt prodávat zákazníkům. Důležitýmo bodem byl také apel na to, aby se PM řídili správně interpretovanými daty a nikoli vlastními názory či doměnkami.

V přednášce také zaznělo, že PM musí přemýšlet ve velkém. Za příklad byl dán Elon MUsk, který by nikdy bez velkých plánů svých úspěchů nedosáhl.

Karel Smutný

Analýza dokázala @

Karel nejprve s dobrovolníky z publika na hře podobné tiché poště ukázal, že někdy může osoba analytika proces tvorby produktu zkomplikovat a znepřehlednit. Analytik se může stát profesí, která týmu zkrátka nic pozitivního nepřináší a je zde navíc. Základní prevencí tohoto stavu je komunikace mezi jednotlivými osobami v týmu. Tedy například  zadavatel projektu, analytik a designér by si spolu měli sednout a práci konzultovat. Pokud jsou od sebe procesy zadavatel -> analytik a analytik -> designér odděleny, je zde prostor ke zkreslení a tudíž i chybám. Zaujala mě také část přednášky, ve které Karel mluvil o tom, že příliš podrobné zadání, které je příznačné pro model vodopádu, může být často složité k pochopení a proces brzdit. Nakonec potěšila písnička avizovaná už na začátku přednášky. Analyza dokazala hovno od Slobodné európy.

Jiří Hana

Kontextová analýza textu

Působivá byla přednáška Jiřího Hany z Geneea. Představil nástroj této společnosti, který umí velmi přesně analyzovat rozsáhlý text na základě kontextu. Z textu dokáže rozspoznat například informace o osobách, značkách nebo lokalitách. jako příklad sloužila kontextová analýza textu ze všech dílů Haškova Švejka. Výstupem bylo více časových os, na kterých nástroj například dokázal identifikovat osoby nebo města, o kterých se v knížce v daném období mluvilo. Zatím jsem se nezajímal o to, kolik nástroj stojí, ale v kombinaci se scrapováním webových stránek by to mohla být hodně užitečná pomůcka při větších analýzách klíčových slov.

J. Christian Andersen

The future of marketing

Tato přednáška se týkala zejména vztahu ke klientům a objevování nových možností v marketingu. Christian uvedl své povídání příhodou, kdy v San Franciscu čekal na kafe v jedné vyhlášené kavárně příliš dlouho a napsal jí proto stížnost na Facebook. Kavárna zareagovala téměř okamžitě se slovy, že mají podstav zaměstnanců a proto obsluha trvala déle než obvykle. Rychlá reakce na připomínky je nutnost, způsob odpovědi ale zdaleka nebyl ideální. Ideálním by prý bylo, kdyby takovémuto nespokojenému zákazníkovi nabídli kávu zdarma při příští návštěvě, čímž by si ho mohli získat na svoji stranu. Objevování nových příležitostí marketingu ukázal na historické fotografii ženy s cigaretou. Jednalo se o slavnou herečku a byla to kampaň, která cigaretovým koncernům získala zcela novou, do té doby nepřístupnou, cílovou skupinu, ženy. Dalším zmíněným příkladem byl případ banky v Brazílii ze Sao Paula. Toto město je fatálně zasaženo nadměrným automobilovým provozem a kampaň banky spočívala v tom, že sponzorovala jízdní kola, která dopravu z místa na místo lidem výrazně zrychlovala. Spojit svoji značku s dobrým záměrem je základ.  Jako nezbytné byl také zmíněn monitoring uživatelské spokojenosti.

Noz Urbina

Multidimensional content strategy

Noz mluvil o tom, že přizpůsobování firem aktuálním trendům ve tvorbě internetového obsahu je velmi pomalé. Klíčem k úspěchu však není se trendům pouze přizpůsobovat, ale hlavně trendy předvídat. Uživatelská zkušenost s webem má prý 4 dimenze, délku, šířku, hloubku a čas. Většina webdesignerů přitom přemýšlí při návrhu hlavně nad prvními dvěma, tedy tím, jak bude web vypadat. Klíčová je přitom v současnosti hlavně hloubka webu, kterou Noz reprezentoval pojmy jako Sociální media nebo Lazy load. Multi dimenzionální obsah ukázal na typickém tweetu. Můžeme v něm najít vazby na lidi a značky (ostatní uživatelé twitteru), ve spojení s dalšími entitami, které jsou reprezentovány například hashtagy a odkazy. Při tvorbě obsahu zdůrazňoval význam metadat, jako nástroje, který dodává obsahu kontext.

Jak jsem zrychlil načítání webu na WordPressu

Po dokončení webu hypotečních poradců My Hypo, mě nejvíc trápila rychlost načítání webu. Nejen, že se jedná o celkem podstatnou složku hodnocení webových stránek vyhledávači, jde tady zejména o uživatele na mobilních zařízeních, kteří většinou s pomalými weby nemají trpělivost.

Bez jakékoli optimalizace byla celková doba načítání webu zjištěná nástrojem Webpagetest přes 6 sekund, což je neúnosné. Na 1. byte (Time To First Byte – TTFB) se muselo čekat sekundu a s renderováním (vykreslováním) se začalo po více než 2 sekundách. Opětovné načtení, když už je většina obsahu nakešovaná v prohlížeči, bylo samozřejmě o poznání rychlejší, ale jde nám hlavně o to, aby potenciálního klienta neodradilo už první načtení webu, což?

zrychleni_1_1

Když jsem se podíval blíže, co takto pomalé načítání způsobuje, vyšly z toho hlavně dva závěry. Velké množství JavaScriptových souborů (requests) a velké obrázky (bytes).

zrychleni_1_2

První, co jsem se rozhodl řešit, byl JavaScript. Velmi mi s tím pomohl WordPress plugin Autoptimize, který snížil počet requestů na Javascript z 97 na 68 a o sekundu rychlost načítání zvýšil. Nevím sice, jaký efekt měla optimalizace HTML, CSS a obrázků z CSS, která se dala v nástroji také nastavit, ale na začátek dobré a doporučuji. Nainstaloval a základně nastavil jsem také kešovací plugin WP Super Cache. Čekání na první byte ani začátek renderování se však těmito kroky příliš nezkrátilo.

zrychleni_2_1

Na řadu přišly obrázky. Po dvou neúspěšných pokusech s pluginy EWWW Image optimizer (potřeboval přístup k Jpegtran a Optipng) a ShortPixel Image Optimizer (optimalizace proběhla, nevím proč, naprázdno)  se ukázal jako pro mě nejlepší řešení plugin WP Smush, po jehož dávkové kompresi se podařilo 94 obrázků v mé knihovně zmenšit celkem o cca 1 MB. Tento krok se celkem výrazně projevil i na rychlosti stránek (včetně TTFB a renderování).

zrychleni_3_1

4 sekundy na plné načtení webu stále nejsou žádný zázrak, ale už je to pro uživatele snesitelnější. Další prostor ke zrychlení jsem objevil při pohledu do waterfall diagramu, ze kterého je patrné, že jsou stále ještě k dispozici (minimálně) tři obrázky, které by zmenšit potřebovaly (na obrázku červeně).

zrychleni_3_2

Tyto obrázky se nachází v pluginu Revolution Slider, který si je ukládá mimo oficiální knihovnu médií. To byl důvod, proč nebyly optimalizovány při dávkové kompresi. Obrázky jsem tedy optimalizoval ručně (respektive děkuji Aleně :) ) a do slideru je opět vložil. Výsledkem bylo další zrychlení homepage o cca 0.6 sekundy.

zrychleni_4_1

Díky těmto pluginům a krokům se mi nakonec tedy podařilo web zrychlit zhruba dvojnásobně.

Statistiky:

Bez optimalizace: http://www.webpagetest.org/result/150930_81_VX8/

Krok 1 (Autoptimize + WP Super Cache): http://www.webpagetest.org/result/150930_DR_W4R/

Krok 2 (WP Smush): http://www.webpagetest.org/result/150930_42_WYK/

Krok 3 (manuální zmenšení obrázků): http://www.webpagetest.org/result/151001_5Z_BHE/

 

Máte jiné zkušenosti se zrychlováním stránek? Myslíte, že jsou jiné pluginy vhodnější? Poradili byste mi další vhodné kroky vedoucí ke zrychlení webu? Podělte se o své názory v diskuzi.

Dalším používáním této stránky souhlasíte s používáním Cookies. Více informací

Nasatevní Cookies na této stránce je nastaveno na "Povolit cookies", aby vám její návštěvnost přinesla pokud možno, co nejlepší uživatelskou zkušenost. Pokud budete dál pokračovat v používání tohoto webu bez změny nastavení cookies nebo kliknete na "Přijmout", dáváte ke zpracování Cookies souhlas.

Zavřít