HashRouter и Google Analytics отслеживают отдельные пути - PullRequest
Новая
       22

HashRouter и Google Analytics отслеживают отдельные пути

0 голосов
/ 15 апреля 2020

Я уже пробовал различные решения, я в настоящее время использую его, к сожалению, GA отслеживает только один путь ('/') 

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
    HashRouter,
    Route,
    Switch,
} from 'react-router-dom';
const history = createHistory()
ReactGA.initialize('UA-XXXXXXX-1');
history.listen((location, action) => {
    ReactGA.pageview(location.pathname + location.search);
    console.log(location.pathname)
});

class Index extends Component {


    render() {

        return (
            <>
                <HashRouter history={history} >
                    <Route />
                    <ScrollUpButton ContainerClassName="AnyClassForContainer" />
                <Header />
                <Switch history={history}>
                    <Route exact path={"/"} component={() => <HomePage />}/>
                    <Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
                    <Route exact path={"/contact"} component={() => <Contact />}/>
                    <Route exact path={"/car/:category/"} component={CarCategory} />
                    <Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
                    <Route path="*" component={NotFound} />
                </Switch>
                <Footer />
                </HashRouter>
            </>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

В Google Analytics он показывает только одну подстраницу и точно указывает на index. html

ОБНОВЛЕНИЕ

Я нашел очень простое решение этой проблемы. https://www.npmjs.com/package/react-router-ga

Вот мой код: 

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import '../sass/main.scss';
import {
    HashRouter,
    Route,
    Switch,
} from 'react-router-dom';
import Analytics from 'react-router-ga';

class Index extends Component {

    render() {

        return (
            <>
                <HashRouter >
                    <Analytics id="UA-xxxxxxx-1" debug>
                    <ScrollUpButton ContainerClassName="AnyClassForContainer" />
                <Header />
                <Switch history={history}>
                    <Route exact path={"/"} component={() => <HomePage />}/>
                    <Route exact path={"/test"} component={() => <CategoryLinksNextPrev />}/>
                    <Route exact path={"/contact"} component={() => <Contact />}/>
                    <Route exact path={"/car/:category/"} component={CarCategory} />
                    <Route exact path={"/car/:category/:carname"} component={CarOnePageMain} />
                    <Route path="*" component={NotFound} />
                </Switch>
                <Footer />
                </Analytics>
                </HashRouter>
            </>
        )
    }
}

ReactDOM.render(<Index />, document.getElementById("index"));

1 Ответ

0 голосов
/ 15 апреля 2020

У меня недавно была похожая проблема.

Похоже, что Google Analytics загружается при загрузке страницы. Если щелкнуть ссылку, GA снова запустится, когда новая страница будет загружена с нуля с новым URL-адресом.

Вам придется вручную запускать просмотры страницы GA, когда пользователь перемещается по приложению с одной страницей.

Подробнее здесь - https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

...