Question

我正在使用gatsby开发网站。

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

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

因此，首先，我从html.js中的cdn导入smarttag.js：从“反应”导入React 从“ prop-types”导入PropTypes 从“ gatsby”导入{withPrefix}

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

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

请问您有什么建议？

Answer 1

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

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

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

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

1 个答案: