Нужен ли слайдер в интернет-магазине

Слайдер в интернет-магазинеДолгое время я не использовал слайдер в интернет магазине, так как сомневался в его эффективности. Но лучше попробовать, чем сомневаться и вообще ничего не сделать, поэтому я решился. К счастью, в стандартных настойках Bootstrap есть возможность добавления слайдера без лишнего гемороя и дополнительных знаний. За вечер я набросал три слайдера, установил их на главной и забыл на время…

Конечно же, не забыл настроить utm-метки на каждом слайдере, чтобы можно было отследить клики на слайдеры и дальнейшие конверсии.

И что вы думаете? Проверив слайдеры через некоторое время я обнаружил потрясающую эффективность!

Во первых: на слайдеры нажимали, а это уже хорошо. Значит их смотрят и листают.

Во вторых: на один из слайдеров не только нажимали, но и были конверсии. Вот скриншот Google.Analitics

Слайдер в интернет магазине
Слайдер в интернет магазине

Да, это были нажатия на первый слайдер в карусели, на другие нажимали не так часто и там не было конверсий, но какой эффект!

На какие страницы ведут слайдеры

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

Второй слайдер ведет просто на раздел сайта, который нам интересен (переходов нет)

Третий слайдер информирует о подарках при покупке определенных товаров (всего два перехода)

О чем это говорит? Ну во первых, хорошо что слайдер сигнализирует посетителю о том что многие уже сделали покупку в нашем магазине и оставили отзыв. Во вторых, слайдеры с переходами просто на разделы абсолютно не эффективны. Т.е. слайдер должен нести информацию либо о каких-то акциях, либо повышать лояльность посетителя (как в нашем случае), тогда на слайдер не только будут кликать, но и получится определенный эффект.

Переходы с мобильных и с обычных ПК, что эффективней

Также стоит отметить еще одну деталь, все переходы с конверсиями были совершены с мобильных устройств, хотя при настройке слайдера я вообще хотел не показывать слайдер на мобильных устройствх. Скрин ниже

Переход на слайдер с мобильных устройств
Переход на слайдер с мобильных устройств

Мобильную версию сайта я сделал примерно около года назад (40% посетителей с мобильных устройств — срочно делаем адаптивный дизайн) — эффект налицо!

Конечно, имеет смысл поэксперементировать с очередностью слайдеров, но не сейчас. Как говорится: «Не чеши, пока не чешется».

Вывод: Делать окончательный вывод пока рано, так как пока нет нормальной статистики, тем не менее уже однозначно понятно, что слайдер в интернет магазине — эффективная вещь, которую обязательно нужно использовать. А вы со мной согласны?

Понравилась статья, подписывайтесь на блог в форме ниже или нажмите нравится в моей странице на Facebook


 

 

Результаты A/B тестирования

Пришло время подвести итоги A/B-тестирования. Код для простого A/B-теста и сами тестируемые элементы можете почитать в статье: A/B-тестирование своими силами — простой php-код.

Тестировались различные варианты цветов кнопок в различных областях страниц сайта. Разделим кнопки на 2 типа:

1-й тип — кнопки относятся к заказу товара и находятся в основной области видимости карточки товара, названия кнопок «Добавить в корзину»,  «Купить за 1 клик».

A/B-тест заказ товара

2-й тип — кнопка «Заказать звонок», находящаяся в нижней части страниц (карточка товара, статья, страницы о доставке).

A/B-тест заказ звонка

Тестирование проводилось в течении месяца.

В итоге получились очень интересные и вполне объяснимые результаты:

  1. Показатель нажатий на серую и синюю кнопки 1-го типа составил: 52% и 48% соответственно. Т.е., это говорит о том, что если посетитель собирается сделать заказ, то он его сделает и цвет кнопок не будет играть для него большой роли (в данный момент я плотно работаю с дизайнером, он также подтверждает этот факт).
  2. Показатель нажатий на серую и синюю кнопки 2-го типа составил: 25% и 75% соответственно. Это говорит о том, что цвет кнопок в данном случае играет очень важную роль. Т.е. в конце страницы яркая кнопка «зацепляет» внимание посетителя и побуждает его совершить конверсию (нажать на кнопку «Заказать звонок»).

