I’m having trouble getting google analytics running within my react/meteor app. I think the problem is related to me have SSR enabled and then using ReactDOM.hydrate to update the app. I’ve been at this for 24 hours and I’m completely stumped. Any help would be appreciated. Apologies for the long code. I’m trying to use react-ga model from npm. You’ll find my attempt find it in AppClient.js.
Path: Client.jsx
onPageLoad(async sink => {
const App = (await import('../ui/layouts/app/AppClient.jsx')).default;
ReactDOM.hydrate(<App />, document.getElementById('react-target'));
});
Path: Server.jsx
import AppServer from '../ui/layouts/app/AppServer';
onPageLoad(sink => {
sink.renderIntoElementById(
'react-target',
renderToString(
<AppServer location={sink.request.url} checkIfUserIsLoggedIn={checkIfUserIsLoggedIn} />
)
);
});
Path: 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);
Path: 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>
);
};