0

我正在尝试在应用程序中包含 TikTok 像素。根据他们的文档，我应该在<head>标签中包含他们的基本代码，并在我希望它跟踪时调用相应的事件，例如：ttq.track('CompleteRegistration')当应用程序中的注册完成时。

我如何在 React/Redux 应用程序中做到这一点？

例如，我们有一个HTML.jsx可以在标签中包含像素脚本的地方<head>（或在</body>标签之前以防止页面呈现：

<script dangerouslySetInnerHTML={{
    __html: `the-pixel-code-here`, // this sets up the ttq variable
}} />

但是在我希望触发事件的子组件中，他们的文档说要调用ttq.track('CompleteRegistration')，所以假设我做了这样的事情：

export const completeRegistration = (somePayload) => {
    // do all the things that you need to do to complete a registration
    ...
    const response = server.post('/registration', somePayload)
    if (response.statusCode === 200) {
        ...
        ttq.track('CompleteRegistration')
    } 
    ...
}

export const RegFormSubmitButton = () => {
    return (<button onClick={() => completeRegistration(this.props.somePayload)}>Submit</button>)
}

但相反，我收到一条错误消息：

Cannot find name 'ttq'
'ttq' is not defined

谁能帮我吗？

4

1 回答 1

1

这种库一般会添加一个全局变量，可以在window对象上访问，比如window.ttq

代码片段也可以添加src/index.js而不是public/index.html（或添加到单独的文件并导入到index.js文件中）。注意在这种情况下脚本初始化会比较晚，只有在 react 初始化之后。

来到打字稿警告，我们可以扩展 Window 接口以包含ttq属性，或者像在必须使用库的任何地方window一样简单地进行类型转换。(window as any).ttq

（回答问题以避免不必要的关注。）

于 2021-10-10T19:27:25.047 回答