Webflow: Instalacja GTM i Hotjar

0:00Moi drodzy Witam was w kolejnej elekcji.

0:02Bonusowe lekcji które chciałbym pokazać jak można jeszcze bardziej rozszerzać

0:06możliwości i Come Flow dlatego że tutaj te wbudowane integracją mogą czasem nie

0:12wystarczyć nam na potrzeby obsługi naszego np.

0:15rosnącego sklepu i będziemy musieli w pewnych przypadkach skorzystać z innych

0:20integracji jak również podjąć jakieś dodatkowe narzędzia np.

0:24te które pozwolą nam lepiej zdobywać

0:26informacje o użytkownikach systemy e-commerce na ogół rzeczywiście

0:30wymagają tego żeby pracować i optymalizować ciągle nasze produkty.

0:34Nasz koszyk optymalizować dane zakupowe w związku z tym często będziecie chcieli

0:38właśnie skorzystać z innych integracji niż te które są wylosowane tu i która

0:43odmawiała w tym celu jednym z najprostszych

0:45rozwiązań jest dodanie do naszej strony Google tak menadżera pokażę wam teraz jak

0:50to zrobić i do czego w ogóle ten menadżer może nam służyć.

0:53W pierwszej kolejności loguje się czy rejestruje nowe konto na Google menadżer a

0:58następnie dodajemy nowe konto czyli ja sobie tutaj wpisze nazwę MK TP

1:04wpisze że jest to country Poland następnie podajemy adres naszej strony i możemy

1:09przynajmniej na razie roboczo podam adres MK Tepes Web lub ją

1:15czyli nasz roboczy adres po to żeby pokazać Wam jak to zrobić.

1:18Oznacza opcję Web bo to strona internetowa

1:20wybieram polecenie Create i musimy zgodzić się na warunki tak

1:24menedżera w tym momencie nasze konto jest tworzone a my możemy grać na stronę kod

1:29który jest potrzebny do instalacji menedżera.

1:31Chodzi o to żeby w sekcji HEAD stronę na jak najwyżej jak to jest możliwe w.

1:36Ten kod jeszcze w sekcji body.

1:38Będziemy musieli też wpłacić taki kawałek kodu.

1:41No i teraz przechodzimy do sekcji Custom Code.

1:44Tutaj znajduje się zarówno kod sekcji HEAD jak i kod sekcji body.

1:48W związku z tym do sekcji HEAD wklej taki kawałek kodu a do sekcji Body kopiuj

1:53i wklej mamy taki oto kawałek kodu zapisujemy oczywiście te zmiany one naraz

1:57zostały wszystkie zapisane aczkolwiek musimy jeszcze opublikować naszą stronę.

2:02I teraz możemy wybrać sobie polecenie ok i

2:04sprawdzić czy w ogóle nasza integracja działa.

2:07Jak to zrobić. Wystarczy że wybierzemy opcję Preview w

2:10tym miejscu i w tym momencie na naszej stronie.

2:12Jeżeli poprawnie jest zainstalowany tak

2:14menedżer powinien pojawić się specyficzny tryb podglądu

2:18i wyświetlić właśnie ten dolny panel tak jak u mnie w tym dolnym panelu możemy

2:23debatować różne akcje menedżera możemy zobaczyć co tutaj się stało czy zostały

2:27załadowane nasze skrypty i wiele więcej rzeczy i on dostępny jest oczywiście tylko

2:31w momencie kiedy my jesteśmy zalogowanie na konto Google.

2:34Nasi użytkownicy tego nie widzą a my będziemy widzieć ten panel do momentu

2:38kiedy nie włączymy tego podglądu czyli nie wybierzemy polecenia live preview Mode.

2:43Co możemy zrobić z pomocą tego menedżera.

2:45Otóż możemy tworzyć tzw.

2:47tagi czyli możemy dodawać jakieś kolejne rzeczy do naszej strony.

2:51Możemy korzystać też z trenerów.

2:53Możemy tworzyć zmienne foldery szablony itd.

2:56Ogólnie jeżeli chcesz nauczyć się jak można korzystać efektywnie z menedżera to

2:59polecam ci cały kurs na kadłubie który tego dotyczy.

3:02My natomiast w praktyce sprawdzimy dodawanie nowego targu.

3:06Możemy wybrać polecenie.

