Webflow: Google Analytics

0:00Cześć! W tej lekcji chciałbym porozmawiać o integracjach, które możemy dodać do Webflow by

0:03m.in. połączyć naszą stronę z Google Analytics, a także innymi usługami.

0:09Porozmawiamy później także o API i o tym

0:11co możemy zrobić za pomocą prostych, a nawet bardziej złożonych automatyzacji.

0:15Jeśli przejdziemy do ustawień projektu, czyli Project settings, znajduje się tutaj

0:19zakładka Integrations i w tej zakładce możemy po pierwsze połączyć je z Google

0:23Analytics. Wystarczy, że przekażemy tutaj nasz Universal analytics tracking ID,

0:28który możemy znaleźć na Google Analytics w momencie, gdy założymy swoje konto.

0:32Przechodzimy tutaj do stworzenia nowej właściwości Create property.

0:36Możemy zrobić to w narzędziach administracyjnych.

0:38Klikamy na Create property i będziemy chcieli mierzyć naszą aplikację

0:42webową, czyli stronę internetową. Wybieram polecenie Continue.

0:45Strona to będzie Webflow,

0:46możemy ją nazwać na razie, a adres pod https to będzie webflow.blog.eduweb.pl

0:53wpisuje ten adres, który ma

0:56nasza witryna i tutaj możemy sobie jeszcze wybrać jakąś kategorię, a także czas.

1:00Polecam wybrać dobrą strefę czasową, żeby wszystkie dane były zliczane poprawnie.

1:07Ja na test po prostu ustawię takie dane i teraz mamy coś takiego jak Tracking ID. To

1:11jest jedyna rzecz, którą musimy stąd skopiować. Tracking ID, a następnie wkleić go tutaj.

1:16I to wszystko. Teraz wybieramy polecenie Save changes

1:18i zmiany po opublikowaniu naszej strony będą widoczne.

1:22Czyli wybieram polecenie Publish, publikuję pod m.in. tą domeną

1:27webflow.blog.eduweb.pl i zaraz będę widział wszystkie dane w panelu Google Analytics.

1:32Jeśli przejdę teraz na stronę Webflow blog to powinienem w Analytics,

1:38wróćmy do niego, móc przejść do sekcji Home.

1:42I tutaj zobaczymy zaraz, że jedna osoba, a nawet w dwóch instancjach mam teraz

1:46otwartą tę stronę, więc znajdują się na naszej witrynie. Także to działa,

1:51natomiast mamy tutaj jeszcze kilka opcji, które warto by było dostosować.

1:55Po pierwsze, jeżeli zamierzasz korzystać z modułu e-commerce w Webflow

2:00przede wszystkim wtedy warto włączyć sobie tę opcję "gtag". Ona jest domyślnie dostępna,

2:05w zasadzie może być włączona cały czas, ale jeśli z jakichś powodów nie będziesz

2:09korzystał z tej nowej metody śledzenia w Google Analytics to nie będziesz mógł

2:13śledzić takich zdarzeń, które pochodzą właśnie z modułu e-commerce Webflow, czyli np.

2:18dodanie do koszyka, czy zakup. W związku z tym warto mieć to zaznaczone.

2:22I w końcu mamy możliwość włączenia anonimizacji adresu IP.

2:26W części przypadków dla RODO jest to

2:29wymagane, więc warto się zorientować i w razie czego taką opcję anonimizowania

2:34danych włączyć, aby było wygodniej nam procesować dane prywatności użytkowników.

2:39Jeśli chodzi o tę integrację to w zasadzie wszystko. Nie musi nic więcej tutaj robić,

2:44ale fajnie by było, w ramach naszej strony,

2:46móc śledzić jakieś zdarzenia w Google Analytics. Właśnie po to instalujemy Google

2:51Analytics, żeby nie tylko zobaczyć cały ruch, ale jednocześnie śledzić, czy np.

2:55ktoś kliknął na tym linku "Get the quote". Więc jak możemy to zrobić?

3:00Otóż na razie nie ma bardzo prostego sposobu na wykonanie tego w Webflow. Trzeba

3:04mieć kilka snippet'ów kodu pod ręką i robimy to na takiej zasadzie, że spinamy

3:09w ustawieniach takiego elementu, który chcemy śledzić,

3:13i proponuję teraz wybrać taki element, który rzeczywiście jest klikalny, czyli

3:16który będzie mógł prześledzić to kliknięcie.

3:18Ten nasz button tego nie potrafi, ale mamy np.

3:21link do bloga. Blog jest podlinkowany, będzie przechodził

3:25do podstrony blog, w związku z tym na tym przykładzie mogę Ci pokazać jak to zrobić.

3:29Przechodzimy w ustawienia, następnie nadajemy jakiś unikalny identyfikator np.

