Технология Veyo: включение сегмента в приложение Angular

Первая часть нашей серии статей об отслеживании аналитических событий в Angular проектах с использованием Сегмента.

Мы говорим, что любим технологии, и это серьезно! Наша техническая команда одержима всем техническим. Искусственный интеллект, виртуальная реальность, автономные транспортные средства, новейшие приложения (и телефоны)… если это круто и ново, можно поспорить, что они знают об этом все. И пока они работают над новыми и лучшими способами улучшения транспортировки пациентов, они также документируют новые и улучшенные способы оптимизации повседневных процессов. В новой серии, которую мы запускаем, мы просим нашу техническую команду поделиться некоторыми своими новыми открытиями и процессами в надежде, что мы сможем вдохновить на некоторые технологические прорывы за пределами Veyo. Эти сообщения довольно технологичны, но мы постараемся дать вам краткий обзор на нетехническом языке, прежде чем углубляться в них.

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

— — -

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

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

Сегмент

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

А если серьезно, то Segment берет поток ваших данных и передает его другим службам. Например, если сегодня вы используете Google Analytics, вы можете перейти на MixPanel завтра, просто изменив, куда сегмент будет направлять ваши данные. Вам не нужно обновлять какой-либо код для работы с новым API. Это означает, что вы можете легко адаптироваться к изменяющимся потребностям бизнеса, не дожидаясь инженеров. Фактически, любой, кто может использовать панель управления сегментами, может изменять свои сервисы, вообще не вызывая приставания к инженеру.

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

Добавить Angulartics (простой)

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

Добавьте пакет angulartics через NPM:

npm i — save angulartics2

Импортируйте его в свое приложение (app.module.ts):

import {
Angulartics2Module,
Angulartics2Segment,
} from ‘angulartics2’
@NgModule({
imports: [
Angulartics2Module.forRoot([ Angulartics2Segment ]),
]
})

Включите фрагмент в index.html

ПРИМЕЧАНИЕ. Этот фрагмент может быть устаревшим. Убедитесь, что вы скопировали код из своей учетной записи сегмента при его настройке.

<script type=”text/javascript”>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error(“Segment snippet included twice.”);else{analytics.invoked=!0;analytics.methods=[“trackSubmit”,”trackClick”,”trackLink”,”trackForm”,”pageview”,”identify”,”reset”,”group”,”track”,”ready”,”alias”,”debug”,”page”,”once”,”off”,”on”];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement(“script”);e.type=”text/javascript”;e.async=!0;e.src=(“https:”===document.location.protocol?”https://”:”http://”)+”cdn.segment.com/analytics.js/v1/”+t+”/analytics.min.js”;var n=document.getElementsByTagName(“script”)[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION=”4.0.0";
analytics.load(“…your analytics key goes here…”);
analytics.page();
}}();
</script>

(ПРИМЕЧАНИЕ. Метод analytics.load() принимает ключ вашего источника сегмента)

Используйте это в своем коде:

import { Angulartics2Segment } from ‘angulartics2’
@Injectable()
export class MyService {
constructor(protected analytics: Angulartics2Segment) { }
someMethod() {
this.analytics.eventTrack(‘action’, { customProps: ‘value’, metaProps: ‘value’ })
}
}

Теперь это работает, но есть несколько серьезных проблем:

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

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

2. Фрагмент в индексном файле было бы проще сохранить в отдельном скрипте, а не в составе index.html.

Разделять проблемы - это хорошо, поэтому мы должны это делать

3. Загрузите angulartics в main.ts вместо index.html.

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

4. Зарегистрируйте уникальных пользователей с помощью identify()

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

5. Рассмотрите возможность создания персонализированной аналитической службы.

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

Добавить Angulartics (продвинутый)

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

Зависимость от роутера

В настоящее время Angulartics требует маршрутизатора Angular. Если ваше приложение не использует маршрутизатор, у вас будет нефатальная ошибка консоли. Надеюсь, это скоро будет решено (запрос на слияние, кто-нибудь ??).

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

Вывод

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

- AJ Zane, Front End Engineer в Veyo

Хотите пообщаться с нами в чате?

Мы набираем сотрудников в нашем офисе в Сан-Диего! Ознакомьтесь с последними вакансиями здесь.

Первоначально опубликовано на veyo.com 27 декабря 2017 г.