在 React 中调用 TikTok Pixel 事件

Question

我正在尝试在应用程序中包含 TikTok 像素。根据他们的 docs，我应该将他们的基本代码包含在 <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

谁能帮帮我？

Answer 1

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

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

关于 typescript 警告，我们可以扩展 Window 接口以包含 ttq 属性，或者只需在任何地方像 (window as any).ttq 一样输入 cast window必须使用图书馆。

(已回答问题以避免不必要的关注。)

在 React 中调用 TikTok Pixel 事件

Calling TikTok Pixel events in React

reactjs

tiktok