Wyskakujące okienko na WordPressie przy opuszczaniu strony
Tematem dzisiejszego wpisu będzie jak w tytule wyskakujące okienko (tzw. exit popup), które pojawi się na naszej stronie tylko wtedy kiedy użytkownik będzie chciał ją opuścić i tylko jeden raz. Jest to bardzo popularne zastosowanie, które najczęściej wykorzystuje się do:
- tzw. 'przetrzymania’ użytkownika na stronie,
- zachęcenia użytkownika do przeczytania ważnego wpisu lub kupienia czegoś w naszym sklepie,
- zaproszenia użytkownika do zapisania się do newslettera,
- wyświetlenia informacji o trwającej promocji.
Wykonamy je na WordPressie. Można je zrobić poprzez zainstalowanie pluginu, ale jak wiemy każda instalacja pluginu wiąże się także z konsekwencjami dla naszego serwisu. Mam w planach napisać oddzielny post o tym czy warto instalować wtyczki do WP, kiedy warto to robić, a kiedy postawić na własne customowe rozwiązanie. Dzisiaj pokrótce powiem, że aby nie zaciągać dodatkowych javascriptów i cssów do naszego motywu (a tym samym nie obciążać dodatkowo naszej witryny) oraz po to aby mieć pełną kontrolę nad naszym rozwiązaniem w postaci wyskakującego okienka zrobimy je customowo. Rozwiązanie można zrobić na wiele sposobów – napisać własny plugin lub własny widget, ale my wykorzystamy najprostszy sposób.
Czego potrzebujemy aby zrobić exit popup na WP?
Osobiście wykorzystam lekką bibliotekę javascriptową o nazwie ouibounce. Bibliotekę można pobrać stąd: https://github.com/carlsednaoui/ouibounce. Kod html oraz style napiszemy już samodzielnie po stronie naszego motywu. Również funkcje inicjującą wyskakujące okienko napiszemy w naszym własnych pliku ze skryptami. Cały proces implementowania exit popupu jest szybki i prosty.
Logujemy się na nasz hosting/serwer i rozpoczynamy pracę ( jeśli nie wiesz gdzie znajdują się pliki Twojej witryny to zapraszam do wpisu gdzie jest to pokazane na screenach). Zacznijmy od wrzucenia biblioteki ouibounce do naszego motywu i podpięcie jej w funkcjach skórki.
Generalnie rzecz biorąc fajnie jest jeśli w katalogach i plikach naszego WordPressa mamy porządek. Dzięki temu kiedyś przy kolejnych modyfikacjach łatwiej jest nam znaleźć potrzebną rzecz. Osobiście wyznaję zasadę, że skrypty naszej witryny powinno trzymać się w katalogu ze skryptami, zdjęcia ze zdjęciami i analogicznie tak samo ze stylami.
U siebie w katalogu motywu WP mam już folder nazwany scripts więc to tam wrzucam naszą bibliotekę javascriptową ouibounce. Po pobraniu plików z wyżej wymienionego konta github i przejrzeniu ich okazuje się że potrzebujemy wykorzystać tylko dwa pliki: z folderu build potrzebujemy pliku ouibounce.min.js a z katalogu test potrzebujemy pliku ouibounce.min.css. Reszta plików i folderów są to np. przykłady podane przez autora biblioteki – one nam potrzebne nie są.
W katalogu swojego motywu WP do katalogu script wrzucam plik ze skryptami ouibounce.min.js a do katalogu ze stylami plik ouibounce.min.css.
Następnie musimy w pliku z funkcjami naszego motywu tj. functions.php podpiąć te pliki, tak aby WordPress nam je ładował.
Podpięcie styli i skryptów biblioteki pod WordPressa
W pliku functions.php naszego motywu dodaje następujący kod (należy pamiętać o odpowiednim usytuowaniu kodu między znacznikami php oraz o podaniu prawidłowej ścieżki do wpisów).
<?php function register_exit_popup() {
wp_enqueue_style('ouibounce.min.css', get_template_directory_uri() . '/styles/ouibounce.min.css', array(), '1', 'all');
wp_enqueue_script('ouibounce.min.js', get_template_directory_uri() . '/scripts/ouibounce.min.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'register_exit_popup'); ?>
Teraz dodaję w stopce mojej witryny kod html, który będzie treścią naszego okienka. Kod html wrzucam do stopki, ponieważ stopka podpinana jest funkcją get_footer() do każdej templatki mojej strony. Dzięki temu okienko pojawiało się będzie na każdej podstronie mojej witryny. W moim przypadku będzie to okienko, w którym będzie informacja oraz przycisk przenoszący do najpopularniejszego wpisu. Treść html:
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-header">
<img src="<?php echo get_template_directory_uri(); ?>/images/twoje-logo.png" alt="Logotyp Twojego serwisu">
</div>
<div class="modal-body">
<h3>Już opuszczasz moją stronę?</h3>
<p>Może masz ochotę przeczytać najpopularniejszy wpis na blogu? </p>
<div class="modal-button"><a href="<?php get_permalink(126); ?>">Przejdź do wpisu</a></div>
</div>
<div class="modal-footer">
<p>Nie, dziękuję.</p>
</div>
</div>
</div>
Dzięki bibliotece wszystko co znajduję się w divie o ID ouibounce-modal będzie naszym wyskakującym okienkiem. Treść możemy dobrać sobie dowolnie. Potrzebujemy jeszcze dopisać trochę stylów, ponieważ wcześniej dołączyliśmy style domyślne od biblioteki. Dzięki temu że w pliku functions.php najpierw podpinam style od biblioteki, a potem moje własne nadpisują mi się one automatycznie.
Nie muszę używać w cssie importantów. Przykładowo moje style wyglądają tak:
/*modal */
#ouibounce-modal {
font-family:'Raleway',sans-serif;
}
#ouibounce-modal .modal-header {
background:#1e2361;
padding: 14px 0 8px 0;
}
#ouibounce-modal .modal {
text-align:center;
height:300px;
}
#ouibounce-modal h3 {
color:#1e2361;
font-size:28px;
}
#ouibounce-modal p {
font-size:15px;
}
.modal-button a {
width: 200px;
background: #1e2361;
height: 45px;
line-height: 45px;
border-radius: 10px;
color: #FFF;
display: block;
margin: 10px auto;
}
.modal-button a {
color:#FFF;
}
.modal-button a:hover {
background:#fb0462;
}
@media screen and (max-width:1000px) {
#ouibounce-modal {
display: none !important;
}
}
Mamy podpiętą bibliotekę, mamy kod html i style więc okienko jest gotowe.
Teraz wywołuję je w naszym pliku ze skryptami i dorobię jeszcze funkcję, aby nasze okienko dało się zamknąć zarówno po kliknięciu poza jego powierzchnię jak i po kliknięciu w przycisk „Nie, dziękuję”. Kod JS:
jQuery(document).ready(function($) {
/* exit popup WordPress */
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
});
$('body, #ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
});
Jeśli chodzi o responsywność wyskakującego okienka to jak widać w powyższym kodzie poniżej 1000 pikseli już okienka nie wyświetlam. Generalnie zadałem sobie pytanie po co mi wyskakujące okienko np. na tablecie skoro nie ma tam myszki więc się ono nie włączy. Dla testów można oczywiście popróbować jak działa ta biblioteka na telefonie czy tablecie.
Wyskakujące okienko WP – efekt końcowy
Dobra robota, bez większej znajomości WP patrząc na ten poradnik dałam radę 🙂
A czy jest możliwość spięcia tego z Freshmailem ? W sensie okienko zrobiłem według tego przykładu i działa, jest okej, natomiast chciałbym w tym okienku mieć zapis na newsletter korzystający z Freshmaila.
Zawartość okienka jest dowolna, tak więc śmiało możesz sobie dać tam inputa i spiąć to z dowolnym systemem mailingowym. Jeśli potrzebujesz pomocy to napisz na: admin@webdevmaster.pl
Udało się, dzięki za pomoc 🙂
Dobra robota. Wytłumaczone krok po kroku, prosty kod i działa. Bez żadnych syfowych wtyczek… Wrzuciłem i polecam
Wytłumaczone ok, ale szczerze powiedziawszy wiem że ma to wpływ na zachowanie użytkownika na stronie, na sprzedaż, przeklik itp. ale NIC tak mnie nie denerwuje jak te wyskakujące okienka na stronach 😀
Też tak uważałem do czasu jak nie zaimplementowałem tego na swoje serwisy z których żyje 😀
Efekt jest naprawdę zadawalający – i pamiętaj to że 50% osób zamknie to okienko i krzyknie pod nosem 'co za shit’ to jedno, a drugie 50% jeszcze się na coś skusi. Czysty marketing.
Strony internetowe XIX wieku – popupy, live chaty, można się przestraszyć jak się na nie wejdzie. Coraz więcej serwisów powstaje dla robienia kasy – liczy się zysk, a nie przekazywanie merytorycznej wiedzy 🙂