Что такое сплит-тестирование A/B?

A/B-тестирование – это рандомизированный эксперимент с двумя вариантами, A и B. Как следует из названия, сравниваются две версии (A и B) одной переменной, которые идентичны, за исключением одного варианта, который может повлиять на поведение пользователя. Версия A может быть используемой в настоящее время версией (контроль), тогда как версия B в некотором отношении изменена (обработка).

Зачем использовать сплит-тестирование A/B?

  1. A/B-тестирование выясняет, как люди действуют на самом деле, а не просто так, как они думают, что они будут делать, и это все, что вы получаете от фокус-групп, пользовательского тестирования и тестирования юзабилити.
  2. A/B-тестирование позволяет тестировать варианты радикального редизайна, которые могут стать отличной отправной точкой для большинства целевых страниц и шаблонов сайтов.
  3. Вы можете протестировать различные макеты шаблонов страниц для всего сайта на динамических страницах, управляемых CMS, с помощью A/B-тестирования.
  4. Вы не представляете, насколько плохи ваши веб-страницы и шаблоны сайтов, пока не начнете их A/B-тестирование.
  5. A/B-тестирование позволяет использовать совершенно разные подходы к обмену сообщениями, которые могут привести к стратегическим маркетинговым выводам.

Как это реализовать в React?

React — это продвинутая и самая популярная библиотека javascript на рынке. Внедрение сплит-тестирования может быть сложной задачей для вас, но давайте облегчим вам эту задачу. Просто выполните следующие шаги, чтобы внедрить его в реагирующее приложение.

  1. Сначала перейдите на 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. Привет, Виола, готово.