Zwiększ liczbę konwersji na stronie WordPress – Kadence Conversions

Siemaneczko. Dzisiaj pokażę Ci wtyczkę sztos, która może poprawić konwersję, zarówno zapisy na newsletter, jak i zwiększyć sprzedaż w Twoim WooCommerce. Partnerem kanału jest Smarthost – polski hosting dla WordPressa z doskonałym wsparciem.

Kadence Conversions

Jest to wtyczka Kadence Conversions. No i też ten film być może widzą klienci, którzy kupili Kadence Pro u mnie na sklepie, bo ta wtyczka jest w zestawie, albo można kupić ją osobno. Więc jeśli jesteś klientką albo klientem i przed chwilą kupiłaś wtyczkę i dostałaś maila, to bardzo pozdrawiam. A my lecimy z konkretami i pokazuję Ci, co dzisiaj będziemy tutaj robić – trzy rodzaje triggerów. A, jeszcze ważna rzecz, wszystko, o czym mówię jest w spisie treści, który znajdziesz w opisie. Wszystkie linki oczywiście do produktu, również znajdziesz w opisie. A my lecimy konkretnie.

Mam tutaj bloga i mam dwie kategorie. Jedna kategoria “Beauty”, a druga “Cosmetics”. No i tutaj jak kliknę “Beauty”, to się nic nie dzieje. Po prostu przeglądam sobie wpis blogowy. Natomiast ustawiłem sobie, że pokazuje mi się popup, ale tylko w jednej kategorii. Czyli jeśli jesteśmy na cosmetics, po 5 sekundach wyskoczy mi tutaj właśnie takie okienko. No i tutaj możemy to oczywiście dowolnie zbudować w Gutenbergu, pokażę Ci zaraz. No i tutaj możemy też mierzyć konwersję, jak klikniemy. To jest pierwszy scenariusz, który Ci dzisiaj pokażę.

Drugi, to w momencie, gdy chcemy wyjść ze strony, to nic się nie dzieje. Dojeżdżam tutaj do krzyżyka i nic się nie dzieje. Natomiast ustawiłem sobie, że na jednym z kursów pokaże mi się okienko do zapisu na newsletter i mam teraz dwa kursy. Pierwszy ten i tutaj dalej się nic nie dzieje, ale jak będę na drugim kursie, tym, no to chcę, żeby mi się pokazało okienko do zapisu na newsletter przy wyjściu ze strony, więc chcę już opuścić stronę, nacisnąć krzyżyk. No i teraz mam formularz kontaktowy. To jest również zbudowane w ogóle w Gutenbergu. No i tutaj, co więcej, dzięki Kadence można połączyć to z MailerLite. Czyli można też tutaj dać gotowy blok z MailerLite, natomiast też można zbudować za pomocą Gutenberga i połączyć to API. I tutaj nam się po prostu taki popup pokazuję. Postawiłem jeszcze szybko drugiego WordPressa, który jest sklepem.

Wszystko stawiam na Smarthost, no bo tam za pomocą trzech kliknięć mogę kopiować strony, tworzyć nowe. Pokazywałem to ostatnio w filmie, pokaże Ci się tutaj karta. No i tutaj mam ustawiony taki warunek, że w momencie, gdy jest wspaniała łyżka w koszyku, to pokazuje się komunikat. I teraz np. dodam do koszyka tutaj jakąś deseczkę. No i mam tutaj deseczkę, dodałem do koszyka. Już mi się pokazało. Ok. No i tutaj zobaczmy koszyk wtedy. No i tutaj nic się nie dzieje. Jest koszyk, możemy przejść do płatności.

Spoko, ale wchodzę w sklep, no i chcę taką łyżkę tutaj teraz dodać. Klikam-> “Dodaj do koszyka”. Produkt został dodany -> zobacz koszyk. No i tutaj mam ustawione, że ma się mi pokazywać takie odliczanie. Ono oczywiście może być dużo ładniejsze. Tu może się wszystko pokazać, znowu zbudowane w Gutenbergu. Ale ta łyżka robi najlepsze ciasta, jeśli masz kurs WPziomka -> “kup teraz”, więc klikam i przechodzę do kursu WPziomka. Ok, mam kurs WPziomka. No i tutaj tak sobie go podlinkowałem. No bo, jeśli chcesz się nauczyć Gutenberg Pro i dostać właśnie Kadence Pro w zestawie, to otrzymujesz go również jako uczestnik mojego kursu. No więc jest kilka opcji, żeby nabyć Kadence Conversions jak widzisz.

