Open jdwinall-tm opened 7 years ago
@jdwinall-tm Importing the library on the server side shouldn't cause an issue, as long as you make sure it's not firing any events on the server side.
I think this might solve your issue: https://github.com/nfl/react-metrics#override-default-page-view-tracking specifically this chunk of code:
componentDidMount() {
const {value1, value2} = this.props;
this.context.metrics.pageView({value1, value2});
}
Placing the logic in componentDidMount
will force react to run it on the client side instead of the server side. Let me know if you need any more info!
@jamsea Is there a way to implement this on a component that is not a "route handling" component?
My issues seems to be with GoogleAnalytics.js. The first line of this file includes analytics.js, which imports analytics.js on the server and the client.
@jamsea I updated the issue description to include my GoogleAnalytics.js file. Adding the following lines addressed my client errors on the server issue.
let analytics
if (process.browser) {
analytics = require('analytics.js') // eslint-disable-line global-require
}
My only remaining issue is related to sending the active page when navigating between links with NextJS. When I view the real time content activity while browsing my dev site, my entry page reports correctly. However, when I click a link in the site, the page title updates but the active page stays the same (whatever the entry point to the application was).
Do you have an example for a site that supports SSR? I am using NextJS and I am not able to limit importing the vendor/GoogleAnalytics.js class to only client side rendering. How do I replace the GoogleAnalyticsStub below to get this working?
metrics.config.js
Layout.js
package.json
GoogleAnalytics.js