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ść).