Инструкция по мультивариантному тестированию 

Что это и для чего?

–Что это такое? Если простым языком - на 1 прокле вы тестируете разные варианты одного или нескольких элементов. Самый простой вариант - тестирование колеса/дверей/коробок/классической формы. Чтобы не делать 5 разных прокл, мы устанавливаем такой код, записываем себе в сабы результаты и видим сколько человек сконвертило у нас на дверях/коробках/идт и выбираем лучший вариант.

–Что тестировать? Тут только ваша фантазия(свои варианты я проговорил на докладе в вопрос-ответ). Советую начать с теста заголовка, либо другого текстового фрагмента, а потом уже усложнять варианты. Так же не ставьте больше 3ех фрагментов одновременно, а лучше двух, потому что с добавлением каждого варианты растут в геометрической прогрессии. Помним и не забываем, чтобы не было тестов ради тестов!

К техничке

1) Отправляем все данные

Первым делом вставляем этот скрипт в ваш index.php внизу перед закрытием </body>

	<script src="script.js"> </script>


	<script>
		$(document).ready(() => {
			setTimeout(() => {
				let subid = "{subid}",
					utm_header_gg1 = res_random;
				console.log(subid, utm_header_gg1);
				$.ajax({
					url: 'mvt.php',
					type: 'post',
					data: {
						subid: subid,
						НАЗВАНИЕ ЧТО ТЕСТИРУЕТЕ-КАРТИНКА/ЗАГОЛОВОК/АКЦИЯ: utm_header_gg1,
					},
					success: response => console.log(response)
				});
			}, 5000);
		});
	</script>

Тут вы прописываете скрипт отработки файла, который надо вставить

2) Логика скрытия элементов на странице

далее мы создаем фал script.js и вставляем туда следующий код

function getRandomElement(arr) {
let randomIndex = Math.floor(Math.random() * arr.length);
return arr[randomIndex];
}
let flag_timer = false,
obj_random = [
"ВАША-ПЕРЕМЕННАЯ-1",
"ВАША-ПЕРЕМЕННАЯ-2",
"ВАША-ПЕРЕМЕННАЯ-3"
],
res_random = getRandomElement(obj_random);
console.log('res_random -- ' + res_random);
if (res_random == 'ВАША-ПЕРЕМЕННАЯ-1') {
$('.НАЗВАНИЕ КЛАССА2, .НАЗВАНИЕ КЛАССА3').addClass('invisible');
$('.line').hide();
}
if (res_random == 'ВАША-ПЕРЕМЕННАЯ-2') {
$('.НАЗВАНИЕ КЛАССА3, .НАЗВАНИЕ КЛАССА1').addClass('invisible');
$('.line').hide();
}
if (res_random == 'ВАША-ПЕРЕМЕННАЯ-3') {
$('.НАЗВАНИЕ КЛАССА2, .НАЗВАНИЕ КЛАССА1').addClass('invisible');
$('.line').hide();
}

Тут прописан скрипт, по которому он выбирает рандомно один вариант контента, а другие скрывает.

3) Отправка параметров в Кейтаро

Далее мы переходим к созданию 3его файла, который отвечает за отбитие этих параметров в кейтаро. Создаем файл mvt.php

<?php
function updateParams($params) {
  $subid = $_POST['subid'];
    if (!empty($subid)) {
      $result = file_get_contents('http://ваш-адрес-кейтаро/?_update_tokens=1&sub_id=' . urlencode($subid) . '&' . http_build_query($params));
    }
}

$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https://' : 'http://';
$event_source_url = $protocol . $_SERVER['HTTP_HOST'];

updateParams(array(
  'sub_id_19' => $_POST['НАЗВАНИЕ ЧТО ТЕСТИРУЕТЕ-КАРТИНКА/ЗАГОЛОВОК/АКЦИЯ'],
  'sub_id_22' => $event_source_url,
));
?>

4) Стили для скрытия элементов

И последнее - мы добавляем 2 строчки кода в файл style.css (где хранятся все наши стили), которые скрывают наши не нужные блоки

.invisible {
  display: none;
}

Вот и все, вы молодцы!
Делаем тесты и проверяем как работает!

Спасибо за прочтение, надеюсь было полезно и интересно!

Тестим, заливаем в плюс! Подписывайся на мой блог в TG @work_life_job
@work_life_job
@work_life_job