Так, A/B-тест, казалось бы, совсем незначительного элемента, цвета кнопки, показал совершенно различные результаты.

Так получилось, что как раз в момент проведения A/B-теста дизайнер работал над сменой некоторых элементов сайта. В итоге мы изменить на сайте следующее:

1-й тип кнопок мы сделали в разных цветах, тем более это прекрасно вписывалось в общую картину карточки товара. Кнопка «Добавить в корзину» была сделана в оранжевом цвете, копка «Заказать в 1 клик» в сером.

A/B-тест результат

2-й тип кнопок остался в лучшем по тесту (синем) цвете, также, мы немного изменили выделение самого блока размещения кнопки.

A/B-тест результат 2
Вывод: A/B-тестирование действительно приносит результаты и довольно просто реализуется, обязательно буду использовать в дальнейшей работе.
Было бы интересно узнать результаты Ваших A/B тестов, если они проводились. Если нет, пишите, попробуем вместе.

Понравилась статья? Подписывайтесь на новые, будет еще интересней:


 

Отключи голову и настрой цели Google Analitics как советуют профи

google-analyticsОчень хочется поделиться информацией о настройке отслеживания событий в Google Analitics.

Научиться настраивать цели довольно просто, я уже давал ссылку на настройки из обычной гугловской справки. Но, для новичка возникают вопросы: «Как правильно назвать Категорию, Действия и Ярлыки для определенного события, чтобы в дальнейшем получать полный анализ.» Конечно, можно придумать названия этих параметров самостоятельно, как я сделал это изначально. Но мои метки трудно было анализировать, так как не было систематизации. С самого начала настроек событий нужно было систематезировать и сгруппировать определенные Категории и Действия:

  • работа с корзиной — «одна полочка»;
  • заказ звонка — «другая полочка»;
  • просмотр определенных страниц, контактной информации и т.п. — третья «полочка».

Но кто мне об этом подсказал тогда? Вряд ли кто-то поделится собственной информацией, разжует и принесет все на блюдечке с голубой каемочкой. Нет, конечно, в инете можно найти эту информацию, но я в свое время не нашел, а нашел совсем недавно и спешу ей поделиться.

Небольшая предистория.

Помимо основного сайта, я, как и многие другие, стараюсь использовать и другие площадки. Так, у меня есть два дополнительных сайта на площадке tiu.ru и satu.kz. Как-нибудь на досуге, я обязательно расскажу о них. Это две площадки на оном движке, одна «заточена» под Россию, другая под Казахстан. «Причем тут Казахстан?» — спросите Вы. А почему нет. Стоимость доставки в Казахстан курьерскими службами и транспортными компаниями чуть выше чем чем по России, причем, есть возможность оплаты товара при получении.

Так вот, для меня изначально дополнительный сайт на tiu.ru был предназначен только как дополнительная реклама и я не уделял ему особого внимания. Тем не менее, совсем недавно я решил постараться «выжать» из этих площадок все что можно, так как деньги плачу им не малые, а возможности не использую. Что мне там нравится — отличная техподдержка и подробные инструкции по продвижению своих сайтов. Ребята знают толк в продвижении и, в принципе, самый простой способ сделать свой интернет-магазин — это как раз воспользоваться их услугами. Поверьте — это будет отличное начало и опыт!

У них же я нашел отличную инструкцию по созданию и описанию целей: Вот она. Так как в tiu работают профессионалы, я просто «отключил голову» и сделал все так как в инструкции. Сделал табличку в ecxel-е, собрал все цели с тиу в эту табличку и по аналогии настроил Gooegle Analitics у себя.

Настройка целей в Google Analitics по аналогии с тиу.ру
Настройка целей в Google Analitics по аналогии с тиу.ру

