向仅一个DOM节点的React组件中添加Segment Telemtry

编程问答 2022-08-11

问题描述

我想将segment分析添加到我的JupyterLab扩展程序中。不用担心，如果您从未听说过JupyterLab扩展-最好的思考方式：我可以控制DOM中的一个节点，可以放置一些HTML，因此我将执行以下操作：

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

一切正常-我现在正在寻找一些分析代码。例如，我希望能够：

  1. 查看我的代码何时呈现
  2. 查看何时有人与我的渲染元素进行交互（例如，“欢迎”功能中是否存在按钮，用户单击该按钮时）。

但是，segment是一个JS库，它作为脚本提供，您可以在字符串标签的顶部加载到网页中，例如：

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

我什至会将这段代码放在哪里？我无法控制较大的页面+ HTML，所以我不确定该在哪里拍打，以便可以开始使用分析。

感谢您提供任何信息！

解决方法

我的解决方法：

  1. 我没有使用上面的链接的段脚本，而是使用了段中的analytics-node包。
  2. 我在Analytics之前创建一个ReactDOM.render对象-然后可以在任何需要的地方使用它：）

请注意，这显然不适用于使用添加阻止程序的任何人！

analyticsanalyticsjupyterjupyter-labreactjsreactjsreactjsreactjssegment-analytics