Google Analytics не работает с приложением реагировать с SSR - PullRequest
0 голосов
/ 03 июля 2019

У меня проблемы с запуском Google Analytics в моем приложении реакции / метеора.Я думаю, что проблема связана со мной, включили 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>
  );
};
...