Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!

Odezwał się do mnie kolega, że gdzieś wyczytał, że na stronie sprzedażowej (landing page, sales page, squeeze page) warto eksperymentować m.in. z wyglądem formularza kontaktowego. Ciężko mu nie przyznać racji, bo czasem nawet zmiana koloru przycisku potrafi znacznie zwiększyć konwersję. W tym zadaniu dobrze sprawdzają się testy A/B, które pozwalają generować różne wersje strony dla różnych odwiedzających (oczywiście testy A/B to nie tylko zmiana koloru przycisku ;-)). Problem kolegi wynikał z tego, że jego motyw, jak i wtyczka do kontaktów takiej opcji nie posiadają…

Mini testy A/B w WordPressie

Jeśli mamy szczęście, to możliwe, że takie testy wspiera bezpośrednio motyw (np. Divi czy Extra od Elegant Themes), lub wykorzystywana wtyczka typu „page builder” (np. Divi Builder), lub też np. wspomniana przez kolegę wtyczka do tworzenia formularzy kontaktowych. Ew. gdyby korzystał z Gutenberga, to jest np. wtyczka A/B Testing for WordPress od CleverNode (jak widać, Gutenberg też ma jakieś zalety, choć i tak na każdej mojej stronie jest wyłączony). Niestety w tym przypadku na każde z powyższych pytanie odpowiedź była negatywna.

Z racji tego, że test A/B miał być dość prosty – formularz zbierający kontakty w dwóch odsłonach, to zaproponowałem, że można na szybko stworzyć krótki kod (shortcode), który będzie losował, który formularz wyświetlić. Wystarczy do pliku functions.php (można też stworzyć wtyczkę) dodać kod w stylu:

function webinsider_wp_test_ab01( $atts ) {
	$random = mt_rand (1,2);

	if ( $random == 1 ) { echo "Tekst A"; }
	elseif ( $random == 2 ) { echo "Tekst B"; }
}
add_shortcode( 'webinsider_wp_test_ab01', 'webinsider_wp_test_ab01' );

A następnie w miejscu, gdzie ma wyświetlać się formularz, wstawiamy krótki kod (shortcode):

[webinsider_wp_test_ab01]

W przypadku kolegi kod trzeba było jeszcze odrobinę zmodyfikować, bo formularz kontaktowy wywoływało się za pomocą generowanych przez wtyczkę własnych krótkich kodów:

function webinsider_wp_test_ab01( $atts ) {
	$random = mt_rand (1,2);

	if ( $random == 1 ) { echo do_shortcode( '[shortcode01]' ); }
	elseif ( $random == 2 ) { echo do_shortcode( '[shortcode02]' ); }
}
add_shortcode( 'webinsider_wp_test_ab01', 'webinsider_wp_test_ab01' );

W miejsce „[shortcode01]” i „[shortcode02]” wystarczy podstawić krótkie kody wygenerowane przez wtyczkę.

Jest to oczywiście wersja podstawowa, którą można rozbudować o dodatkowe opcje, np. tak jak u kolegi – prostą analitykę. A w przypadku większej liczny elementów do testów, można rozważyć zamianę „if/elseif” na „switch/case” (choć to bardziej ze względu na wygląd/czytelność kodu, niż wydajność).

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!

Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!

Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)
Envato Elements - pobieraj co chcesz, ile chcesz