3:07Po to żeby stworzyć sobie nowy tag nazwę

3:10go hot Gear a w jego konfiguracji wybierzemy tę konfigurację czyli pierwszą

3:15zakładkę będziemy chcieli zainstalować tutaj skrypt hot Jara.

3:19Co to jest hot Jar to jest taka strona

3:21która pozwoli nam na trochę bardziej zaawansowaną analityka a nawet nagrywanie

3:25tego co użytkownicy robią na naszej stronie jak się po niej poruszają.

3:29To jest niezwykle przydatne w momencie gdy mamy jakiś leming czy mamy nową stronę

3:33chcemy zobaczyć czy rzeczywiście w naszej akcji jest takie jak zaplanowaliśmy.

3:37Czy rzeczywiście użytkownicy wykonują te akcje które chcemy.

3:41Jak widzisz Google tak menadżer posiada

3:42wbudowaną listę rozwiązań które możemy zaimplementowane na niemal jednym

3:46kliknięciem więc możemy tutaj wspiąć się m.in. na przykład Insight link inaczej.

3:52Przykładowo zapewnić sobie jakieś śledzenie konwersji.

3:56Natomiast nam będzie zależało na tym

3:57wbudowanym hot Gear więc możemy wybrać HOT Gear analityk Gold.

4:03No i to co potrzebujemy tutaj podać to hot Gear said it.

4:06Skąd wziąć takie IT.

4:08Naturalnie musimy zarejestrować się na Hot Jarczyk i utworzyć sobie nowe.

4:12W zupełności wystarczy nam darmowe konto.

4:14Ono zresztą w pierwszych dniach działania będzie jeszcze na takiej wersji Business

4:19która pozwoli nam tutaj dużo więcej zrobić w ramach hot jara ale również sama wersja

4:23darmowa w zupełności wystarczy wam często do tego żeby jakieś rzeczy przetestować.

4:28No i w momencie gdy założymy sobie taki nowy sklep będziemy mieli automatycznie

4:33m.in. Hot Jar oferuje możliwość robienia tego typu ankiet na stronie gdzie ktoś

4:37może wysuwa mu się jakiś panel i może wybrać jakąś odpowiedź.

4:41Nie będę z tego korzystał ale generalnie najpierw musimy zainstalować ten kod więc

4:44po stworzeniu nowej strony gdybyś dodał sobie tutaj New Saints podajesz jej adres.

4:48Następnie wybierasz instalację kodu.

4:51W naszym przypadku nie będziemy instalować kodu Manual nie tylko wybierzemy

4:54instalację na platformie i tutaj dostaniemy coś takiego jak said it.

4:59Nie musimy.

5:00Klikać w żadną z tych rzeczy tylko po prostu kupujemy.

5:03Said it. I to tyle to wystarczy.

5:05Mamy jeszcze Ustawienia zaawansowane ale

5:08tych ustawień na razie w tym przypadku nie musimy dotykać.

5:10Druga rzecz którą musimy zrobić momencie wpisania takiego zewnętrznego skryptu

5:14przez Google tak menedżer to zdecydować się kiedy taki skrypt będzie się

5:19uruchamiał czyli inaczej jakie strony lub też jakie akcje użytkownika chcemy śledzić

5:25w sekcji trick sharing będzie można przykładowo dodać tutaj różne akcje

5:28użytkownika polegające nawet na kliknięciu w pojedynczy przycisk i ten pojedynczy

5:32przycisk może nam odpalać jakiś skrypt z pomocą właśnie tak menadżera może

5:37to być śledzenie konwersji może to być cokolwiek innego.

5:39Natomiast w przypadku hot Jara w sekcji trick sharing wybierzemy sobie jedyny

5:43wbudowane automatycznie Tiger czyli o Page.

5:47My po prostu chcemy żeby ten kod od jutra był ładowane na każdej

5:52stronie żeby każda strona naszej witryny była śledzone przez hot Jara.

5:57Możemy wybrać tutaj jakieś wyjątki z pomocą indeks lepszy możemy stworzyć sobie

6:01więcej liderów ale w tym przypadku obiekt jest tym czego potrzebujemy.

6:05Wybieram polecenie Save

6:07i ostatnia rzecz która została nam do zrobienia jest to opublikowanie tych zmian

6:10które właśnie wprowadziliśmy w Google menadżer i robimy to z pomocą guzika MIT

