Google Analytics(分析)无法与带有SSR的React应用配合使用

时间:2019-07-03 02:05:35

标签: reactjs meteor ssr react-ga

我无法在我的react / meteor应用程序中运行google Analytics。我认为问题与我有关,已启用SSR,然后使用ReactDOM.hydrate更新应用程序。我已经在这里呆了24个小时了,我完全陷入了困境。任何帮助,将不胜感激。对长代码表示歉意。我正在尝试从npm使用react-ga模型。您会在AppClient.js中找到我的尝试。

路径:Client.jsx

onPageLoad(async sink => {
  const App = (await import('../ui/layouts/app/AppClient.jsx')).default;

  ReactDOM.hydrate(<App />, document.getElementById('react-target'));
});

路径:Server.jsx

import AppServer from '../ui/layouts/app/AppServer';

onPageLoad(sink => {
  sink.renderIntoElementById(
    'react-target',
    renderToString(
      <AppServer location={sink.request.url} checkIfUserIsLoggedIn={checkIfUserIsLoggedIn} />
    )
  );

});

路径:AppClient.jsx

const history = createBrowserHistory();
ReactGA.initialize('MyGoogleId');
history.listen(location => {
  ReactGA.set({ page: location.pathname });
  ReactGA.pageview(location.pathname);
});

class AppClient extends React.Component {
  componentDidMount() {
    console.log(11, window.location.pathname);

    ReactGA.pageview(window.location.pathname);
  }

  render() {
    const { loading, profile } = this.props;
    return (
      <Router history={history}>
        <div className="application">
          <Switch>
            {/* Public routes loaded SSR */}
            <IsPublicRoute
              path="/"
              exact
              component={JobsListLandingPage}
              profile={profile}
              loading={loading}
            />
          </Switch>
        </div>
      </Router>
    );
  }
}

const AppContainer = withTracker(props => {
  const profileHandle = Meteor.subscribe('blah');
  const loadingProfileHandle = !profileHandle.ready();
  const profile = Profiles.findOne({ userId: Meteor.userId() });
  const loading = !loadingProfileHandle && !!profile;

  return {
    loading,
    profile
  };
})(AppClient);

路径:AppServer.jsx

const AppServer = props => {
  const { location, checkIfUserIsLoggedIn } = props;
  const staticContext = { checkIfUserIsLoggedIn };

  return (
    <StaticRouter context={staticContext} location={location}>
      <div className="application">
        <Switch>
          <IsPublicRoute path="/" exact component={JobsListLandingPage} />
        </Switch>
      </div>
    </StaticRouter>
  );
};

0 个答案:

没有答案