Strony WWW bez Kodowania: Własne skrypty

0:00Cześć!

0:00Witaj w kolejnej lekcji, w której chciałbym pokazać Ci jak możesz dodać

0:04jakieś niestandardowe integracje do swojej strony.

0:06Czyli jak do tej pory korzystaliśmy z takich wbudowanych narzędzi wewnątrz Carrd.

0:11Czyli przykładowo jeśli spinaliśmy Google Analytics to po prostu mieliśmy na to

0:15miejsce i musieliśmy przekazać identyfikator.

0:18Są jednak rzeczy, które nie są tak łatwe

0:21do zrobienia lub też po prostu nie ma jakiegoś miejsca po to, żeby je wpisać.

0:24I taką rzeczą jest np.

0:27Facebook Pixel czy Pixel Google Ads, który

0:29warto wpiąć na naszą stronę, ponieważ będzie on pozwalał nam lepiej targetować

0:35reklamy i lepiej również badać konwersje na tych reklamach.

0:38Czyli będziemy mogli sprawdzić, czy np.

0:40ktoś z Facebook'owej reklamy wykonał jakąś akcję na naszej stronie albo

0:44kupił, czy przeszedł przez ten formularz rejestracji.

0:47I właśnie żeby to zrobić potrzebujemy

0:49wpiąć taki kawałek kodu, który oferowany jest przez np.

0:51dostawcy naszych reklam jak Facebook czy Google Ads.

0:54Ale z drugiej strony wpinanie tego typu kodów jest naprawdę powszechne, bo jeżeli

0:58chcielibyśmy dołączyć jakiekolwiek narzędzie, np.

1:01MailChimp'a czy cokolwiek innego, co wymagałoby integracji z pomocą kodu,

1:05musielibyśmy to zrobić właśnie w ten sposób, który chcę Ci teraz pokazać.

1:09Więc najpierw przejdźmy do Event Managera w Facebooku.

1:12Musisz mieć założone konto Business Manager

1:14i gdy przejdziesz na taką witrynę business.facebook.com, będziesz mógł kliknąć

1:19sobie w menu, a następnie wybrać sekcję Event Manager, gdzieś to tu powinno być.

1:23To ciągle się zmienia, ale generalnie

1:25chodzi o ten menager eventów, menadżer zdarzeń, a następnie dodać sobie nowe Data

1:30Source, czyli nowe źródło danych to źródło danych to będzie Facebook Pixel, nazwiemy go

1:35Slack LP Pixel i tutaj możemy opcjonalnie podać adres naszej strony dla szybkiego

1:40Setup'u tego Pixel'a, ale nie będę tego robił.

1:42A następnie przechodzimy do konfiguracji tego Pixel'a i tutaj dostaniemy informację,

1:45że możemy manualnie dodać kod Pixela do strony.

1:48I to jest właśnie to czego potrzebujemy

1:50i ten kod będzie dla nas dostępny do skopiowania.

1:53Czyli po prostu wybieramy polecenie

1:54Copy to Clipboard i mając ten kod w schowku przechodzimy do Carrd.

1:59I podobnie jak w Carrd i wielu innych Web Builder'ach

2:02mamy możliwość dodania takiego czegoś w tej sekcji

2:05Ad Elements jak Embed. Embed to będzie taki również custom'owy kod, który możemy tutaj

2:11dodać lub coś co możemy dołączyć z zewnątrz.

2:13Pokazywałem Ci już Google Maps,

2:14pokazywałem Ci, że ewentualnie też można zrobić to np.

2:17dla video z Youtube czy z Vimeo.

2:20Natomiast poza tą opcją Embed w postaci iFRAME

2:23możemy tutaj po prostu wrzucić dowolny kod i ten dowolny kod

2:27możemy sobie go nazwać oczywiście np.

2:29Facebook Pixel i jego styl możemy ustawić na Hidden.

2:34Inline zostawimy wtedy, kiedy chcemy, żeby

2:36to rzeczywiście się wyświetlało tak jak np.

2:38nasza mapa Google a Hidden jeżeli chcemy, żeby to po prostu był kod, który jest

2:43gdzieś na naszej stronie, ale tego nigdy nigdzie nie widać.