Wracamy do sklepu. Mogłoby się to pokazywać w nowej karcie, ale to oczywiście ustawiasz sobie w buttonie, czyli w przycisku. Więc teraz np. usuniemy sobie wszystko z koszyka. Możemy tędy, zobacz jak się ładnie koszyczek pokazuje, w ogóle tutaj w Kadence. Mój koszyk jest pusty. No i teraz jak wejdę jakąś inną rzecz kupię, to oczywiście to nie będzie działało. Można też ustawić w ogóle warunki kwotowe. Czyli jeśli w koszyku jest kwota jakaś, no to pokazuje się coś. No dobra, to teraz czas, żebym Ci pokazał, jak to zrobić. Tutaj przeszedłem teraz do strony tej pierwszej, którą Ci pokazywałem, gdzie nie ma sklepu. Klikamy -> tu, no i tutaj mam wszystkie te rzeczy, które mają się zadziać, “Items” tak zwane. Więc żeby nam się nie myliło, to ja to wyłączę.

Wtyczka do budowania popup

No i chcemy sobie zbudować np. popup przy exit. Klikamy -> “Dodaj nowy”. No i tutaj mamy do wyboru który typ konwersji będziemy używać. Pozwól, że ja będę korzystał z gotowych rozwiązań. Ok. No i tutaj zobacz, tu jest Gutenberg. To wszystko jest stworzone za pomocą bloków, więc dowolna rzecz może się pokazać, to jest wspaniałe. Tutaj mamy listę znaną z Gutenberga, więc wszystko fajnie i wygodnie. Montujemy sobie w Guciu, nie potrzebujemy żadnych dodatkowych odwołań, bo wszystko to są odwołania do Gutenberga, a więc jak domyślasz się lub nie, ma to wpływ na szybkość strony. Więc ja sobie opiszę tutaj “pop- up ciasto”. Ok, sprawdźmy możliwości tego popupa.

Na początku, formularz e-mail. Tylko Ci go pobieżnie omówię. Więcej mówię o tym właśnie w kursie Gutenberg Pro. Z tego względu, że tam wszystko omawiamy dosyć dokładnie. Kurs ma już 40 lekcji na ten moment, a jeszcze dużo do nagrania. W poniedziałki, w czwartki pojawiają się nowe.

Możliwości Kadence Conversions

I tutaj mamy bardzo dużo opcji, m.in. możemy przekierować użytkownika na inną stronę po wypełnieniu, możemy to zintegrować z MailerLite poprzez API, oraz możemy skorzystać z wtyczki FluentCRM . Bardzo fajna wtyczka do automatyzacji. Jest jeszcze kilka fajnych, ciekawych opcji, które dostajesz w Kadence Pro. No i tutaj np. mamy WebHooki, czyli możemy to integrować z wszystkimi zewnętrznymi narzędziami do automatyzacji, takimi jak na przykład Zapier. Morze możliwości, jeśli chodzi o formularze, ale nie skupiamy się tutaj na formularzach, tylko na tym, żeby popup się pokazał w odpowiednim miejscu.

Żeby edytować, gdzie ma się pokazywać i w ogóle jak ma się pokazywać, klikamy gdziekolwiek obok. No i teraz nam się zmieniają tutaj możliwości. No i teraz mamy triggers, czyli wyzwalacz. Musi ileś czasu upłynąć – to było na blogu ustawione. Jak klikniemy, ile ma czasu upłynąć, to tutaj jest właśnie 5000 milisekund, czyli to jest 5 sekund po prostu. Kolejnym wyzwalaczem jest właśnie exit popup, czyli gdy chcemy wyjść ze strony.

Kolejny wyzwalacz, bardzo fajna, ciekawa rzecz, że przewijamy przez ileś pikseli i w tym momencie nam pokazuje się dopiero dana rzecz, gdy zescrolujemy na dół np. o 300 pikseli. Na końcu całego contentu możemy oczywiście dodać On Load, czyli po załadowaniu strony.

