Добавление телеметрии сегмента в компонент React, который является только одним узлом DOM

Question

Я хочу добавить сегментную аналитику в свое расширение JupyterLab. Не беспокойтесь, если вы никогда не слышали о расширении JupyterLab - лучший способ подумать об этом: я получаю контроль над одним узлом в DOM, где я могу разместить некоторый HTML, поэтому я делаю следующее:

function Welcome(props) {return <h1>Hello</h1>;}
ReactDOM.render(<Welcome/>, dom_element_i_control)

Все это отлично работает - теперь я хочу добавить к этому немного аналитического кода. Например, я бы хотел уметь:

1. Смотрите, когда мой код отображается
2. Посмотрите, когда кто-то взаимодействует с моим визуализированным элементом (например, была ли кнопка в функции приветствия, когда пользователь нажимал на нее).

Однако сегмент - это библиотека JS, которая предоставляется в виде сценария, который вы загружаете на веб-страницу вверху в строковом теге, например:

<script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&...}}();
</script>

Куда бы я вообще поместил этот код? У меня нет контроля над большей страницей + HTML, поэтому я не уверен, где я могу это сделать, чтобы начать использовать аналитику.

Спасибо за любую информацию!

Answer 1

Мое решение:

1. Вместо использования вышеупомянутого сценария связанного сегмента я использовал analytics-node пакет из сегмента.
2. Я создаю Analytics объект прямо перед ReactDOM.render - а потом могу использовать где захочу:)

Обратите внимание: очевидно, что это не сработает для тех, кто использует блокировщик добавления!