2:46I teraz mamy jeszcze informację o tym, gdzie ten kod powinien się znaleźć

2:50i w przypadku Facebook'a, Facebook'u o tym piszę, gdzie go wkleić.

2:54Jest tutaj dokładna informacja na temat tego, że ten kod powinien się znaleźć w

2:58sekcji Head naszej strony, czyli przed domknięciem znacznika Head.

3:02W związku z tym musimy wybrać sobie sekcję Head.

3:04To w to miejsce chcemy go wkleić i po prostu wklejamy.

3:08Teraz wybieram polecenie Done.

3:09No i jeszcze muszę zapisać zmiany i

3:11opublikować je, czyli wybieram polecenie Publish Site.

3:13I teraz już Facebook Pixel jest na mojej stronie.

3:17Mogę sobie na nią wejść i spróbować teraz przejść do

3:21tej sekcji, tej samej sekcji na Facebooku, żeby zobaczyć, czy jest jakaś aktywność.

3:27Możemy sobie wysłać testowy ruch na naszą stronę.

3:30Wklejam tutaj slack.eduweb.pl

3:32wysyłam ten testowy traffic np. stąd,

3:34ale to by było to samo, gdybyśmy weszli po prostu na tą stronę.

3:37Aczkolwiek teraz jak widzisz Facebook jakby zainicjował to sprawdzanie Pixel'a

3:42jeszcze raz i ten testowy ruch został odebrany poprawnie.

3:45Facebook Pixel jest aktywny. Możemy też doinstalować sobie do

3:49przeglądarki taką wtyczkę, która się nazywa Facebook Pixel Checker.

3:53Przynajmniej na ten moment

3:54jak ja ją mam i ona też pozwala sprawdzić, czy ten Facebook Pixel jest poprawnie

3:58skonfigurowany i poprawnie zainstalowany, a my wybieramy polecenie Continue.

4:02Wygląda na to, że wszystko jest ok.

4:04Natomiast teraz dobrym pomysłem jest

4:07ustawić sobie znowu dla tego Facebook Pixel'a eventy, które chcemy śledzić.

4:12Możemy wybrać Facebook Pixel Setup, Event Setup Tool

4:16i np. wkleić URL naszej strony po to, żeby ją teraz otworzyć.

4:22I to jest trochę inne podejście do tego,

4:24jak możemy automatycznie w tym momencie wskazać te eventy, które nas interesują.

4:28Przykładowo, jeżeli chcemy śledzić

4:30kliknięcia w ten guzik Take the Tour, to możemy wybrać polecenie Track New Button, czyli

4:34śledź nowy guzik, nowy przycisk to nam podświetli w ogóle wszystkie linki, które znajdują

4:38się na naszej stronie, które guzik chcemy śledzić.

4:41No dobra, ten: Take the Tour, więc klikam na niego.

4:43I teraz. Jaki to jest event? Co to w ogóle jest?

4:45Co to? Jak to chcemy oznaczyć?

4:47Jeżeli przykładowo to jest jakaś inicjacja wyjścia.

4:52Jeśli przykładowo jest to dodanie czegoś do koszyka, to mielibyśmy event Add to Cart

4:56jeśli jest to zakup finalizacja zakupu mielibyśmy Purchase. To są te

5:00najważniejszy event'y, ale oprócz tego mamy jeszcze masę jakiś różnych event'ów typu

5:04Customize Product, Donate, Find Location, Schedule itd. więc jeżeli coś

5:09nam tutaj pasuje to wybieramy, jeśli nie to ewentualnie możemy zawsze wybrać takie

5:13polecenie View Content i też zostanie to przekazane z odpowiednimi parametrami z

5:16odpowiednią nazwą, że to będzie Button text is take the tour, więc też

5:21będziemy widzieć to w kontekście naszego Pixela.

5:24Widzę też, że Facebook automatycznie przygotował dla mnie taki events jako

5:29sugestię, czyli Event Lead i on jest już podpięty do tego guzika Sign Up for Free,

5:34więc Facebook całkiem nieźle wykrył, że to będzie moje zbieranie lead'ów.

5:38Mogę tylko wybrać polecenie Review, no i jeżeli

