Webflow: Integracje i Automatyzacje

0:00W tej lekcji kontynuujemy pracę z integracjami i chciałbym pokazać Ci teraz

0:03jak możesz też zrobić integracje, które nie będą tak proste do skonfigurowania

0:08w samym panelu Webflow. Jeżeli przejdziesz do zakładki "Integracje", lista tych

0:11integracji, które możemy wpiąć automatycznie stale się powiększa.

0:15Na razie mamy tutaj kilka fajnych narzędzi np.

0:17Google Optimize. To jest narzędzie, które

0:19pozwoli Ci wykonać testy A/B na Twojej stronie.

0:21Przykładowo możesz w Webflow zrobić sobie dwie wersje pod stronę Home A

0:26i Home B i będziesz mógł z pomocą Google Optimize dołożyć tutaj taki malutki skrypt,

0:31który pozwoli Ci niektórym użytkownikom wyświetlać stronę w wersji A, a niektórym w

0:36wersji B. Następnie możesz mierzyć z pomocą Google Analytics

0:40skuteczność takich stron

0:41przykładowo śledząc kliknięcia na przyciski, zobaczyć, czy więcej osób

0:46wykonuje akcje pożądane dla Ciebie w wariancie A, czy B.

0:50Google Optimize Ci w tym pomoże. Pomoże serwować właściwą wersję strony użytkownikom,

0:55a także pomoże prezentować wyniki w postaci właśnie danych, które później wykorzystasz

1:00do tego, aby finalnie użyć jednej, czy drugiej wersji.

1:03Zdecydowanie polecam korzystanie z Google Optimize,

1:06ale nie będę go tłumaczył. To jest pewnie

1:07temat na jakieś osobny kurs, który warto by było przygotować.

1:11Google Maps.

1:12Jeżeli będziesz korzystał gdziekolwiek z mapek Google wstawianych z pomocą embed kodu, no

1:17to będziesz mógł to zrobić bezpośrednio w Webflow, ale jeżeli chciałbyś wykorzystać

1:21trochę bardziej zaawansowane narzędzia w zakresie Google Maps,

1:25czyli nie tylko osadzenie mapki, którą można zrobić bez integracji z tym modułem,

1:29to będziesz musiał przekazać tutaj swój klucz API, który otrzymasz po

1:33zarejestrowaniu jako Google Developer i wtedy będziesz mógł np.

1:36korzystać z API Google Maps po to, żeby użytkownicy na Twojej stronie wyszukiwali

1:40jakieś rozmaite miejsca, których lokacja może być serwowana w ramach mapki albo np.

1:45pokazywać jakieś różne rzeczy, które będziesz miał na liście, w

1:48zakładkach, więc tutaj trochę bardziej zaawansowana integracja z Google Maps jest

1:52również możliwa w taki sposób półautomatyczny.

1:55No i w końcu Facebook Pixel. To jest obok Google Analytics

1:58taka rzecz, którą polecam zawsze skonfigurować na Twojej stronie.

2:02Nie będę tego robił, bo jest to naprawdę

2:04proste. W Business menager po prostu wchodzisz w źródła danych.

2:08Zwłaszcza, że to też zmienia się co chwilę

2:10w Facebooku, więc jakbym to pokazał to i tak za chwilę będzie nieaktualne.

2:13Ale w Business manager po prostu

2:15generujesz sobie kod piksela i wklejasz tutaj jego identyfikator.

2:18Dzięki temu wszystkie zdarzenia na Twojej stronie będzie rejestrował też Facebook, co

2:22jest przydatne m.in. do tego, że jak będziesz później uruchamiał np.

2:26reklamy na Facebooku możesz sprawdzać, czy te reklamy rzeczywiście konwertują, czyli

2:30czy ludzie z tych reklam wykonują na stronie akcje, o które Ci chodzi.

2:34Przykładowo spinając sobie taki Facebook

2:36piksel również na stronie podziękowania za rejestrację do

2:40newslettera, czy podziękowania za zakup, będziesz mógł sprawdzić, czy ludzie

2:43przechodząc z Twojej reklamy na Facebooku rzeczywiście przechodzą do końca ścieżki

2:48zakupowej i lądują na stronie podziękowania i

2:51sprawdzić sobie konwersję oraz masę innych rzeczy.

2:53Poniżej znajduje się też opcja "Delay for cookie consent" i rzeczywiście powinno być to

2:58włączone, aby nasza strona spełniała wymogi GDPR, czyli RODO.

3:02Tutaj będziemy opóźniali zbieranie danych do

3:06momentu, kiedy osoba nie zgodzi się na naszą politykę, czyli nie kliknie tego

3:10przycisku na początku, gdzie akceptuje wszystkie zgody na ciasteczka.

3:16No i w końcu to, co jest dla nas

3:17najbardziej interesujące, o czym chciałbym teraz trochę porozmawiać.

3:20Jest to tak zwane API Access.

3:22Mamy tutaj API, które pozwala nam w Webflow dostać się do wszystkich elementów na

