React-ga не возвращает правильную активную страницу в Google Analytics Dashboard

Question

Контекст: в приложении я использую реагирующий щелчок, чтобы пользователи могли перемещаться по таким компонентам, как карусель. (ПРИМЕЧАНИЕ: когда пользователи перемещаются по карусели, URL-адрес приложения не изменяется / не обновляется; всегда https: //myApplicationURL.com)

То, что я пытаюсь выполнить: каждый компонент в карусели использует response-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;

Answer 1

Я предлагаю использовать аналитическую библиотеку сегментов и следовать нашему краткому руководству React для отслеживания вызовов страниц. Если вы визуализируете отдельные компоненты внутри карусели, вы можете использовать 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 направлений) без необходимости писать какой-либо дополнительный код.