reactjs - React-ga 未在 Google Analytics(分析)仪表板中返回正确的活动页面
问题描述
上下文:在应用程序中,我使用 react-slick 允许用户在轮播等组件中导航。(注意:当用户在轮播中导航时,应用程序的 URL 不会更改/更新;始终为https://myApplicationURL.com)
我试图完成的事情:轮播中的每个组件都使用 react-ga 来初始化和跟踪组件级别的页面浏览分析。
我的期望:谷歌分析仪表板将返回用户当前正在查看的正确组件名称。
实际发生的情况: 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;
解决方案
我建议使用 Segment 分析库并遵循我们的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 多个目的地),而无需编写任何额外的代码,您可以通过 Segment 来打开和关闭不同的目的地。
推荐阅读
- java - Play Framework 无法处理超过 12 个并发连接
- c++ - 使用 wxWebView 时应该如何避免崩溃
- jquery - 将字符串的第一部分大写
- machine-learning - 在聚类之前我应该对时间序列进行分析吗?
- python - Heroku Python Worker ProcFile
- css - 如何为 body 和 png img 设置相同的背景图像?
- jpa - 从 JPA 在 PostgreSQL 中生成检查约束
- swift - Swift 4字符串格式化程序到货币
- java - @RequestBody 变量返回空属性
- python - 正则表达式:从文本中提取一些信息