3:29naszej stronie, wszystkich rzeczy na naszej stronie, czyli pokazywałem Ci edytora, który

3:33umożliwia w łatwy sposób edytowanie strony. Wpisujemy znak zapytania, edit i ktoś może

3:38w przeglądarce edytować sobie kontent na naszej stronie.

3:41Ale, gdybyś chciał na przykład dostać się

3:43do tego edytora spoza strony, czyli

3:48przykładowo zrobić jakiś panel administracyjny dla Twojego klienta to

3:51mógłbyś to zrobić i wysyłać polecenia z pomocą API.

3:55Jeżeli chcesz dowiedzieć się więcej o tym

3:56jak ogólnie działa API i czym jest, polecam Ci inny materiał na eduweb.pl, który podlinkuję.

4:01Tymczasem tutaj znajdziesz API dotyczące np.

4:05kolekcji, pól, obrazków, błędów, które generuje Webflow,

4:09ale np. jeśli wejdziesz sobie w kolekcje,

4:11to możesz takie kolekcje wylistować, możesz wybrać sobie ich schemat i zobaczyć

4:16w formie json jak wyglądają wszystkie item'y, wszystkie elementy np.

4:20blog posty, które znajdują się w Twoich

4:22kolekcjach i w niektórych przypadkach możesz je nie tylko listować, ale też np.

4:26edytować, czy tworzyć nowe, dodawać nowe posty.

4:28Zwłaszcza będzie to przydatne dla deweloperów, którzy chcą stworzyć

4:31zewnętrzne narzędzia, które umożliwią ich klientom np.

4:34właśnie rozbudowaną pracę z jakimś CMSem, który postawimy sobie samodzielnie.

4:39Więc są tu trochę bardziej zaawansowane

4:41rzeczy, które wykraczają poza ten kurs, aczkolwiek w naszym przypadku może przydać

4:47się zdecydowanie część dokumentacji API, która opisuje Webhooki.

4:51Webhooki też omawiamy w osobnym materiale, który polecam.

4:54Ale Webhooki są częścią API i znajdują się w tej sekcji.

4:59Możesz przeczytać o nich trochę więcej, ale to co w zasadzie jest dla nas interesujące,

5:03to jakie rzeczy odpalają Webhooki. Webhooki to będą takie specjalne linki, które możemy

5:09przekazać do Webflow, po prostu wybierając tutaj polecenie

5:12"Add Webhook" i teraz wybieramy właśnie ten opisany w dokumentacji "trigger",

5:17czyli co ma uruchamiać ten Webhook.

5:21W skrócie, jeżeli coś z tego zostanie wykonane np.

5:24jeżeli formularz zostanie zgłoszony,

5:27to wtedy Webflow wyśle dane tego formularza na konkretny adres URL.

5:33Dzięki temu my będziemy mogli przejąć,

5:35przechwycić takie dane z formularza i w pewien sposób je obsłużyć.

5:39Chciałbym Ci pokazać jak można to zrobić

5:40na przykładzie takiej aplikacji, takiego narzędzia jak "Zapier". Zapier

5:44umożliwia właśnie wygenerowanie, stworzenie tzw.

5:47zapa i wygenerowanie w ramach tego zapa adresu, pod który Webflow może wysyłać nam dane.

5:52Jeżeli wpiszemy tutaj Webhook to, co prawda

5:55niestety dostępne w wersji premium, ale w Zapierze są Webhooki,

5:59jeśli wybierzemy "Webhooks by Zapier" będziemy mogli wybrać opcję

6:03"Catch hook", czyli po prostu złapać dane, które zostaną wysłane na jakiś adres URL.

6:09Skąd my ten adres bierzemy?

6:10Jeśli wybierzemy "Continue" to ten adres

6:12Webhook URL zostanie dla nas automatycznie wygenerowany.

6:16Możemy go skopiować, a następnie wrócić do

6:19Webflow po to, aby wkleić go właśnie w tym miejscu, gdzie mamy Webhook URL.

6:22Wybieram polecenie "Add Webhook".

6:24No i teraz mamy obsłużone zdarzenie "Form submission",

6:27czyli wysłanie formularza, w taki sposób, że będzie wysyłan do Zapiera ten Webhook.

6:32Możemy opublikować naszą stronę,

6:34a następnie wypełnić jakikolwiek formularz. Pokażę Ci jak takie dane są wysyłane, a co

6:40później my będziemy mogli też zrobić to już sobie obsłużymy w Zapierze.

6:43Czyli tak, przechodzimy np.

6:45na bloga i w postach, które dodaliśmy, mamy z prawej

6:50strony możliwość pisania maila, po to żeby zapisać się na listę mailową.

6:55Możemy tutaj użyć dowolnego adresu np.

6:58takiego przykładowego adresu i teraz w

6:59momencie, gdy zapiszemy się na tę listę, to formularz został wysłany,

7:04mógłbym sobie tutaj trochę ładniej ostylować nawet