6:14czyli wybieramy teraz polecenie MID i nadajemy jakąś nazwę naszej wersji np.

6:20mogę to nazwać hot Gear a następnie wybieramy polecenie publiczne.

6:24W tym momencie zmiany są publikowane i na moją stronę został z pomocą menedżera

6:29wstrząśnięty kawałek kodu który na każdej ze stron obsłuży mi hot Jara i teraz gdy

6:33wrócimy na naszą stronę a następnie ją odświeżyć.

6:36Commander to w tym panelu tak menadżer pojawia się informacja że został podpalony

6:42tak hot jaki czyli mamy tutaj informację o tym że ta operacja się powiodła.

6:48W zasadzie na dowolnej stronę stronie na której na którą byśmy weszli czyli np.

6:52strona produktu też oczekiwaliśmy tego że ten zostanie uruchomiony.

6:57No i świetnie jeżeli tak został

6:59uruchomiony to znaczy że nasza integracja powinna działać.

7:02W związku z tym możemy teraz przejść do sekcji Hitman chciałbym pokazać Ci jak

7:06uruchomić taką pierwszą Child mapę na Twojej stronie nazwijmy ją Home bo będzie

7:10obsługiwała stronę główną w darmowej wersji możemy i tak do tysiąca

7:14sesji obsłużyć w ten sposób a na darmowym paru nawet więcej.

7:18Chciałbym żeby śledzić tylko stronę główną

7:22i tutaj Wklej sobie po prostu adres naszej strony głównej to HTTPS.

7:27W ten sposób możemy zastosować zaawansowane opcje nie będę tego robił.

7:31Wybieram polecenie klient w tym momencie

7:33hit mapa jest tworzona mam informacja o tym że są zbierane dane są zbierane dane z

7:38kliknięć użytkowników i przez najbliższe 1000 sesji te dane będą gromadzone a ja

7:42będę później mógł zobaczyć jak rozkłada się ilość kliknięć na mojej stronie

7:46głównej czyli co użytkownicy klikając chętniej a co mniej chętnie.

7:50I to jest bardzo fajna opcja.

7:52Dodatkowo możemy stworzyć sobie nowe nagrania przykładowo zróbmy 100 nagrań.

7:57To jest też możliwe w wersji darmowej i

7:59będziemy nagrywali wizytę na każdej stronie.

8:02Mamy tutaj do wyboru opcję w zasadzie wszystkie zaznaczać czyli sesje które mają

8:07więcej niż 30 sekund w których ktoś ktoś klika.

8:10I będziemy też szczyty Walii dane z klawiatury co ktoś

8:14ewentualnie wpisuje podczas zamawiania wybieram polecenie Dan i start Recording.

8:19I znowu dane są już gromadzone teraz w momencie gdy zostanie zebranych

8:24100 nagrań ja będę mógł te nagrania odtwarzać i patrzeć szczegółowo na to jak

8:28użytkownicy chodzą po mojej stronie klikając nad którymi obszarami się

8:32bardziej czy mniej zastanawiają i czy indeks który zrobiłem jest rzeczywiście

8:36dobry czy proces zakupowy jest łatwy a także jak to wygląda na ich urządzeniach.

8:40Co jeszcze ciekawego możemy zrobić.

8:42Możemy stworzyć sobie lekki i zobaczyć ile osób np.

8:45weszło na stronę główną później na stronę

8:47produktu później na stronę koszyka a później na stronę podziękowania za zakup.

8:51W ten sposób stworzyć taki nasz cel

8:53czyli zobaczyć ile sesji końcową przechodzi cały czas jaki mamy konwersję

8:59czyli od strony wejścia do strony podziękowania za zakup możemy prześledzić

9:04całą ścieżkę użytkownika i zobaczyć w którym miejscu najwięcej osób odpada.

9:08Jeżeli najwięcej osób odpada np.

9:10na tej drugiej stronie czyli np.

9:13w naszym przypadku stronie produktu no to

9:15można się zastanowić wtedy jak ten drugi krok zoptymalizować.

9:19Czyli co ja mogę zrobić na tej stronie produktu żeby mniej osób odpowiadało żeby

9:23więcej osób w tym laików przechodziło dalej.

9:25Takie rzeczy można też zrobić np.

