0

我无法在我的 react/meteor 应用程序中运行谷歌分析。我认为问题与我启用了 SSR 然后ReactDOM.hydrate用于更新应用程序有关。我已经在这工作了 24 小时，我完全被难住了。任何帮助，将不胜感激。为长代码道歉。我正在尝试使用react-ga来自 npm 的模型。你会发现我的尝试在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>
  );
};
4

0 回答 0