7:06ten komunikat, który jest wyświetlany przez Webflow.

7:08W każdym razie ten formularz został poprawnie wysłany.

7:11Możemy to też sprawdzić

7:13wewnątrz Webflow w tym panelu, gdzie znajduje się sekcja Forms.

7:17Tutaj na samym dole są "Form submission data", czyli kilka sekund temu zgłosił się taki

7:24adres e-mail, ale poza tym te dane powinny też trafić do Zapiera.

7:28Teraz, jeśli wybiorę polecenie "Continue" i, jeśli dane zostały wcześniej na niego

7:32wysłane, to mamy informację o tym, że są one odnalezione, czyli ktoś wysłał jakiś

7:37Request na ten Webhook i zobacz, że to jest e-mail form2,

7:39tak się akurat nazywa to pole.

7:42Fajnie by było jakoś bardziej sensownie je nazwać. Możemy to zrobić również wewnątrz

7:46Designera kolejno przechodząc na stronę blogpost template.

7:50Trzeba by było przejść do całego form block'a

7:52i właśnie on ma taką nazwę "Form Name: email form 2".

7:55To jest właśnie miejsce, gdzie moglibyśmy

7:58to zmienić, żeby wyświetlać informacje o właściwym formularzu.

8:02Kiedyś bardziej intuicyjne, a tutaj jest ten adres e-mail, który został przekazany.

8:06Więc to co możemy zrobić to, teraz polecenie "Continue",

8:09np. możemy ten adres zapisać do Mailchimpa.

8:13Wybieram integrację z Mailchimpem.

8:15"Add, update subscriber". Chcemy ten adres przekazać

8:18dalej tak, żeby dopisać go do naszej listy mailowej i kolejno wybieramy sobie konto,

8:23na Mailchimpie musimy się tutaj połączyć i zautoryzować,

8:25jeśli jeszcze tego nie robiliśmy wcześniej.

8:28Wybrać odpowiedni "Audience" - ja mam tutaj tylko jeden, taki testowy Audience, czyli po

8:32prostu listę, a następnie jako "Subscriber email", który chcemy dopisać,

8:36korzystamy z danych, które zostały odebrane w Webhooku

8:39i będą to dane, wybierzmy polecenie "Show

8:42all options", ponieważ tutaj musimy znaleźć ten e-mail i właśnie przekazać go w ten sposób.

8:47To są jedyne wymagane dane. Oprócz tego możemy jeszcze podać różne

8:51metadane dotyczące tego użytkownika na liście, ale my ich też nie mamy. Wybieramy po

8:55prostu polecenie Continue i możemy albo to przetestować, albo skipnąć testy,

9:00już to testowałem przed chwilą i działa, w związku z tym

9:03jedyne co trzeba teraz zrobić, to włączyć tego zapa. Wybieram polecenie ON.

9:06W tym momencie już za każdym razem kiedy ktoś na naszej stronie wpisze swój

9:11adres email, zostanie zapisany na listę mailową w Mailchimpie. W ten sposób można

9:16wykorzystać Webhooki do tego, aby wymieniać rozmaite dane. Na razie tych

9:20"Trigger Types" nie mamy zbyt wiele. Mamy "form submission" z informacjami o tych wszystkich polach,

9:25które zostały wypełnione w formularzu gdybyśmy mieli ich więcej.

9:28Informacje o opublikowaniu strony, które mogłyby nam posłużyć np.

9:32do wysłania maila do klienta albo np.

9:34wiadomości na slack, że nowa wersja naszej strony jest opublikowana. Są też takie

9:40triggery specyficzne dla modułu e-commerce, o którym porozmawiamy w osobnym kursie.

9:45Gdybyśmy mieli produkty i zamówienia na

9:46stronie, skorzystali z modułu e-commerce w Webflow, to wtedy każde nowe zamówienie byłoby

9:52wysyłane ewentualnie na jakiś Webhook, który moglibyśmy skonfigurować, a także

9:55jego zmiana, a także zmiana "Inventory", czyli naszego magazynu.

10:00Wtedy moglibyśmy obsłużyć to automatyzacjami,

10:02nie musielibyśmy budować jakiejś osobnej logiki biznesowej.

10:06Moglibyśmy np.

10:07wysyłać maile, wysyłać wiadomości,

10:09potwierdzenia zakupu, potwierdzenia zmiany, informację o dostawie itd.

10:13właśnie z pomocą automatyzacji i spięcia tego w np.

10:18takim kilkukrokowym scenariuszu w Zapierze albo w innym narzędziu.

10:22Także chciałem jedynie naświetlic Ci

10:23możliwości tego, co da się zrobić z triggerami.

10:26Z pomocą API można zrobić jeszcze więcej, ale naturalnie wykracza to poza

10:31ten zakres materiału, który chciałem omówić w tym kursie.

10:33W związku z tym na ten moment chciałbym serdecznie podziękować Ci za uwagę,

10:37ponieważ omówiliśmy wszystkie rzeczy, które chciałem Ci pokazać.