No i Custom Link, możemy też zrobić taki modal, że klikniemy i wtedy nam się pokazuje popup. Pokazywałem to w jednym z filmów o Lottie Animation i tam też po kliknięciu pokazywał się popup. Film znajdziesz na moim kanale, jak wpiszesz: “Jak dodać animację do strony” albo “Lottie Animation”. Więc ja bym chciał, żeby ten popup pokazywał się np. po paru sekundach na danej stronie. No i teraz możemy zmienić typ konwersji, ale my chcemy zostać przy popupie. Włączamy śledzenie tych konwersji.

Kolejnym ustawieniem jest Convention Goal, czyli jaki mamy cel konwersji. Jeśli ktoś kliknie w button, no to mamy zamkniętą konwersję. Zakładamy tak, że to jest nasza akurat konwersja. Możemy też dodać classę, ale nie będę Ci tutaj mieszał i teraz jeszcze bardziej tego rozbudowywał, bo naprawdę tutaj jest dużo opcji.

I właśnie są też opcje, jeśli chodzi o cookies, bo jeśli zamknie ktoś, to może np. przez 30 dni nie widzieć tego po popupu, a jeśli osiągnie cel, to może nie widzieć tego przez 90 dni. Ja to odznaczę, bo chcę, żeby mi się cały czas pokazywał, no bo to jest tutorial, więc bym chciał, żeby było go widać od razu.

Wygląd popup-a

Teraz pozycja, gdzie on się ma pokazać. Z prawej, z lewej albo na środku. Więc ja chcę, żeby on był na środku. U góry, na środku albo na dole. Znowu chcę, żeby był na środku. Jeśli chodzi o size, maksymalny rozmiar, jaki ma czy to na desktopie, czy to na np. mobile, bo widzimy, że na mobile będzie wyglądał w ten sposób, więc np. można by było go troszkę dopracować. Myślę, że się ze mną zgodzisz, ale tutaj akurat pokazujemy tylko desktop. Te ustawienia dotyczą overlaya, czyli tego, co się dzieje za popupem, jaka jest przezroczystość, jaki ma kolor. Więc ja tutaj to tak zostawię. Oczywiście może być jakiś image, ale niepotrzebnie.

Gdzie wyświetla się popup

I teraz na jakich to ma się stronach pokazywać? I tutaj mamy dużo możliwości. Możemy wybrać na przykład na pojedynczych stronach albo na pojedynczych wpisach. Oczywiście możemy kilka warunków mieć, czyli na przykład, że się pokazuje na stronie: blog i jeszcze gdzieś. Ja bym chciał, żeby pokazywało się to np. na pojedynczych wpisach i teraz możesz ustawić, czy na konkretnej kategorii to się ustawia, czy nie. Czy to są wpisy konkretnego autora, czy konkretnej grupy, możesz grupować po tagach, po kategorii właśnie. Ja bym chciał, żeby mi się pokazywało to na konkretnych podstronach, więc klikam np. “Hair studio” i “Love your skin” -> “Select”. No i teraz mam dwie zaznaczone, spoko.

Możemy tutaj na przykład zaznaczyć, że na wszystkich stronach ma się to pokazywać, ale nie ma się pokazywać na jakichś konkretnych. No i teraz dla kogo to jest widoczne? Dla użytkowników zalogowanych, niezalogowanych, a jak są zalogowani, to mogą mieć np. specjalną rolę. Czyli w moim przypadku mogę pokazać popup, który jest widoczny tylko dla kursantów i np. po zalogowaniu do platformy kursowej pokaże im się promocja, która jest dostępna tylko dla nich. Na jakich urządzeniach ma się pokazywać? Jeśli nie chce nam się tutaj zmieniać tego rozmiaru albo mamy inną koncepcję na mobile, bo na mobile inaczej nasi użytkownicy się zachowują, to chcemy, żeby tylko na desktopie było. Albo jak skasujemy, to wszędzie się pokazuje.

Kolejna rzecz z tych bardziej zaawansowanych, możemy pokazywać tylko na przykład osobom, które przyjdą z Facebooka, tylko nie zawsze to jest do odczytania możliwe. Tu jest informacja. Możemy tutaj wpisać jakiś ciąg znaków, który ma być w adresie, w momencie, gdy się ten popup pokazuje, a możemy również za pomocą konkretnego ciasteczka pokazywać ten popup, więc jest dużo, naprawdę dużo możliwości.

