Я строю плагин A / B-тестирование целевой страницы для WordPress.
Он добавляет новый пользовательский тип сообщения под названием landingpage
в WordPress.
На целевой странице администратора для создания / редактирования у меня есть 5 основных разделов для функциональности A / B-тестирования:
Варианты страницы тестирования А / Б
Это различное содержимое страницы для каждой версии в тесте A / B. Каждый вариант состоит из основного текста / html и нового заголовка страницы.
Когда посетитель впервые просматривает целевую страницу. Для них выбрана случайная вариация. Этот вариант затем сохраняется в Cookie, так что этот пользователь всегда должен видеть эту версию страницы при просмотре данной целевой страницы.
Правила конвертации тестов A / B
Это набор правил, определенных в панели администратора для страницы. Они определяют, что будет запускать / считать преобразование на этой странице и запишет конверсию для А / Б тестовой вариации, которая подается посетителю по завершении конверсии.
В админ-панели вот как выглядит этот набор правил. Обратите внимание, что на странице может быть любое количество правил, которые будут запускать преобразование на этой странице при соблюдении правила.
В настоящее время существует 3 типа правил конвертации:
DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/
Здесь мне нужна помощь. Когда пользователь заходит на страницу, которая имеет Правила конвертации в базе данных для этой страницы. Мне нужно сгенерировать JavaScript на этой странице, который будет запускать конвертацию на основе правил, определенных для этой страницы.
Если есть 2 правила для страницы ….
1) Связь с атрибутом класса = cta-link-1
нажимается на
2) Форма с именем атрибута = form1
представлен
Тогда мне нужен JavaScript для кнопок соответствия событий Click с CSS class = cta-link-1
и отправить событие для формы с именем = form1
сделать запись AJAX на сервер, записывающую преобразование, когда происходит одно из двух действий.
Важно, чтобы публикация формы и переходы по ссылкам продолжали выполнять исходное действие после преобразования AJAX.
Моя первая попытка / демо
Эта демонстрация прикрепляет обработчик события click к ссылкам с классом CSS = cta-link-1
ON нажмите на нее:
— проверяет наличие флаговой переменной
— если флаг не установлен, он делает запись AJAX, чтобы сохранить конверсию для страницы.
— затем он устанавливает переменную flag в true, чтобы при следующем щелчке он пропускал часть сохранения AJAX.
— затем он снова запускает щелчок по ссылке, на этот раз флаг var виден и обходит часть AJAX. Это должно открыть ссылку сейчас, однако моя демоверсия не открывает ссылку. Если вы просмотрите консоль и нажмете на мою демонстрационную ссылку, вы увидите, что она выполняет запись ajax, а затем снова щелкните ссылку с действием триггера, а затем ничего не происходит!
// version 1 for click event on class .cta-link-1
$('.cta-link-1').on('click', function (e, options)
{
options = options || {};
/* if options.record_ab_test_conversion_done flag not yet set to true, make AJAX post to record a conversion */
if(!options.record_ab_test_conversion_done)
{
e.preventDefault();
console.log('%c [1-Link Clicked] - Make AJAX post to save conversion', 'background: #222; color: #bada55');
var pageData = {
pageId: '123456789',
abTestVariation: '2'
};
$.ajax({
url : 'https://posttestserver.com/post.php?dir=jason',
type: 'POST',
data : pageData,
//dataType : 'json',
success: function(data, textStatus, jqXHR)
{
//data - response from server
console.log(data);
// retrigger the click event with record_ab_test_conversion_done set to true so that this code will
// run again but next time will bypass the AJAX conversion saving part
$(e.currentTarget).trigger('click', {
'record_ab_test_conversion_done': true
});
},
error: function (jqXHR, textStatus, errorThrown)
{
}
});
/* if options.record_ab_test_conversion_done flag is set to true, carry on with with default action */
}else{
/* allow default behavior to happen */
console.log('%c [2-Link Clicked] - Triggered from AJAX success so this click should not record a conversion and should instead open the link as normal!', 'background: #222; color: #bada55');
return true;
}
});
DEMO: https://jsfiddle.net/jasondavis/88wx3hjz/9/
Поэтому мне нужна помощь с тем, чтобы моя демоверсия работала на 100%
Прямо сейчас клик делает пост AJAX и повторно запускает клик, который пропускает пост AJAX при втором клике. По какой-то причине этот 2-й щелчок не следует и открывает ссылку.
Попробуйте следующее:
$('.cta-link-1').on('click', function (e, options)
{ var el = $(this);
...success: function(data, textStatus, jqXHR)
{
if (el.is('a')) {//links
window.location = el.attr('href');//redirect to the intended url
} else {//forms
el.closest('form').submit();//submit that form
}
},
Других решений пока нет …