Что такое сплит-тестирование A/B?
A/B-тестирование – это рандомизированный эксперимент с двумя вариантами, A и B. Как следует из названия, сравниваются две версии (A и B) одной переменной, которые идентичны, за исключением одного варианта, который может повлиять на поведение пользователя. Версия A может быть используемой в настоящее время версией (контроль), тогда как версия B в некотором отношении изменена (обработка).
Зачем использовать сплит-тестирование A/B?
- A/B-тестирование выясняет, как люди действуют на самом деле, а не просто так, как они думают, что они будут делать, и это все, что вы получаете от фокус-групп, пользовательского тестирования и тестирования юзабилити.
- A/B-тестирование позволяет тестировать варианты радикального редизайна, которые могут стать отличной отправной точкой для большинства целевых страниц и шаблонов сайтов.
- Вы можете протестировать различные макеты шаблонов страниц для всего сайта на динамических страницах, управляемых CMS, с помощью A/B-тестирования.
- Вы не представляете, насколько плохи ваши веб-страницы и шаблоны сайтов, пока не начнете их A/B-тестирование.
- A/B-тестирование позволяет использовать совершенно разные подходы к обмену сообщениями, которые могут привести к стратегическим маркетинговым выводам.
Как это реализовать в React?
React — это продвинутая и самая популярная библиотека javascript на рынке. Внедрение сплит-тестирования может быть сложной задачей для вас, но давайте облегчим вам эту задачу. Просто выполните следующие шаги, чтобы внедрить его в реагирующее приложение.
- Сначала перейдите на https://leananalytics.io и настройте учетную запись.
2. После регистрации нажмите кнопку «Новый A/B-тест» на панели управления вашей учетной записи, чтобы создать новый тест.
3. Теперь заполните форму на следующей странице.
4. Нажмите «Начать этот эксперимент».
5. Откройте терминал и настройте реактивный проект:
npx create-react-app absplittesting cd absplittesting
6. Теперь перейдите в каталог проекта и установите библиотеку сплит-тестирования a/b.
yarn add react-lean-analytics
7. Теперь перейдите в App.js и импортируйте компоненты из библиотеки.
import { Experiment, Variant } from 'react-lean-analytics';
8. Теперь скопируйте приведенный ниже код и вставьте его в визуализацию App.js вместо элемента ‹a›Learn React‹/a› и не забудьте скопировать и вставить свой личный идентификатор теста (доступен в аккаунте Leananalytics в разделе этот тест) в приведенном ниже коде.
<Experiment trackedAction="testing different text variations" id="YOUR TEST ID AVAILABLE IN LEAN ANALYTICS ACCOUNT" > {/*callback is used for capturing data for number of times users clicks on the variant*/} <Variant description={`Learn React`}> {callback =>( <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" onClick={callback} > Learn React </a> )} </Variant> <Variant description={`Know More`}> {callback => ( <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" onClick={callback} > Know More </a> )} </Variant> </Experiment>
Поздравляю. Вы просто настраиваете сплит-тестирование A/B.
9. Теперь просто зайдите в браузер и несколько раз перезагрузите его. Вы увидите разные ссылки случайным образом.
иногда это Learn React
иногда это Знать больше
10. Теперь просто разверните приложение в netlify, firebase или выбранной вами службе, чтобы увидеть результаты (это не работает в среде разработки). Руководство по развертыванию вы можете найти в этой статье https://medium.com/@rohit.malhotra1420/learn-how-to-deploy-your-react-js-application-on-firebase-af6da4ee0444.
11. После развертывания перейдите на https://leananalytics.io/lab/ и посмотрите результаты.
12. Результаты будут представлены в виде a/b, где a — это количество раз, когда пользователи нажимали на вариант, а b — это количество раз, когда вариант отображался пользователям.
13. Привет, Виола, готово.