时间戳

首页 > 解决方案 > 如何在每个新页面上推送 JS 事件以使用 ComponentDidUpdate Gatsby 跟踪访问

reactjs - 如何在每个新页面上推送 JS 事件以使用 ComponentDidUpdate Gatsby 跟踪访问

问题描述

我正在使用 gatsby 开发一个网站。

我想使用 AtInternet 来跟踪我的页面浏览量。

在他们的文档中，他们解释了如何将跟踪器与 React 网站集成。

所以首先，我在我的 html.js 中从他们的 cdn 导入 smarttag.js： import React from "react" import PropTypes from "prop-types" import { withPrefix } from 'gatsby'

export default class HTML extends React.Component {
  render() {
    return (
      <html {...this.props.htmlAttributes}>
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          <script type="text/javascript" src="//tag.aticdn.net/XXXXX/smarttag.js"></script>
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key={`body`}
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}


        </body>
      </html>
    )
  }
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

请注意，我尝试在那里直接使用“经典”跟踪脚本，但当用户导航到新页面时它不会推送新事件

然后，我在 components/ATInternetService.js 中创建服务：

class ATInternetService {
  constructor() {
    this.tag = this.newTag({secure: true});
  }

  newTag() {
    try {
      return new ATInternet.Tracker.Tag();
    } catch(ex) {
      return {
        dispatch: () => ({}),
        page: { set: () => ({}) }
      };
    }
  }

  //@param info: {name: string, level2?: string, chapter1?: string, chapter2?: string, chapter3?: string, customObject?: any}
  sendPage(name) {
    this.tag.page.set(name);
    this.tag.dispatch();
  }
}    
export let tag = new ATInternetService();

然后，我在 /components/pushAT.js 中创建组件：

    import React from 'react' 
    import {tag} from '../components/ATInternetService'
    class PushAT extends React.Component {
        componentDidMount () {
            tag.sendPage({
                name: '',
            })
        }

        componentDidUpdate (prevProps) {
        // Figure out if the path changed
        if (this.props.path !== prevProps.path) {

            tag.sendPage({
                name: '',
            })
        } 
        }
    }
    export default PushAT

当我在我的页面上使用该组件时，它会说：

 error  'ATInternet' is not defined  no-undef

阅读此内容后，我使用了 componentDidMount 和 ComponentDidUpdate：Remount componentDidMount() by path.name

我认为实现跟踪器的最简单方法之一就是在每个页面更改时推送脚本。但我仍然是初学者，我不知道该怎么做。

请问你有什么推荐的？

标签： reactjsgatsby

解决方案

听起来您已经解决了问题，但我认为您也可以尝试在 componentDidMount 中动态导入（使用 Gatsby 开箱即用）ATInternetService模块。

componentDidMount () {
    import('../components/ATInternetService').then(({ tag }) => console.log(tag))
}

我认为它应该同时适用于gatsby develop&gatsby build && gatsby serve.

推荐阅读