Smart Tracker

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


Начало работы

Для того чтобы начать работать с трекером достаточно зайти в личный кабинет AMIHUB, перейти во вкладку «Администратор» -> «Настройки проекта» и скопировать код трекера из раздела «Настройка Трекера» на свой сайт.


Пример кода трекера:


<!-- AMIHUB -->

<script src='https://amihub-static.fra1.cdn.digitaloceanspaces.com/tracker/tracker.js'></script>

<script>

  new SEF({

    accessKey: '<YOUR_ACCESS_KEY>',

    projectId: '<YOUR_PROJECT_ID>>',

    debug: true

    eventsEnabled: {

      scroll: true,

      activeTimeOnPage: true,

      totalTimeOnPage: true,

      form: {

        login: {

          submit: true,

          beganFill: true

        },

        registration: {

          submit: true,

          beganFill: true

        },

        search: {

          submit: true,

          beganFill: true

        },

        subscription: {

          submit: true,

          beganFill: true

        },

        callback: {

          submit: true,

          beganFill: true

        },

        comment: {

          submit: true,

          beganFill: true

        },

        forgotPassword: {

          submit: true,

          beganFill: true

        },

        feedback: {

          submit: true,

          beganFill: true

        }

      }

    }

  });

</script>

<!-- End AMIHUB -->



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


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


Настройки

eventsEnabled

Включает/Отключает автоматическое определение, генерацию и отправку событий соответствующего типа.


По умолчанию всем полям присваивается значение true.


debug


Трекер визуально подсвечивает формы, которые определил. Выводит служебную информацию в консоль.


События

В таблице перечислены события, которые трекер автоматически определяет и слушает.


События, которые трекер определяет и слушает автоматически, отправляются на сервер SEF сразу или при закрытии страницы, в зависимости от типа события.


НазваниеОтправляетсяОписание
scrollПри закрытии страницыОпределяет верхнюю точку глубины скролла за время нахождения на странице в процентном соотношении. Если на странице присутствует динамическая подгрузка элементов, которые увеличивают высоту клиентской области, расчет глубины скролла определяется из высоты клиентской области зафиксированной после загрузки страницы.
activeTimeOnPageПри закрытии страницыСчитает количество секунд, которые пользователь активен на странице с точностью до 5 секунд.
totalTimeOnPageПри закрытии страницыСчитает, сколько секунд страница была открыта у пользователя.
form.<TYPE>.beganFillСразуОпределяет, что пользователь начал заполнять форму соответствующего типа.
form.<TYPE>.submitСразуОпределяет, что пользователь отправил форму соответствующего типа.



Формы

Принцип работы


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


Основываясь на косвенных признаках, каждой форме присвоятся очки. Форме присвоится тип, в рамках которого набрала больше всего очков. Если очков недостаточно в каждом из типов, форма не определяется.


Как только форма определяется трекером, ей присваивается атрибут data-sef-form-type со значением типа формы.


Пример:


<form data-sef-form-type="login"> 
</form>


Формы не определяются, если они находятся внутри <iframe>.

Если форма присутствует на странице, но не определяется, рекомендуется явное определение формы.


ОБРАТИТЕ ВНИМАНИЕ:

Определение атрибута data-sef-form-type вручную, может привести к некорректной работе трекера с этой формой!

Явное определение

Для того чтобы явно определить форму, достаточно добавить атрибут data-manual-sef-form-type.

Значение атрибута регистронезависимо.

Пример:

<form data-manual-sef-form-type="registration"> 
</form>


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


Типы

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


ТипОписание
loginФорма авторизации
registrationФорма регистрации
searchФорма поиска
subscriptionФорма подписки
feedbackФорма обратной связи
commentФорма комментария
callbackФорма обратного звонка
forgotPasswordФорма восстановления пароля

События форм

Если форма определяется автоматически или явно, трекер начинает слушать ее события для генерации событий формы.

На любое изменение в видимых полях ввода, трекер отреагирует формированием и отсылкой события.

Так же событие генерируется при отправке формы.

ОБРАТИТЕ ВНИМАНИЕ:

Если генерация событий формы не работает, убедитесь, что вы не перезаписали слушателей события данной формы.

API

Трекер предоставляет ряд методов для более гибкой интеграции.


События

Методы вызова событий форм

На каждый тип формы есть 2 метода. Название метода формируется исходя из типа события и типа формы.


  • emitForm<EVENT_TYPE><FORM_TYPE>Event()


Типы событий формы:

  • submit —  отправка формы
  • beganFill —  начало заполнения формы

Типы форм перечислены в подразделе типы.


Пример:


// подключение трекера


sef.emitFormSubmitLoginEvent(); // вызывает событие отправки формы авторизации

sef.emitFormBeganFillCallbackEvent(); // вызывает событие начала заполнения формы обратного звонка

sef.emitFormSubmitSearchEvent(); // вызывает событие отправки формы поиска



Метод вызова пользовательского события

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

  • emitCustomEvent(eventAction, eventLabel, eventValue)
Параметр
Тип
Обязательный
eventAction
String
true
eventLabel
String
true
eventValue
String
false

Другие методы событий

  • emitOrderCreateEvent(orderId) —  вызов события создания заказа.
Параметр
Тип
Обязательный
Описание
orderId
String, Number
true
Для генерации orderId можно воспользоваться вспомогательным методом
  • emitAddToCartEvent(productId) —  вызов события добавления товара в корзину.
Параметр
Тип
Обязательный
productId
String, Number
true
  • emitRemoveFromCartEvent(productId)— вызов события удаления товара из корзины.
Параметр
Тип
Обязательный
productId
String, Number
true
  • emitAddToWishListEvent(productId) —  вызов события добавления товара в список желаний.
Параметр
Тип
Обязательный
productId
String, Number
true

Вспомогательные методы

  • generateOrderId(sendOrderId) — генерирует и возвращает идентификатор заказа.
    Returns: Number
ПараметрТипПо умолчаниюОбязательныйОписание
sendOrderId    BooleanfalsefalseЕсли true, вызывает emitOrderCreateEvent передавая в качестве параметра сгенерированный orderId


  • getOrderId() —  возвращает ранее сгенерированный идентификатор заказа.
  • getInfo() —  возвращает объект с информацией об аккаунте и проекте.
  • setUserId(userId) —  устанавливает идентификатор пользователя.
  • getUserId() — возвращает идентификатор пользователя