5:41to jest dla mnie ok, że tutaj jeżeli ktoś kliknie w ten guzik, to powinien się dla

5:44mnie zapisywać nowy lead to wybieram polecenie Confirm.

5:47Mogę też zrobić to w ten sposób, że wejść

5:49sobie na tą stronę podziękowania, bo w tym momencie może to

5:53działać nie do końca dobrze wtedy kiedy ktoś kliknie, ale np.

5:56na jakieś błędy w formularzu taki lead też by

5:59się zliczał, więc bardziej sensowne jest track'owanie w tym przypadku URL'a.

6:03A gdybyśmy sobie teraz weszli na tą stronę

6:06z hash'em wybierzmy tutaj Thank you Section, wpiszę to z palca, skopiuje to w całości.

6:13Jesteśmy na tej stronie z podziękowaniem.

6:14To teraz możemy wejść jeszcze raz, ok.

6:17Możemy wybrać sobie właśnie ten URL, jeśli

6:19on zawiera coś takiego, albo w ogóle jeżeli jest równy.

6:22Ale możemy zrobić zawiera, bo czasem

6:24możemy jeszcze tutaj chcieć przekazać sobie jakieś dodatkowe parametry itd.

6:27Więc jeśli on zawiera taki kawałek adresu, to możemy wtedy wybrać dla niego event i

6:33to będzie dla nas zdecydowanie bardziej sensowne.

6:36Żeby zrobić tutaj po prostu lead, wybrać polecenie Confirm.

6:39No i teraz mamy skonfigurowane poprawnie

6:42również zdarzenia. Ten Load Button text po prostu wyrzucę.

6:47Wybieram polecenie Delete i mój lead

6:51bazuje na tym, że wejdziesz na tą stronę z podziękowaniem.

6:53Wtedy oznaczymy się to jako konwersja lead'u,

6:55zdobycie nowego lead'a, a jeśli ktoś kliknie Button take the tour to wtedy uruchomi się

7:01view content. No i teraz możemy wejść do tej sekcji Finish Set up. Finish

7:05zawsze możemy wrócić do tego narzędzia,

7:07ale mamy dwie rzeczy ważne zrobione w tym momencie.

7:10Po pierwsze, nauczyłem Cię stawiać na

7:12naszą stronę jakiś kod, czyli może to być dowolny kod dowolnego narzędzia

7:17I bardzo często te narzędzia, które teraz

7:19integrują się z różnymi naszymi stronami, potrzebują tego, żeby ten kod wstrzyknąć.

7:23Gdzie to robimy?

7:24No właśnie tutaj w sekcji Embed dodajemy sobie Embed Style Hidden i wstawiamy to tam,

7:29gdzie to narzędzie chcę żeby ten kod został wstawiony.

7:32Z resztą możemy sobie taką sekcję Embed gdzieś przenieść w ogóle na sam dół strony,

7:36ponieważ jako że ona jest Hidden, no to może spokojnie występować tutaj Footerze

7:40nawet może być w Footerze on jest doklejony do każdej strony.

7:43I co ciekawe, gdyby rzeczywiście była w

7:46Footerze, to będziemy mieli pewność, że jest też na każdej tej podstronie, którą

7:50zrobiliśmy, a jest dołączona zawsze w tym miejscu, w którym trzeba.

7:53Czyli nawet jak umieścimy to na dole, to będzie to jakby na górze w strukturze

7:57kodu, ponieważ będzie w sekcji Head dokumentu.

8:00To wszystko. Wybieram polecenie Done.

8:02Więc zrobiliśmy to dołączenie custom'owego kodu,

8:05a ponadto skonfigurowaliśmy Pixel Facebook'a i jeszcze skonfigurowaliśmy dla niego

8:09śledzenie zdarzeń, które oczywiście możesz rozszerzyć o wiele innych rzeczy, takich

8:13jak oglądanie wideo, scrrolowanie strony czy cokolwiek innego, co

8:17chcesz tutaj, po czym chcesz mieć ślad i co chcesz

8:21track'ować czy w Analytics'ie, czy w Facebook'u.

8:24To wszystko na teraz.

8:25Dziękuję Ci za uwagę i do usłyszenia.