Как вы проектируете и реализуете механизм обнаружения событий в масштабе всего приложения для захвата событий щелчка в крупномасштабном Angular приложении? - PullRequest
Новая
       34

Как вы проектируете и реализуете механизм обнаружения событий в масштабе всего приложения для захвата событий щелчка в крупномасштабном Angular приложении?

3 голосов
/ 17 июня 2020

Я пытаюсь реализовать решение, чтобы сообщать подробные действия пользователей в Google Analytics. Поскольку приложение представляет собой одностраничное приложение, я знаю, что могу фиксировать события смены страницы из router, но это только основная c часть решения, предназначенная только для сообщения о просмотренных страницах.

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

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

Как я могу реализовать механизм для обнаружения и обнаружения элементов компонентов события со связанными страницами в Angular? Существуют ли какие-либо передовые практики или абстракции, которые предоставляет фреймворк, которые я могу использовать?

Примечание : я узнал, что Google Tag Manager выполняет работу специально для аналитических целей, но мой вопрос остается то же самое, что реализовать с помощью Angular.

1 Ответ

5 голосов
/ 29 июля 2020

API пользовательских событий - это один из вариантов, но вы должны отправлять это событие при всех щелчках.

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

Добавить слушателя в основной компонент ie в app.compo nnet

 @HostListener('window:click', ['$event'])
    onClickEvent(event: MouseEvent) {
    var target = event.target || event.srcElement;
    var id = target['id']; //this will be the id of the target that you clicked
    this.clickedValue = id;

  }

И следуйте шаблону именования при добавлении идентификатора каждого элемента. ie добавить имя компонента в качестве префикса id. После сборки prod имя компонента будет уменьшено до однобуквенного имени, он потеряет свое исходное имя.

Например: если у вас есть компонент mychild.component 

<div>
<h1 id="mychild-h1">Test</h1>
</div>

Здесь id это myChild -h1, и вы можете выбрать имя компонента из него. Теперь у вас есть идентификатор и имя компонента, по которому вы щелкнули, и создайте службу для регистрации этой информации.

Прикрепление одного образца кода для проверки

CheckThis

...