После этого мне осталось только изменить события в своих кнопках на сайте. Т.е., например, для кнопки «Заказать звонок» вставить следующее событие:

<button class='but2' onclick='ga('send','event','Call me back','btn-amazing')'>Заказать звонок</button>

Зачем изобретать велосипед, все уже сделано, пользуются тысячи, пользуйся и ты!

Ну и в качестве бонуса ссылка на инструкцию как отслеживать конверсии на основе вышеуказанных данных.

 

 

 

Отслеживание событий в Google Analitisc

По умолчанию, для того чтобы отследить события, типа увеличение картинки, появление popup окна, нажатие на кнопку со скриптом (без перехода на другую страницу) Google Analitics не фиксирует. Т.е. размещения кода Google Analitics на всех страницах сайта для этого не достаточно.

Как же отследить данные события? Зачастую, именно они являются целевыми действиями, которые необходимо обязательно необходимо анализировать.

Как оказалось, сложного в этом ничего нет. Нужно просто правильно настроить цели в Google Analitics и присвоить событию onclick определенный код.

В предыдущей статье нам необходимо было отследить конверсии кнопок, поэтому и разберем настройку целей на примере отслеживания нажатий на кнопку.

Будем считать, что код отслеживания гугл аналитикс у вас установлен, поэтому сразу перейдем к настройке целей.

  1. Зайдите в аккаунт гугл аналитикс и откройте вкладку Администратор-Представления-Цели

Установка цели Gogle Analitics

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

g_analitics_1

Нажмите на кнопку «Изменение» слева «Установка цели» и выберите шаблон для цели. Какой шаблон вы выберите, в нашем случае, не имеет значения, я выбрал собственная.

g_analitics_2

 

Нажмите кнопку Продолжить, затем нажмите на галочку «Описание цели». Здесь начинается самое важное для нас. Укажите название цели, я обозвал «Нажатие на серую кнопку» и выберите тип цели «Событие».

g_analitics_3

Далее нажмите Продолжить и укажите подробные сведения о цели


g_analitics_4

 

В поле Категория укажите Кнопка, в поле Действие — Серая и нажмите кнопку Сохранить. (описание полей Категория, Действие, Ярлык, Ценность также можете почитать в справочнике Гугл). В итоге у вас должна получиться новая цель, которая выглядит примерно так:

g_analitiks5

Почти готово!

Что ж мы наделали? Мы создали цель, которая будет активироваться в том случае, если произойдет событие, которое передаст Гуглу Аналитиксу параметры: Категоря — Кнопка, Действие — Серая. Т.е. в тег button серой кнопки нам нужно добавить код

onclick='ga('send','event','Кнопка','Серая')'
<button class='but1' onclick='ga('send','event','Кнопка','Серая')'>Кнопка</button>

Готово, теперь наше событие будет отслеживаться в Гугл Аналитикс. Для того чтобы посмотреть количество данных событий необходимо войти в Отчеты — Поведение — События — Лучшие события. На скришноте показаны данные с моего аккаунта Гугл Аналитикс, естественно, у Вас они будут другими.

g_analitiks6

нажав на кнопку Действия по событию, вы увидите действия.

g_analitiks7

 

Практической использование отслеживания событий читайте в статье: A/B тестирование, простой php-код

A/B тестирование своими силами простой php-код

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

Вернулся я к этой теме после переезда на новый движок, что повлекло за собой частичную смену дизайна. Для начала спросил дизайнера что лучше доработать на сайте, что изменить, что убрать, что добавить. Он ответил вопросом: «А ты A/B-тестирование проводишь? Эта та вещь, которую должен проводить любой интернет-магазин!»

Пришлось покопаться в этой тематике, тем более мне давно не нравились некоторые блоки сайта, а как сделать лучше я не знал. Можно, конечно, ткнуть пальцем в небо и сделать как-то так, или эдак. Но какова вероятность того что это улучшит юзабилити? Мое мнение далеко не объективно.  И даже мнение 2-х, 3-х или 10-ти знакомых не даст объективной оценки. Самое объективное мнение может оставить только незаинтересованный посетитель и A/B-тестирование как раз помогает нам узнать это мнение, как оказалось, незамысловатым способом.

Что же такое А/В тестирование?

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

Схематично это выглядит так как на рисунке ниже:

Как работает A/B тест
Как работает A/B тест

При помощи скрипта посетители делятся на 2 равные группы, первой группе показывается серая кнопка, второй — синяя. Конверсией в данном случае является заказ звонка с сайта. Все заказы фиксируются, и через определенное время, анализируется полученный результат.

Не скрою, на пути к этой статье мне пришлось перелопатить массу информации. Есть множество различных сервисов, которые позволяют проводить A/B-тестирование. Первый, который мне попался — сервис от Гугл Аналитикс Эксперименты. Но, как я не пытался «эксперементировать», у меня ничего с этими экспериментами не получилось. В поиске других методов, попадали еще различные сервисы, позволяющие делать тестирование, но все равно я не нашел того что мне нужно. А нужно то мне совсем немного.

Меня не устраивали кнопки на сайте, какими-то они мне казались бледноватыми. И решил я их чуть-чуть переделать (предложенный выше рисунок — скриншот моего анализа). Но улучит ли это ситуацию может сказать только A/B-тест.

И наконец-то я нашел то что искал — это способ от Александра Лозюка. Нет, я не стал пользоваться полностью его сервисом, так как мне пока необходимо менять только отдельные элементы страницы. Тем не менее, идею кода я перенял именно у него.

Идея вот в чем. С помощью простого php-кода, который мы вставляем перед тестируемыми элементами (далее речь пойдет о кнопках, поэтому этими элементами будут Кнопки), мы показываем посетителям различные варианты кнопок, также, на кнопки мы «вешаем» определенные события для Гугл Аналитикс, чтобы в дальнейшем отследить на какие кнопки было больше нажатий.

Предположим, html код исходной Ккнопки имеет следующий вид:

<button class="but">Кнопка1</button>

мы хотим показывать посетителям поочередно другой вариант кнопки:

<button class="but2">Кнопка2</button>

Тогда перед кнопками мы вставляем следующий php-код:

<?php

$TestCookie = "ABTest";
if (isset($_COOKIE[$TestCookie]))
{
if ($_COOKIE[$TestCookie] == "A") $ValueTest = "A"; else $ValueTest = "B";
}
else
{
$rand = rand(1,1000);
if ($rand < 500) $ValueTest = "A"; else $ValueTest = "B";
setcookie($TestCookie, $ValueTest ,time()+86400);
}

?>

а вместо кнопок, следующий

<?php

if ($ValueTest == "A") echo("<button class='but1' onclick='ga('send','event','Нажатие кнопки','Кнопка1')'>Кнопка</button>"); else echo("<button class='but2' onclick='ga('send','event','Нажатие кнопки','Кнопка2')'>Кнопка</button>");

?>

Обратите внимание на события onclick, которые мы вставили в тело тега button. В дальнейшем, благодаря отслеживанию данных событий мы сможем анализировать количество нажатий на Кнопки в Google Analitics. Как настроить отслеживание читайте в статье: Отслеживание событий в Google Analitics.

Вот и все! Данным методом Вы можете анализировать любые элементы на странице, будь то кнопка, таблица, какая-либо ссылка или вообще две страницы с различными элементами.

Движок моего интернет магазин поддерживает smarty теги, поэтому код у меня выглядит чуть иначе, но суть и результат от этого не меняется.

Результаты A/B теста который я проводил с кнопами можно будет корректно проанализировать не меньше чем через пару недель,  о чем я обязательно напишу. А пока могу сказать, что прошло всего 2 дня, а конверсии Кнопок2 уже больше чем конверсий Кнопок1, т.е. уже можно говорить о небольшом положительном результате.

Результаты теста в данной статье: Результаты A/B-тестирования.

Надеюсь, у вас также все получилось! Если нет, пишите, буду рад помочь.