Dnes si ukážeme, jak nastavit elektronický obchod ve službě Google Analytics s e-shopem běžícím na Prestashopu 1.6. (platí i pro 1.5. a novější). Návod bude podrobně komentován s větším počtem screenshotů pro názornou ukázku.
Instalace modulů Google Analytics + Google Analytics API
Nejdříve je potřeba do Prestashopu nainstalovat modul Google Analytics pro vložení měřícího kódu do Presty. Tento krok můžete přeskočit v případě, že již Google Analytics na svém webu využíváte k měření návštěvnosti (ve zdrojovém kódu máte měřící kód Analytics). Upozorňuji, že pro korektní funkčnosti musíte mít na stránce měřící kód Analytics buďto díky modulu Google Analytics, nebo ručně vložený.
Druhý modul k instalaci bude Google Analytics API. Tenhle modul nám bude sloužit k propojení Analytics elektronického obchod, Prestashopu a samotného předávání informací o provedených objednávkách (cena, marže, dopravci…). Upozorňuji, že pro korektní funkčnosti musíte mít na stránce měřící kód Analytics buďto díky modulu Google Analytics, nebo ručně vložený.
Moduly nainstalujte v administraci Prestashopu pod záložkou v menu Moduly a Služby. Není třeba stahovat .zip balíčky z internetu. Stačí využít vyhledávání slovního spojení google analytics v levém panelu pod nadpisem Seznam modulů a nad kategoriemi modulů. Nainstalujte oba dva moduly – Google Analytics i Google Analytics API.
Propojení Google Analytics trackovacího kódu s Prestou
Nyní je třeba v Google Analytics založit nový web a nechat si pro něj vygenerovat trackovací kód. Budeme předpokládat, že toto již máte, neboť je to již nad rámec tohoto článku (návod možná někdy příště).
V seznamu webů si v Analytics na adrese https://www.google.com/analytics/ vyberte Vámi požadovaný web, v horním menu klepněte na záložku Administrátor a v prostředním sloupčeku pod služba vyberte první odkaz Nastavení služby.
Zde uvidíte Vaše ID. To si zkopírujte a vložte do Prestashopu, kde kliknete u modulu Google Analytics na Konfigurace.
A v Prestě vložíte do pole Google Analytics Tracking ID + zaškrtnete Aktivováno. Uložíte.
Vytvoření API pro Analytics v Google APIs Manager
Teď budeme potřebovat zajistit komunikaci při přenosu dat mezi Prestashopem a Google Analytics. Přihlásíme se proto do Google APIs Manageru na adrese https://console.developers.google.com/.
V levém sloupci vyberete knihovnu Library a pod záložkou Google APIs vyhledáme položku Analytics API.
Vidíme hlášku A project is needed to enable API. V překladu Projekt je požadován pro povolení API. Ve stejném řádku, jako je tato hláška tedy vytvoříme projekt klepnutím na modré tlačítko Create Project. (Pokud bude třeba, klepneme na vyskočeném okně znovu na Create Project.)
Následně zvolíme jméno našeho projektu a odklikneme podmínky užití (+ volitelné info o updatech na mail).
Potvrdíme Create. Teď chvilku potrvá, než se vše vytvoří. Ale jen chvilku. Následně Povolíme naše API kliknutím na Enable.
Vytvoření údajů pro komunikaci (= credentials)
Vyskočila na nás další hláška To use this API, you may need credentials. Click „Create credentials“ to get started, že je třeba vytvořit údaje pro komunikaci (tzv. credentials). Na to ale klikat nebudeme. My klikneme v levém sloupci na Credentials a následně na horní záložku OAuth consent screen.
Zvolíme zde Product name shown to users, tedy název naší služby/webu/shopu (pochopitelně). A to je vše, nic dalšího není třeba vyplňovat (volitelně na Vašem úsudku). Uložíme kliknutím na modré Save.
Až nyní vytvoříme Credentials. Vyskočí na nás proto hláška a my klikneme na Create Credentials.
Nyní zvolíme OAuth client ID.
Jako typ Client Id zvolíme Web application. Dále vyplníme jméno, např. tam klidně nechte Web client 1 (je to jedno). Vyplnit další údaje bude složitější. Pokračujte ve čtení od obrázkem.
Jako autorizované URL uveďte následující – stačí jen změnit domena.cz za tu Vaši. A případně přidat/odebrat HTTP/HTTPS protokol či www subdoménu. Pro ukázku vložte do polí (obě 2 hodnoty Vám):
- Authorized Javascript origins
- http://www.domena.cz
- https://www.domena.cz
- Authorized Redirect URIs
- http://www.domena.cz/modules/gapi/oauth2callback.php
- https://www.domena.cz/modules/gapi/oauth2callback.php
Vygenerují se Vám údaje, které si bezpečně uložte! Jedná se o client ID a client secret.
Vložení Client ID, Client Secret a Profile do Prestashopu
Tyto údaje si zkopírujte a vložte do Prestashopu do konfigurace modulu Google Analytics API do kolonek Client ID a Client Secret.
Zbývá zde ještě kolonka Profile. Její obsah zjistíte tak, že se přihlásíte do Google Analytics a z URL si zkopírujete řetězec číslic předcházející písmenem p. Jedná se přesněji o ty číslice červeně podtržené na následujícím obrázku.
A uložíme klikem na Save and Authenticate.
Spárování Analytics a Prestashop
Po uložení Vás to přesměruje na servery Googlu. Zde bude možná třeba vybrat účet, pomocí kterého jste zaregistrováni v Analytics a tvořili jste API. Následně budete požádání o souhlas s povolením oprávnění.
Toto je nutné povolit pro spárování Vašeho Prestashopu s Analytics. Pokud se vše povedlo, hodí Vás to zpět do Presty na modul s hláškou Google API Authorization granted a informací o včerejších návštěvách Vašeho webu (e-shopu).
Tím je vše hotovo a objednávky se Vám budou automaticky synchronizovat do Google Analytics do sekce Konverze. Tu naleznete v podrobnostech Vašeho webu a v levém panelu dole kliknete na Konverze (s ikonkou vlajky) a Elektronický obchod.
Tak a nyní jste už opravdu dočetli celý tento návod až do konce. Gratuluji Vám! Pokud Vám návod pomohl, budu velmi rád za sdílení, nebo komentář. Pokud něco nefunguje, přidejte komentář, nebo se mi ozvěte na e-mail info@tomasjares.com.
Fajn návod, díky za to. Nicméně bohužel se na konci objevila hláška „Cannot retrieve test results“ .. Je něco špatně, nebo je třeba počkat na nějaký data?
Ahoj, kde se Ti hláška zobrazila? Po potvrzení přístupu k Google Analytics (v článku pod nadpisem „Spárování Analytics a Prestashop“) – na webu Googlu/po redirectu do adminu Tvé Presty, anebo po přihlášení do Analytics a rozkliknutí sekce elektronického obchodu? Notifikace Google účtu nic neříkají? Pokud ne, vyčkal bych na první objednávku, zda se zaeviduje. Jinak tahle hláška se zobrazuje v adminu Presty ve chvíli, kdy po potvrzení přístupu (access granted) nelze vyměňovat data shop <-> analytics. Ověřil bych, zda máš ve zdroji jak Analytics kód, tak Analytics API. Někdy problém totiž způsobuje stará cache.
Dobrý den,
pěkný návod. Asi se vše zadařilo, v prestashopu mám hlášku „Včera váš obchod navštívilo 385 lidí a bylo provedeno celkem 1600 jedinečných zobrazení stránek.“
Nicméně v Analytics v sekci Konverze – Elektronický obchod – Přehled se mi nic nezobrazí, přestože nějaké nákupy proběhly. Nemáte nějaký tip, kde může být problém a co s tím?
Děkuji
Dobrý den, počkal bych nějakou dobu na zaktualizování dat. Někdy se informace do GA nepřenesou okamžitě.
Ještě mě napadá, že v Analytics můžete mít vpravo nahoře zapnuté a špatně nastavené filtrování obsahu v časovém období.
Děkuji vám, trápil jsem se 3 dny, s Vaším návodem jsem s úsměven klikal cca 5 min….přeji mnoho úspěchů….
Jsem rád, že Vám návod pomohl!
Dobrý den pane Jareši,
návod jsem prozatím nezkoušel, ale vypadá jasně a výstižně. Chtěl bych se před jeho použitím zeptat, zda po jeho aplikaci půjdou vidět konverze ze všech způsobů plateb, které na e-shopu máme (tzn. platební brány, bankovního účtu a dobírky). Nevím jak je to možné, ale prozatím se nám zaznamenávají konverze pouze u dobírky. Na webu máme prozatím nahozený pouze měřící köd bez API.
Předem děkuji za odpověď a přeji úspěšný den.
Tomás
Dobrý den pane Válko,
s tímto chováním modulu jsem se již setkal. Je to způsobené dřívější individuální úpravou platebního modulu (v tomto případě platby kartou/převodem). Pokud tedy někdy v minulosti proběhla úprava těchto zmíněných modulů v místě, kde mezi sebou komunikují (přejmenování proměnných, změna pořadí polí), nemůže to fungovat. Pro test bych zkusil stávající nekompatibilní modul na FTP přejmenovat (pro zálohu), v adminu deaktivovat a nainstalovat znovu originální. Poté by předávání dat z platebního modulu do modulu Google Analytics API a následně na servery Googlu fungovat mělo.
Úspěšný den nejen s Prestashopem i Vám!
Zdravím, návod je super. Jen mám dotaz k poslednímu kroku.
Při vyplnění údajů v modulu a následnému uložení dojde k erroru. Viz. níže.
Kde jsem mohl udělat chybu? Děkuji
Error: redirect_uri_mismatch
The redirect URI in the request, ht!tp://www.newstars.cz/modules/gapi/oauth2callback.php, does not match the ones authorized for the OAuth client. Visit ht!tps://console.developers.google.com/apis/credentials/oauthclient/434915059855-knoiovt8i9qv8ego0r4hautefoi9jjki.apps.googleusercontent.com?project=434915059855 to update the authorized redirect URIs.
EDIT Jareš T.: URL zneaktivněny.
Dobrý den Davide,
však to máte vše popsané v té chybové hlášce. 🙂 Snažíte se k Google API console přistupovat z jiné URL, než z té, jakou jste tam zadal. Musí se jednat opravdu o stejnou adresu a případně další varianty (s/bez www a http/https). V článku to popisuji hned po vytvoření OAuth Client ID a příklady jsou uvedeny v seznamu.
Přeji rychlé vyřešení,
Tomáš Jareš
Skvely clanek, diky
Jsem rád, že pomohl! 🙂
Super návod. Děkuji za lidi jako jste vy a pomáhají ostatním.
Rádo se stalo. 🙂
Dobrý den,
snažím se marně rozchodit GA s O2.0, ale po zadání všech údajů a propojení s GA mě to nakonec napíše „Cannot retrieve test results“ . Vše jsem zkontroloval podle diskuze a netuším kde je chyba. Včera mě to ukázalo 3 přístupy a od té doby za 24 hodin nic.
V Google APIS jsem přidal po vytvoření API jen tu službu Google Analytics Reporting API, kterou teď vidím na dashboardu.
Z GA jsem vzal kód za „p“ vložil tajný kód i ID z API s výsledkem výše uvedeným. Pokud by Vás něco napadalo budu rád za radu.
Předem děkuji za čas i skvělý návod.
David
Děkujhi za návod. Je perfektní. Mám jen jeden dotaz. Vše jsem nastavila, ale bohužel mi to nahlásí tuto chybu po otevření modulu:
„Cannot retrieve test results“