No i co więcej, możemy pokazywać po iluś obejrzeniach strony, czyli nie tak od razu, ale jeśli ktoś jest zainteresowany, no to wtedy może zobaczyć ten popup, więc naprawdę ciekawa opcja. Kolejną ciekawą opcją jest dodanie kalendarza w sensie, nie kalendarza do strony, ale uzupełnienie dat, w których ma się to po prostu pokazywać, co do godziny. I jeśli mamy np. promocję, jakąś kampanię reklamową i chcemy, żeby się pokazywało od piątku, może od piątku, to niekoniecznie, ale od poniedziałku od godziny 12:00 do piątku 22:00 czy do wtorku, obojętnie, zaznaczamy po prostu, kiedy ma się zacząć, kiedy ma się skończyć. Co więcej, możemy to cyklicznie powtarzać w konkretne dni tygodnia między konkretnymi godzinami. Czyli np. mamy promocje w jakimś barze z hamburgerami i od 10:00 do 14:00 mamy zniżkę dla studentów i ktoś sobie scroluje stronę, chce zamówić przez stronę, no i klika sobie, bo widzi, że mu popup wyskoczył, że ma właśnie zniżkę. Animacje, bardzo dużo animacji. Przetestuj sobie, zobacz jak to wygląda.

Zamknięcie okna popup-u

No i teraz, jak ma wyglądać zamknięcie tego popupu. Może być zamknięcie, jeśli klikniemy poza oknem, możemy mieć krzyżyk, a nie musimy, co ciekawe, ale myślę, że powinien być, bo to by było wkurzające. No i tutaj gdzie jest ten krzyżyk. Czy w środku, czy na zewnątrz, czy ma być w ogóle w rogu całego ekranu. Jest bardzo dużo tutaj opcji, nawet samego tego krzyżyka. Co więcej, on może być z tekstem np. możesz napisać coś, czasem ludzie tak piszą: “Nie, nie chcę mieć wspaniałej, darmowej wiedzy, która przyniesie mi więcej klientów”. Do tego możesz zmienić rozmiar, ikonki, kolor.

Naprawdę morze możliwości jeśli chodzi o Kadence. Do tego z-indeks, czyli to są warstwy takie w CSS, gdzie, co się, które pierwsze pokazuje. A także możesz dodać dodatkową classe CSS. Więc tutaj mamy naprawdę bardzo dużo opcji. Ja zaznaczyłem w dwóch postach, nie pamiętam w jakich. Ok, już pamiętam. Klikam-> opublikuj i zobaczymy czy zatrybi. Ok, to jedno mam opublikowane, fajnie. Odwiedzam witrynę, sprawdzam czy mój popup działa-> blog. No i teraz tu było coś o fryzurach, nie? A tu jest mydełko na zdjęciu, ale o co tu chodzi?

I po pięciu sekundach będzie popup. No i mamy opacity, tak jak wszystko jest ustawione. I tutaj możemy wpisać dane i po prostu wysłać nasze zgłoszenie np. do newslettera. No i tutaj wszystko się zadziało tak, jak sobie tego życzyliśmy.

Budowanie konwersji

Więc zbudujmy kolejną opcję konwersji. Przejdę od razu tutaj-> Add New. No i kolejną opcją konwersji będzie slide-in. Czyli coś, co się pojawia na dole. Może być to na przykład informacja o ciasteczkach. BTW – ta informacja nie zmienia działania ciasteczek, ale to się dzieje na 90% stron, na które wchodzę, że jest fajnie, cookie, baner i tak dalej, i tak dalej. Tylko, że już Google Analytics wie, że byłem, już piksel Facebooka zarejestrował, że byłem, a ja jeszcze nie wyraziłem zgody. No ale ludzie myślą, że są RODO ready i być może osoby, które się na tym nie znają, a które to sprawdzają, o ile ktoś to sprawdza, no to też tak myślą, że to jest RODO ready, bo wyskakuje okienko. A tak naprawdę oprócz tego, że okienko wyskakuje, to tak naprawdę nie powinny się ładować skrypty, ale to taka anegdotka.