3:33możemy wpisać tutaj "link-blog"

3:36i w ten sposób będziemy mogli w kodzie JavaScript zidentyfikować

3:40taki przycisk, czy każdą inną rzecz, której nadamy identyfikator.

3:44Tutaj akurat mamy link-blog i do tego link-bloga

3:46będziemy musieli się odnieść. Najpierw może od razu opublikujmy naszą

3:50stronę. Będziemy musieli się do niego odnieść w kodzie,

3:53który dodamy albo do tej pojedynczej podstrony albo w jednym miejscu w kodzie

3:58wszystkich naszych podstron, czyli w Project settings.

4:01Może to być trochę lepsze miejsce z uwagi na to, że, gdybyśmy wstawiali tutaj właśnie

4:06takie akcje, które są wykonywane, no to mamy je zawsze dostępne w jednym miejscu, nie

4:10musimy gdzieś przeklikiwać się po podstronach i właściwościach

4:14i taki kod możemy dodać do Footer'a spokojnie, czyli może on być przed

4:17domknięciem znacznika body, a żeby go dodać po prostu skorzystamy z

4:21prostego snippetu. Ten snippet będzie odpalał nam skrypt, który z pomocą

4:27jquery pobierze ten, znajdzie w kodzie ten identyfikator.

4:31Czyli tu jest my-link.

4:32Ja zrobiłem taki identyfikator link-blog i to jest właśnie oznaczenie, że

4:38będziemy szukać identyfikatora. Klasy szukalibyśmy w ten sposób,

4:42natomiast identyfikator link-blog powinniśmy znaleźć i po kliknięciu na niego

4:46będziemy chcieli wykonać jakąś akcję w JavaScript.

4:49Czyli w tym przypadku będziemy chcieli

4:51wykonać funkcję. Możesz sprawdzić tę funkcję w dokumentacji Google Analytics, co

4:55powinno się tutaj znaleźć. W przypadku śledzenia zdarzeń

4:58wystarczy, że wkleimy sobie

5:00następujący kawałek kodu, a następnie będziemy śledzili

5:03event, czyli zdarzenie, click, czyli kliknięcie.

5:06Możemy jeszcze dodać opcjonalnie dodatkowe dane np.

5:09category, czy label. Jeszcze kilka opcjonalnych pól można tutaj przekazać np.

5:14ja tutaj wpisałem, że to będzie menu button Click i

5:17label to będzie blog, że ktoś kliknął w menu na link do bloga.

5:21Teraz zapisujemy tę zmiany i przechodzimy do sekcji Publish.

5:25Jeszcze raz musimy opublikować naszą

5:27stronę. Przejdziemy do jej podejrzenia, czyli obejrzę sobie tę stronę, która jest

5:32podpięta w Google Analytics webflow blog, a następnie kliknę na link do bloga,

5:36ale zanim to zrobię to przeniosę się do Google Analytics.

5:40Upewnię się, że w sekcji Real Time wybiorę

5:42Events, czyli przejdę do zdarzeń i w tym miejscu powinien pojawić się

5:48event, powinno pojawić się zdarzenie, w momencie, gdy wykonam to kliknięcie. Więc

5:52klikam na blog i teraz przechodzę do Google Analytics.

5:56I jak widzisz automatycznie wskoczyła mi kategoria menu

6:00button click. Akcja kliknięcie i możemy wejść do środka

6:04i zobaczymy, że to było ten event label jest ustawiony na blog.

6:08Można sobie tę strukturę różnie

6:10ustawiać, ale generalnie to co zrobiliśmy teraz służy nam do tego, abyśmy mogli

6:16lepiej track'ować to, co dzieje się na naszej stronie.

6:19Sprawdzać jak wyglądają ścieżki

6:21użytkowników, ścieżki zakupowe, w które linki klikają.

6:24Będziemy mogli też zdefiniować na tej

6:26podstawie rozmaite cele no i oczywiście w analityce

6:28możemy zrobić dużo dużo więcej,

6:30natomiast taką podstawą jest właśnie

6:33wysyłanie tych zdarzeń śledzenia i chciałem Ci tę podstawę pokazać tak, abyś

6:37mógł te zdarzenia sobie teraz skonfigurować.

6:39Jeżeli jednak masz apetyt na więcej z Google

6:41Analytics i chcesz dowiedzieć się jak optymalnie ustawić to narzędzie również

6:45z Twoimi witrynami w Webflow, zachęcam Cię do przerobienia kursu Google Analytics na eduweb.pl.

6:50Na teraz to tyle. Integracja z Google

6:52Analytics jest poprawna i umiemy też śledzić pojedyncze zdarzenia.

6:56Zatem zapraszam Cię do kolejnej lekcji, w której omówimy inne integracje.

6:59Do usłyszenia.