React-ga 未在 Google Analytics（分析）仪表板中返回正确的活动页面

Posted 2023-02-25

【中文标题】React-ga 未在 Google Analytics（分析）仪表板中返回正确的活动页面

【英文标题】：React-ga not returning correct active page in Google Analytics Dashboard

【发布时间】：2018-08-06 23:08:01

【问题描述】：

上下文：在应用程序中，我使用 react-slick 来允许用户像轮播一样浏览组件。 （注意：当用户在轮播中导航时，应用程序的 URL 不会更改/更新；总是 https://myApplicationURL.com）

我想要实现的目标：轮播中的每个组件都使用 react-ga 来初始化和跟踪组件级别的浏览量分析。

我的期望：Google Analytics（分析）仪表板将返回用户当前正在查看的正确组件名称。

实际情况： Google Analytics（分析）仪表板显示的组件名称不正确。 （例如：应用程序在联系人组件上 - 应该显示“/contact”，但 GA 仪表板显示另一个组件名称）

---

**CAROUSEL COMPONENT**
import React,  Component  from "react";
import Slider from "react-slick";
import ReactGA from 'react-ga';
import About from '../../components/about';
import default as Project1 from '../../components/projectTemplate';
import default as Project2 from '../../components/projectTemplate';
import default as Project3 from '../../components/projectTemplate';
import default as Project4 from '../../components/projectTemplate';
import Contact from '../../components/contact';

export default class Carousel extends Component 
  constructor(props) 
    super(props);
    this.state = 
      nav1: null,
      nav2: null,
      pageNumber: 0
    ;
   

  componentDidMount() 
    this.setState(
      nav1: this.slider1,
      nav2: this.slider2
    );
  

  afterChangeHandler = currentSlide => 
    this.setState(
      pageNumber: currentSlide++
    )
  ;

  render() 
    const carousel1 = 
      asNavFor: this.state.nav2,
      ref: slider => (this.slider1 = slider),
      afterChange: this.afterChangeHandler
    

    const carousel2 = 
      asNavFor: this.state.nav1,
      ref: slider => (this.slider2 = slider),
     

    return (
      <div id="carousel-container">
          <Slider ...carousel1>
            <div>
              <About props=this.props.props />
            </div>
            <div>
              <Project1 project=this.props.props.project[0] />
            </div>
            <div>
              <Project2 project=this.props.props.project[1] />
            </div>
            <div>
              <Project3 project=this.props.props.project[2] />
            </div>
            <div>
              <Project4 project=this.props.props.project[3] />
            </div>
            <div>
              <Contact /*props*/ />
            </div>
          </Slider>
          <Slider ...carousel2>
            /*slider2 content*/
          </Slider>
      </div>
    );
  



**ABOUT COMPONENT**
import React from 'react';
import ReactGA from 'react-ga';

const About = props => 
    //Google Analytics
    ReactGA.initialize('[User ID removed]');
    ReactGA.ga('set', 'page', '/about');
    ReactGA.ga('send', 'pageview');

  return(
    <div id="aboutContainer">
        /*Component Content*/
    </div>
  );
;

export default About;


**PROJECT COMPONENT**
import React from 'react';
import ReactGA from 'react-ga';

const ProjectTemp = props => 
  const name = props.project.name

  // Google Analytics
  ReactGA.initialize('[User ID removed]');
  ReactGA.ga('set', 'page', `/project/$name`);
  ReactGA.ga('send', 'pageview');

  return(
    <div id="projectTempContainer">
      /*Project Content*/
    </div>
  );
;

export default ProjectTemp;


**CONTACT COMPONENT**
import React from 'react';
import ReactGA from 'react-ga';

const Contact = props => 
  //Google Analytics
    ReactGA.initialize('[User ID removed]');
    ReactGA.ga('set', 'page', '/contact');
    ReactGA.ga('send', 'pageview');

  return(
    <div id="contactContainer">
      /*Contact Content*/
    </div>
  );
;

export default Contact;

【参考方案1】：

我建议使用细分分析库并关注我们的React quickstart guide 来跟踪页面调用。如果您在轮播中渲染单个组件，您可以使用componentDidMount 来调用page 调用。您将能够通过参数手动设置页面名称，这将帮助您避免遇到/contact 的问题。下面的示例显示了您可以执行此操作的一种方法：

export default class CarouselContact extends Component 
  componentDidMount() 
    window.analytics.page('Contact');
  

  render() 
    return (
      <h1>
        Contact page.
      </h1>
    );
  

我是https://github.com/segmentio/analytics-react 的维护者。如果您有兴趣尝试多种分析工具（我们支持超过 250 多个目的地），而无需编写任何额外代码，您可以通过 Segment 来打开和关闭不同的目的地。 ?