Как собирать аналитику по действиям посетителей сайта

После того как вы установили код на ваш сайт, мы можем начать собирать информацию о действиях ваших посетителей. Самые простые данные (вошел на сайт) собираются автоматически. Но сбор самых интересных данных необходимо настроить.

 

Чтобы начать собирать данные о нажатии кнопок, переходы на определенные страницы, заполнение форм, полей необходимо зайти в боковом меню в раздел «События» — «автособытия».

 

Автособытия — регистрируют определенные действия посетителя вашего сайта и записывают данные, связанные с совершением этого действия. Кроме того, они помогут идентифицировать ваших пользователей (например, узнать контактные данные).

 

Типы автособытии

 

kak2

 

Нажимаем на кнопку «новое автособытие».

Существует 5 типов автособытия по действию:

  • Зашел на страницу
  • Зашел на страницу и прокрутил до конца
  • Кликнул
  • Заполнил поле ввода
  • Заполнил форму

 

kak1

Создание автособытий

 

Зашел на страницу.

 

Самое простое автособытие. Чтобы его настроить, следует указать адрес страницы, на которой мы хотим записывать данные о посещении.

Можно указать только часть адреса. События будут отслеживаться на всех под-страницах. Можно использовать звездочку (wildcard).

Например: http://example.com/*/somepage

 

kak3

 

Нужно отметить, что будут отслеживаться все страницы, в адресе которых содержится указанное значение. Так, например, не получится создать событие “зашел на главную”, потому что качестве адреса указан http://example.com, и в этой ситуации будут отслеживать все страницы сайта (так как в их адресе всегда будет содержаться “http://example.com”)

 

После указания страницы, следует выбрать действие, которое нужно совершить с данным.

 

kak4 (2)

В этом случае у нас есть два варианта:

  1. Записать событие — тогда нам нужно придумать название этому событию. В этом случае вы сможете использовать это событие как триггер для автосообщений, вставлять это событие как шаг в конверсионной воронке.
  2. Идентифицировать пользователя — тогда эти данные не будут записаны как отдельно событие, а будут записаны как свойство пользователя. В этом случае нужно в сером поле ниже прописать какое свойство будет записываться в профиль пользователя.

 

Пример:

Вы можете создать автособытия для А/Б теста.

В первом автособытии указываете один адрес страницы (версию А), и в записываемых свойствах указываете название свойства “Версия А/Б теста”, в значении “1”, в типе свойства выбираем “это простое свойство”.

Для второго автособытия указываем второй вариант страницы, а в значении свойства “Версия А/Б теста” вводим значение “2”.

 

Теперь зашедшему пользователю в список свойств будет добавляться свойство “Версия А/Б теста” и записываться значение 1 или 2. Вы будете знать на какую из страниц он зашел и вы сможете агрегировать пользователей по этим свойствам.

2014-10-28 12-51-18

Завершаем создание автособытия — нажимаем на “Ок” и автособытие создано.

 

Для создания следующих автособытий вам понадобится поставить расширение для браузера chrome.

 

Расширение: SelectorGadget (www.selectorgadget.com)

Это расширение поможет нам определять селекторы объектов на сайте и отслеживать их в автособытиях.

 

 

Кликнул.

2014-10-27 23-06-13

В этом автособытии мы будет выбирать элементы сайта на которые пользователь может кликнуть (причем не так важно кликабельны ли они в вашем интерфейсе).

 

Для этого перейдите на ваш сайт, нажмите на иконку, установленного расширения для chrome в правом верхнем углу вашего браузера.

kak6 (2)

После нажатия селектор гаджет начал действовать и теперь вы видите какие объекты вашего сайта можно выделить. При наведении на элементы вашего сайта, они будут выделяться.

2014-10-27 23-13-11

Если кликнуть по ним, то вы сможете увидеть их селектор в правом нижнем углу.

2014-10-27 23-14-49

Но вы можете увидеть, что кроме элемента на который мы кликнули (зеленый цвет), выделись другие элементы (желтый цвет). Селектор сразу выделяет похожие друг от друга элементы. Для правильной работы нашего автособытия нужно исключить их влияние на сбор нами данных. Для этого нужно кликнуть по желтым объектам, тогда мы сможет выделить интересующий нас селектор (плагин рядом с кнопкой “Clear” показывает количество выделенных объектов).

2014-10-27 23-17-56
Теперь мы копируем получившийся у нас селектор.

В нашем примере это: .state-error~ .state-error+ .col-sm-6 input

Возвращаемся в административную панель и вставляем его в поле По элементу с CSS-селектором.2014-10-27 23-19-35

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

 

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

2014-10-27 23-25-50

Дополнительные свойства

 

Кроме данные о клике вы можете собрать свойства связанные с этим нажатием. Данные емейла или телефона, которые ввел посетитель перед кликом.

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

2014-10-28 13-29-48

После этого вставить интересующие свойства в поля в админстративной панели.

2014-10-27 23-32-51

Вы можете придумать название для свойства сами — “Сайт” (тогда в карточке пользователя появиться такой тип свойств) или воспользовать стандартными $email, $phone, $name, тогда полученные данные попадут в карточку пользователя в созданные (стандартные поля).

kak7

Завершаем создание автособытия — нажимаем на “Ок” и автособытие создано.

 

 

Заполнить поле ввода.

 

Это автособытие используется для сбора данные из различных полей ввода.

Заходим на страницу сайта и с помощью selectorgadget выбираем поле, информацию из которого хотим собирать.

2014-10-28 13-29-48

Копируем селектор поля. В нашем случае #site. Вставляем в автособытие в поле ”Имеющее CSS-селектор”. Придумываем название события и название свойства (Сайт).

2014-10-28 13-24-07

Теперь когда пользователь введет данные в поле, оно тут же запишется свойства события. Если вместо “записать событие” выбрать “Идентифицировать пользователя”, то событие отдельно фиксироваться не будет, а свойство (адрес сайт в нашем пример) запишется в профиль пользователя.

 

 

Заполнил форму.

 

Это автособытие мы придумали для частого кейса — заполнение форм.

 

Настраивать заполнение каждого свойства (каждого поля в форме), через автособытия “кликнул” не очень удобно и долго. В этом случае можно воспользоваться автособытием “заполнил форму”:

  1. Заходим на страницу где есть форма с полями
  2. С помощью selectorgadget выделяем её код
  3. Вставляем в параметры автособытия

2014-10-28 14-20-07

Теперь определяем на какой странице мы следим за этой формой (на какой-то конкретной или на всех страницах сайта) и придумываем название этого события.

 

К событию будут автоматически добавлены свойства, соответствующие отдельным полям формы (скрытые поля и пароли не записываются).

И больше никаких свойств вводить не требуется. Хотя вы можете добавить какие-то дополнительные свойства, которые хотел бы фиксировать вместе с заполнением этой формы (это могут быть данные о варианте страницы А/Б теста, данные из полей не вошедших в форму).

 

Нажимаем “Ок” и автособытие готово.

 

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