9:27w Google Analytics aczkolwiek tutaj jest to zdecydowanie bardziej wygodne.

9:31No i w końcu Fibak np.

9:32możemy sobie ustawić taki Widzew który będzie wyświetlany.

9:36Możemy ustawić dla niego pozycję np.

9:38po lewej stronie ustawić jaki ma mieć schemat kolorystyczne.

9:42Tutaj też wybrać sobie jakieś kolory ustawić style reakcji.

9:45Przykładowo możemy prosić klienta o ocenę

9:48naszej strony a później zbierać jeszcze jakieś dodatkowe informacje np.

9:52jeśli podana maila będzie mógł przekazać dodatkowe dane i wpisać coś w formularzu

9:56połączymy to na wszystkich stronach gdzie jest.

9:59Dan i start getting back czyli teraz będziemy mogli zbierać na naszej stronie.

10:05Ostatnia rzecz którą musimy zrobić to włączyć ten efekt.

10:09Jest on teraz aktywny a my możemy przejść na naszą stronę i raz jeszcze ją odświeżyć

10:13i teraz po odświeżenie pojawi nam się taki guzik Fibak można na niego kliknąć.

10:18Można ocenić np.

10:20naszą stronę na 4 gwiazdki.

10:22Może coś jeszcze było warto byłoby poprawić.

10:24Co więcej użytkownik może np.

10:26zaznaczyć sobie tutaj jakiś fragment

10:28strony przykładowo to może napisać nam jakiś komentarz.

10:32Teraz jeszcze ewentualnie prosimy go o email mogę kliknąć I Fit Back został

10:36zapisany w ramach hot Gear teraz jeśli otworzymy sobie hot Gear to mamy

10:40informację o jednej odpowiedzi która przeszła test link a my możemy dodatkowo

10:44przeglądać jakoś inaczej rezultaty zobaczyć jak to się rozkłada na grafik itd

10:49Więc generalnie sporo fajnych opcji jest tutaj dostępnych.

10:52Pokazałam ci tylko jedno z wielu narzędzi

10:55które możesz pojąć za pomocą Google Talk menedżera ale co ważniejsze.

10:59Jeżeli nawet Google manager nie wspiera jakiegoś narzędzia nie znajduje się ono na

11:03liście tych narzędzi które możesz zainstalować.

11:06To i tak z pomocą Google tak menadżer

11:08możesz skorzystać z modułu Custom kod pokaże ci jak to wygląda jeżeli stworzyć

11:12nowy tag to podobnie jak na łeb lub wspinając dowolny kod możesz skonfigurować

11:18tutaj tak konfigurację on wybierasz sobie Custom ml i wtedy wstawia dowolny kod HTML

11:25który będzie jakby wstrząśnięty na twoją stronę.

11:28Więc nie musisz tego robić po stronie

11:29Apple możesz wszystkie tego typu integrację zrobić sobie tak menadżer.

11:33A korzyść z tego płynące jest np.

11:35taka że możesz wybrać zaawansowane opcje Göring czyli możesz przykładowo nie

11:39wstawiać na jedną szczególną stronę albo na wszystkie tak jak ma to miejsce w łeb.

11:44Tylko możesz jako Trick Göring wybrać jakąś specyficzną akcję którą wskaże czy

11:49możesz stworzyć sobie nowy trener który będzie bazował np.

11:53na obejrzeniu wideo albo na jakimś Custom owym wzięcie albo na kliknięciu mamy tutaj

11:58kliknięcie na wszystkie elementy albo tylko link.

12:00Jeśli wybierzemy na wszystkie elementy sam

12:02klik możemy wybrać specyficzną stronę albo specyficzną stronę z której nasz

12:07użytkownik przyszedł i kliknąć w jakiś link.

12:09Więc bardzo dużo opcji jest tutaj dostępnych.

12:12I można sobie właśnie te litery zrobić

12:15zupełnie Custom owe uruchamianie tylko po kliknięciu na jakieś określone rzeczy.

12:19Przykładowo przy wysyłaniu formularza i wtedy np.

12:22zaliczyć sobie jakąś konwersję w Google Analytics lub też w Google.

12:27No i masę rzeczy można w ten sposób jeszcze zrobić.

12:30Także mam nadzieję że pokazałem ci potencjał menadżera.

12:33To wszystko na teraz dzięki i do usłyszenia.