Using withTracker() for Google Analytics on render() - React

Question

I am having a hard time figuring out how to implement the react-ga withTracker() HOC with my RegisterContainer setup. I need a RegisterContainer to prevent an alert from triggering on registration and I definitely want to be tracking the register page for analytics, but I cannot get both parts working together. Here is the post I followed on needing a container. How do I track the register page while also using the RegisterContainer?

routes.js:

import React from 'react'
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import { toast } from "react-toastify"
import withTracker from './components/WithTracker';

// Routes
import Home from "./components/pages/Home";
import SignIn from "./components/pages/SignIn";
import SigningIn from './components/pages/SigningIn';
import RegisterContainer from './components/RegisterContainer'

export class Routes extends React.PureComponent {
    render() {
        return (
            <Switch>
                {/* Visitor */}
                <Route path="/" exact component={withTracker(() => <Home user={this.props.user} />)} />
                <VisitorRoute 
                    path="/sign-in" 
                    loggedIn={this.props.user} 
                    component={withTracker(SignIn)} />
                {/* ** Currently not tracking Register page because of the container */}
                <Route path="/register/:email?" render={() => <RegisterContainer user={this.props.user} />} />
                <Route path="/signing-in" component={withTracker(() => <SigningIn user={this.props.user} loading={this.props.loading} />) } />
            </Switch>
        );
    }
}

  // Must be signed out to view
  const VisitorRoute = ({ component: Comp, loggedIn, path, ...rest }) => {
    return (
      <Route
        path={path}
        {...rest}
        render={props => {
          return loggedIn ? (
            <Route
              render={() => (
                <>
                  {toast.warn("You must be signed out to visit that page.")}
                  <Redirect to="/profile" />
                </>
              )}
            />
          ) : (
            <Comp {...props} />
          );
        }}
      />
    );
  };

export default withRouter(Routes);

RegisterContainer.js:

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import Register from "./pages/Register";
import { toast } from "react-toastify";

class RegisterContainer extends Component {
    constructor(props) {
        super(props)

        if (props.user) {
          toast.warn("You must be signed out to visit that page.")
          props.history.push('/profile')
        }
      }

      render() {
        return <Register />;
      }
}

export default withRouter(RegisterContainer)

Using withTracker() for Google Analytics on render() - React

0 Answers0