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

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

Представляем сегмент

Нам нужен был способ анонимного отслеживания активности пользователей на нашем сайте, от навигации по сайту до кликов по CTA. Сегмент - идеальное решение для нас.

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

Мы начали с интеграции Segment с Google Analytics (GA). После создания учетной записи сегмента вам будет предложено подключить различные учетные записи к сегменту, что мы и сделали для GA. Затем сегмент использует GA как «место назначения» для информации, которую мы ему отправляем. Когда я делаю отслеживающий вызов Segment из нашего продукта, информация, которую мы отправляем, форматируется в соответствии со спецификацией GA и пересылается в GA для проверки и анализа с помощью их интерфейса.

Посмотрим, как это работает.

Интеграция Wordpress и Segment

Загляните в библиотеку плагинов WordPress, и вы обнаружите, что у Segment действительно есть плагин ...

… Последний раз обновлялся 2 года назад. В быстро меняющемся мире веб-разработки это фактически устарело.

К счастью, компания Segment создала библиотеку на чистом JS, которую можно установить на любой веб-сайт для отслеживания активности пользователей: analytics.js.

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

Мы вошли в редактор внешнего вида в WordPress

и отредактировал файл нижнего колонтитула темы, который используется нашей темой

Здесь мы добавили Javascript - ну, скрипт - куда загружаем analytics.js.

<?php
…
?>
<script type=”text/javascript”>
…
</script>

Установить analytics.js было так же просто, как скопировать код инициализатора из Краткого руководства Analytics.js.

<script type=”text/javascript”>
 (function(){
…
 // Add a version to keep track of what’s in the wild.
 analytics.SNIPPET_VERSION = ‘4.0.0’;
 // Load Analytics.js with your key, which will automatically
 // load the tools you’ve enabled for your account. Boosh!
 analytics.load(“YOUR_WRITE_KEY”);
 // Make the first page call to load the integrations. If
 // you’d like to manually name or tag the page, edit or
 // move this call however you’d like.
 analytics.page();
 })();
</script>

Следуя комментариям, предоставленным Segment, после того, как вы скопируете код загрузчика Analytics.js, добавьте свой ключ записи Segment в вызов analytics.load (). Затем, чтобы отслеживать изменения страницы, когда пользователь перемещается по вашему сайту, вызовите analytics.page ().

Перейдите в оперативный отладчик Segment для источника Javascript, и вы увидите события, поступающие при навигации по сайту.

Если вы правильно интегрировали GA в качестве пункта назначения сегмента, вы также увидите форматирование сегмента и пересылку этих событий на странице в реальном времени в разделе «Отчеты» бокового меню в разделе «События». Удивительный!

Добавление событий кликов

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

Мы хотели отслеживать множество различных событий кликов на сайте и анализировать их с помощью Google Analytics. Установить это было почти так же просто, как и установить Segment.

Для каждого элемента, который мы хотим отслеживать с помощью событий щелчка, мы добавляем три настраиваемых класса. Это делается путем редактирования элемента WordPress, который мы хотим отслеживать:

Когда мы прокручиваем вниз до ввода Custom CSS class, мы можем добавить наши настраиваемые классы, которые будут обрабатываться кодом отслеживания, который мы добавим.

Мы выбрали следующий формат для наших пользовательских классов. Поскольку мы хотим анализировать наши клики с помощью GA, нам нужно предоставить три данных: событие, категорию и метку. Мы делаем три класса для отслеживания событий кликов с префиксом alpin-segment-, чтобы у нас не было конфликтов классов с WordPress:

В нашем случае мы хотели отслеживать клики по кнопке отправки контактной формы на нашей странице цен. Мы выбрали название события «submit», название категории «website-content» и название ярлыка «pricing». Следуя разработанной нами схеме, это дало нам возможность добавить следующие классы CSS:

Мы добавили эти классы в поле Custom CSS class в WordPress сверху и сохранили наши изменения. Теперь мы можем идентифицировать кнопки, которые хотим отслеживать, и предоставлять данные, необходимые для выполнения вызовов Segment.

Чтобы отправлять события щелчка в сегмент, мы добавили следующий код в наш файл нижнего колонтитула темы в WordPress после нашего вызова analytics.page ():

<script type=”text/javascript”>
  (function(){
  analytics.page();
  document.addEventListener(“DOMContentLoaded”, function (event) {
    var elements = $(“*[class*=’alpin-segment-’]”)
      .each(function(index) {
        var segmentData = {};
        $(this).attr(‘class’).split(‘ ‘).filter(function(value) {
          var splitClass = value.split(‘-’);
          splitClass.splice(0, 2).join(‘-’);
          if (splitClass[0] === “event”) {
           splitClass.splice(0, 1);
           segmentData[‘event’] = splitClass.join(‘-’);
          } else if (splitClass[0] === “category”) {
           splitClass.splice(0, 1);
           segmentData[‘category’] = splitClass.join(‘-’);
          } else if (splitClass[0] === “label”) {
           splitClass.splice(0, 1);
           segmentData[‘label’] = splitClass.join(‘-’);
          }
        });
        analytics.trackClick($(this), segmentData.event, {
          category: segmentData.category,
          label: segmentData.label
        });
      });
    });
  })();
</script>

Посмотрим, что здесь происходит. Мы слушаем загрузку содержимого DOM, а затем используем JQuery для поиска всех элементов на странице, у которых есть класс, содержащий alpin-segment-. Для каждого класса элемента, имеющего этот префикс, мы манипулируем строкой класса, чтобы определить, с каким типом класса альпинистского сегмента мы работаем (событие, категория или метка), и используем этот класс для создания нашего вызова сегмента. Например, мы находим класс alpin-segment-event-class, извлекаем имя события, которое хотим использовать, и устанавливаем свойство события для объекта segmentData для хранения этой базы данных.

После того, как мы построили наш объект segmentData, отправить событие щелчка в Segment так же просто, как вызвать analytics.trackClick (), передать элемент, который класс использует JQuery, имя события, которое мы вытащили из имен наших классов, и объект содержащие название нашей категории и название ярлыка.

Когда мы обновляем нашу страницу WordPress и нажимаем нашу кнопку, мы видим, что наш вызов trackClick отправляется в Segment в Инструментах разработчика Chrome:

Если мы посмотрим на запрос, мы увидим, что имена наших событий, категорий и меток установлены такими, как мы хотим:

Теперь, когда все это настроено, мы можем видеть, как наше событие отслеживания появляется с именами события, категории и метки в отладчике сегмента:

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

Невероятный.

Подведение итогов

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

Спасибо за то, что прочитали, и от всех сотрудников Alpin, желаю удачного кодирования!