S интеграция Важные для нас поля, которые должны быть в каждом пакете:

• type: "click"|"load"|"scroll", etc.
• domain: "https://kbc.com"
• path: "/en/deposit", текущая страница
• urlParams: "?showModal", текущий query string
• payload: {"constainer": "deposit-block", "selector": "button"}, это JSON со схемой данных привязанной к типу события. К примеру для клика это селектор, для загрузки параметры скорости загрузки и т.п.

Определение селектора

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

<div data-container="deposit-block">
  <button data-click="deposit-button-click" data-click-value={depositSumm}>
</div>

Пример выше малость надуманный, но сам принцип должен стать понятным. Мы размечаем сайт специальными тегами 'data-container' и при получении клика отдельно складываем ближайший родительский контейнер и селектор относительно него. Такой подход достаточно удобен, т.к. при изменении верстки сайта контейнеры чаще всего неизменны. Кроме того аналитику лего в браузере найти контейнер по имени и понять что в нем лежит.

Однако часто нам нужно дополнительный контекст знать. В этом случае мы можем использовать дополнительные дата атрибуты. К примеру в примере у нас есть "data-click", этот дата атрибут позволяет при клике на этот элемент приложить в посылку в аналитику дополнительно значение аттрибута "data-click-value", к примеру с суммой депозита.

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

Пример UTM-catcher

<script>
sessionStorage.setItem("kbc-search-params",window.location.search)
</script>