Mi się to bardzo podoba. To jest wspaniałe, tu jest 50% taniej coś. I tutaj mamy znowu wszystko za pomocą bloków zbudowane. I tutaj nie będę już omawiał wszystkich opcji, tylko sobie wpiszę: “50% promka”. No i bym chciał, żeby ona właśnie tutaj się pokazywała na dole, więc mamy podobne ustawienia. Chciałbym, żeby to się pokazywało np. na jakiejś konkretnej podstronie, gdzie mówimy o tym produkcie. Nie chciałem następnej, tylko indywidualnie. No i teraz wyświetlą nam się nie wpisy, tylko strony. No i tutaj już byliśmy dzisiaj na tej stronie. Zaznaczam. Tu oczywiście możemy podlinkować ten button. Klikamy -> tu, no i dajemy jakiś link. Ja dam taki po prostu, żeby było linkiem i tyle. Albo może inaczej. Ja dam taki, żeby móc potem sprawdzić. Mam takie przekierowania sobie zrobione, że jak ktoś wpisze: “Kurs”, to i tak trafi na stronę kurs. No i bym chciał, żeby w nowym oknie się otwierało. Nawet może być video popup, zobacz. Mógłby tu być jakiś np. Twój tutorial albo coś co opowiadasz o danym produkcie, mega temat. “No Follow” chce, żeby Google nie dawał WPziomkowi mojej atencji.

Nie wiem czy dobrze powiedziałem, ale wiesz o co chodzi z “No Follow” w ogóle? Jeśli nie wiesz, to Ci mówię anegdotkę, że nofollow to jest informacja dla Google bota, że ten link jest mniej ważny niż ten dofollow i że nie ma za nim podążać. Ten link jest, ale Ty tam za nim nie podążaj, bo to jest do jakiejś zewnętrznej strony, nie? Ok. Czyli mam tutaj ustawione. Aha, nie mam wyzwalacza przecież, więc wracam tutaj, klikam obok i tu mam wszystkie rzeczy pokazane. No i w momencie gdy przescroluje 300 pikseli niech będzie, fajnie będzie. No i tutaj, ustawię sobie Clik-Button znowu. Ok. No i 50% Promka -> “Opublikuj”. No i teraz tutaj gdzieś to było, że muszę 300 pikseli. Jestem 300 pikseli niżej. Klikam -> “Shop Now” no i tutaj już mi się przełącza, więc konwersja już została zapisana.

Gdzie zapisują się konwersje

No i właśnie, te konwersje, gdzie się zapisują? Już Ci pokazuję. Przechodzę do kokpitu, no i tutaj mam jeszcze jedną rzecz, jak dashboard. No i mamy te wszystkie konwersje, zmierzone. Konwersje można też i powinno się mierzyć, za pomocą Google Tag Manager i zrobić to dobrze w Google Analytics i tym nowym.

Ale tutaj mamy też taką opcję i możemy wszystkie patrzeć w sensie, ile było kliknięć wszystkich 10, bo ja sobie wcześniej klikałem, a mamy ustawione cele przed chwilą, czyli dwie konwersje mieliśmy. No i możemy tutaj w poszczególnych zobaczyć popupach, czyli mamy tutaj nazwę. No i ciasto np. pokazało się raz, ale nikt nie kliknął, nikt nie podjął akcji. A 50% promka raz się pokazała, no i raz kliknięte było, nie? Tu dodatkowo możemy włączyć mierzenie eventów w Google Analytics, natomiast i tak trzeba to skonfigurować w Google Analytics właśnie. I tu już nic interesującego nas nie ma, więc tak to wygląda, jeśli chodzi o dashboard.

Popup na sklep internetowy

Pokażę Ci jeszcze tylko opcję na sklepie internetowym, bo tam jest tego więcej. Więc jesteśmy na moim sklepie. Tutaj mam: smarthost.pl/woocommerce sobie postawiłem taki sklepik szybko. No i teraz mogę robić więcej triggerów, czyli wyzwalaczy związanych z koszykiem i z tym, co w tym koszyku jest. Jeśli mamy woocommerce, to mamy więcej opcji, więc zróbmy tutaj w ten sposób, że pokaże nam się banner. Bannerku jeszcze nie było.

