Page title updating past track event?

[JimmyMultani]

I'm having a bit of trouble with having react-helmet work with piwik-react-router. As listed in this issue, piwik-react-router is not waiting until the page renders before sending a track request. This results in the request having an incorrect action_name (or document title) being sent.

Any assistance in this matter would be greatly appreciated. Thanks!

[joernroeder]

Hey @JimmyMultani , that's an interesting use case! As it seems that this is an open and solvable issue on react-helmet i suggest temporary not to connect to the history via .connectToHistory and use the <Helmet onChangeClientState/> callback as suggested here. This is untested and just an idea but it shouldn't be to hard to do something like the following inside the callback:

// @see https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
const history = ...

onChangeClientState: () => {
    // eventually check the current title against a previous one before sending the track event
    piwikReactRouter.track(history.location)
}

hope that helps.

jörn

[joernroeder]

@JimmyMultani could you solve your issue?

[buzzb0x]

In case someone is still wondering, this works. To make it even more convenient, I created a custom Helmet component:

/* components/Helmet.js */

import React from 'react';
import Helmet from 'react-helmet';
import history from '../history';
import analytics from '../analytics';

const onChangeClientState = () => analytics.track(history.location);

const CustomHelmet = ({ children }) => (
  <Helmet onChangeClientState={onChangeClientState}>
    {children}
  </Helmet>
);

export default CustomHelmet;