Перейти к содержимому
  • Как провести A/B тестирование сайта в Adobe Muse

    Евгений Зубов Евгений Зубов,

    Так сложилось что большинство пользователей Adobe Muse во всем мире предпочитают использовать эту простую программу для создания landing page и сайтов которые состоят всего из одной страницы. Такие проекты чаще всего призваны заставить посетителя совершить какое либо действие. Например, подписаться на рассылку, заказать товар, оставить заявку и т.д.
     
    Но на самом деле мало освоить Muse и сделать действительно красивый сайт. Нужно постоянно работать над свеже-созданным проектом улучшая его полезные показатели. Например, изменив цвет кнопки, или расположение формы для подписки можно увеличить количество людей совершивших нужное вам действий на 3-4%. Для того что бы понять, как должен выглядеть ваш сайт чтобы приносить максимум пользы, человечество придумало  A/B тестирование. Его суть в том, что вы как основатель сайта создаете (например) два варианта одной страницы:

    • В первом варианте, кнопка отправки заявки красного цвета.
    • Во втором варианте, кнопка отправки заявки зеленого цвета.

    Чтобы понять по кнопке какого цвета посетители кликают охотнее, нужно разделить весь поток посетителей на две части.

    1. Первая половина посетителей видят только красную кнопку.
    2. Вторая половина посетителей видит только зеленую кнопку.

    Теперь достаточно сравнить статистические данные и узнать результаты какой цвет кнопок лучше использовать. К примеру результаты тестирования показали, что зеленый цвет кнопки дает больше отправленных заявок. Теперь, самое главное, мы продолжаем тестировать сайт дальше, в этот раз берем за основу сайт с зеленой кнопкой, но меняем на сайте что то еще и снова проводим А/В тест. Таким образом можно довести конверсию сайта до 20-30%!
     
    Как провести сплит тестирование сайта сделанного в Adobe Muse:

    1. Подготовка сайта.
    2. Создание эксперимента в Google Analytics.
    3. Подключение эксперимента к сайту.
    4. Проверка работоспособности.

    Подготовка Adobe Muse сайта для проведения сплит тестирования:
    В качестве примера возьмем ситуацию, когда я хочу узнать какого цвета должна быть кнопка отправки заявки что бы наибольшее количество посетителей воспользовались ею. Я решил для себя что буду пробовать кнопку красного и зеленого цвета.

    Для проведения теста мне нужно создать два варианта одной страницы в Adobe Muse. В первом варианте (исходная страница) кнопка будет красного цвета, во втором варианте (вариант 1) зеленого цвета. Кроме этих двух страниц, должна быть третья страница, которая является гарантом выполнения посетителем нужного мне действия. Обычно это страница на которую перекидывает посетителя после щелчка по кнопке. Таким образом перед началом А/В теста мне нужно три страницы:

    1. Исходная страница, в которой кнопка для отправки заявки красного цвета. Файл этой страницы назову index.html.
       
    2. Вариант 1, это страница в которую я внес изменения которые хочу протестировать. В моем случае это точная копия исходной страницы, за исключением цвета кнопки для отправки заявки. На этой странице кнопка будет зеленого цвета. Файл этой страницы назову variant1.html.
       
    3. Контрольная страница, то есть страница на которую переходит посетитель щелкнувший кнопку отправки заявки. Файл этой страницы назову spasibo.html.
       

      Название файлов я задаю в свойствах каждой страницы, прямо в программе Adobe Muse:
       
      post-1-0-75375500-1394887333.png

    Настройка эксперимента в Google Analytics:

    Теперь когда я подготовил свой сайт для проведение тестирования, нужно обратится к сервису Google Analytics который позволяет проводить сплит тестирование любого сайта. Задача сервиса в том, чтобы собирать статистику и распределять трафик между разными вариантами страницы.

    1. Установите статистику Google Analytics на свой Adobe Muse сайт.
    2. Находясь на главной странице, выберите сайт для которого нужно провести тестирование.
    3. Выберите пункт Эксперименты в меню Поведение:

      Размещенное изображение
       
      Далее кнопка Создать эксперимент:

      Размещенное изображение
       
      На этой странице нужно задать параметры эксперимента. В моем примере правильные настройки первого шага будут такие:

      Размещенное изображение

      Разберем настройки эксперимента:
      Название эксперимента - удобное и понятное название эксперимента;
      Цель эксперимента - в этой строке нужно создать новую цель, для этого нажмите кнопку Создать новую цель. Процесс создания новой цели можно посмотреть на видео:

      Размещенное изображение

      Процент трафика участвующего в эксперименте - указывает какой количество от числа всех посетителей будут участвовать в тестировании;
       
    4. Создав все настройки в первом этапе жмем кнопку Сохранить изменения и переходим на второй шаг настройки:

      Размещенное изображение

      Заполняем поля следующим образом:
      Исходная страница - в моем примере файл исходной страницы (смотрите начало статьи) называется index.html.
      Вариант 1 - в моем примере файл страницы Вариант 1 называется variant1.html.
       
    5. Жмем кнопку Далее и переходим на последний, третий шаг настройки эксперимента в котором мне нужно скопировать код который Google Analutics сгенерировал для моего сайта. Выделяем весь код и копируем его  буфер обмена:

      Размещенное изображение
       
    6. Подключение эксперимента к сайту сделанному в Adobe Muse:

      На этом этапе мы уже имеем три страницы в проекте Adobe Muse, и имеем настроенный эксперимент в Google Analytics. Осталось соединить эти вещи друг с другом. Для этого проделаем следующие действия:

      1. Заходим в Adobe Muse и находим исходную страницу, то есть страницу файл которой называется index.html.
      2. Кликаем правой кнопкой мыши по миниатюре страницы в в падающем списке выбираем пункт Свойства страницы и во вкладке Метаданные в поле кода для HEAD вставляем ранее скопированный в буфер обмена код:

        Размещенное изображение

         
      3. Жмем кнопку ОК.
      4. Заливаем сайт на хостинг, что бы обновить все файлы с уже добавленным кодом эксперимента.
    7. Проверка работоспособности сплит тестирования:

      Теперь, когда мы настроили сайт, настроили эксперимент в Google Analytics, добавили код эксперимента на свой сайт и обновили файлы сайта на хостинге мы можем проверить работоспособность сплит тестирования. Возвращаемся в Google Analytics где мы находимся на третьем шаге. Жмем на кнопкуСохранить изменения и переходим на последний (четвертый) шаг.

       

      Если вы все сделали правильно то, Google Analytics не выведет никаких ошибок и вы можете начинать сплит тестирование:

       

      Размещенное изображение

    Отзывы пользователей

    Рекомендуемые комментарии

    Спасибо, статья супер-актуальная!! Но у меня, почему-то, не видно изображений, размещенных в статье((

    Исправили проблему. Картинки снова есть.

    Поделиться комментарием


    Ссылка на комментарий
    Поделиться на других сайтах

    Оставлять сообщения могут только участники клуба

    Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения

    Вступить в клуб

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
×