Ok, na przykład taki. Tu jest coś wspaniałego. No i tu możemy oczywiście podlinkować nasz button, ale to wiesz, jak to się robi, nie będę pokazywał. Klikam sobie obok. I tutaj, jeśli chodzi o te wyzwalacze, (ja przed chwilą powiedziałem o triggerach, że możemy różne, ale chodzi o to, kiedy się wyświetla, w jakich okolicznościach koszyka, więc to nie jest tak stricte trigger nazwany tutaj). Ok, niech będzie czasowo po jednej sekundzie, czyli od razu praktycznie się nam wyświetli. Tu jest to samo, to wszystko już znasz. Tutaj mamy dopisaną już od razu classę.

Natomiast to, co jest inaczej, to na pewno tutaj doszła nam jeszcze jedna zakładka i może pokazywać się, kiedy wartość koszyka jest większa niż, mniejsza niż. Jeśli konkretne produkty są w koszyku. Oczywiście mogą dwa występować naraz, albo można usunąć, kiedy konkretne produkty są w koszyku. Czyli mamy np. promocje na nasz kurs, ale ktoś już ma ten kurs w koszyku, więc bez sensu mu to pokazywać. A ma np. kupiony inny kurs, a chcemy ten kurs sprzedawać, więc wtedy możemy mu to pokazać, więc spróbujmy sobie to zrobić tak, że ma być produktów za 100 dolarów, bo tu mam dolary ustawione, czyli pokazuje w momencie, gdy mamy więcej niż.

O jeny, ale dużo mi się tu zrobiło, a chciałem 100. Ok. No i przy specyficznym produkcie, czyli muszę mieć ten produkt w koszyku i ponad 100 dolarów. Dobrze, pamiętam co mam. No i teraz jeszcze jedna ważna rzecz, gdzie ma się to pokazywać, trzeba ustawić. I tutaj nam znowu doszedł woocommerce. Może to już na poziomie produktu, ale my nie chcemy się na poziomie produktu tutaj rozpraszać, tylko już jak będziemy mieli to w koszyku. Więc klikamy na strony, no bo strona koszyka to jest również strona. Nie na wszystkich, tylko na indywidualnie i tylko na stronie koszyka. Jeśli znasz WordPressa, no to wiesz, że każdy widok jest przypisany do jakiejś strony albo do jakiegoś widoku w pliku. Ale zacząłem mieszać, bo pomyślałem sobie np., że widok archiwum kategorii nie jest przypisany do konkretnej strony i nie chciałem Cię wprowadzić w błąd. I myślę, że mamy. Czyli muszę dodać do koszyka za 100 dolarów i ten produkt, chyba będę pamiętał który. Ok.

Czyli muszę się dostać na sklep. Jestem na sklepie. Mam coś w koszyku za 16 dolarów, więc kliknę i zobaczę czy mi się coś pojawia. Nie pojawia się. No ale potrzebuję kupić teraz łyżkę. To była ta chyba: “Handmade” za 24$, więc jak dodam 4, to razem z tamtym to będzie ponad 100 dolarów. Po jednej sekundzie mi się pokazało. No a teraz sprawdźmy czy działa jak jest tylko spełniony jeden warunek, więc będzie za 96 dolarów. Więc teraz mam ten produkt, który nie ma 100 dolarów, ale jest tym produktem, który ma wyzwalacz. Więc tylko mam jeden z dwóch wyzwalaczy. Klikam-> “Odśwież”, żeby jeszcze raz zasymulować wejście do koszyka. No i pomimo że mam ten produkt, który jest zaznaczony, to nie mam 100$ i mi się to nie pokazuje.

Moim zdaniem to jest mega wtyczka i bardzo fajna rzecz. Teraz pokaże Ci się film o Lottie Animation. To jest niby o animacjach, ale też trochę zahacza o Kadence Pro i pokazuje, jak można zrobić właśnie po kliknięciu taki popup, więc obejrzyj sobie ten film. A jeśli masz jakieś pytania, to pisz do mnie śmiało albo na maila, albo w komentarzu, albo gdziekolwiek sobie życzysz.

Wszystkie linki do produktów znajdują się poniżej. No i jeśli dałem Ci wartość, to zmień przycisk z czerwonego na szary i widzimy się w kolejnym filmie. Hejka!