cleanUrlTracker temperamental

[LouiseReid]

I'm using cleanUrlTracker to remove dynamic url props from the url in my React single page app which uses reach router for navigation.

I have this within the script tag in index.html

      ga("create", "UA-xxxxx-xx", "auto");
      ga("require", "cleanUrlTracker", {
        stripQuery: true,
        queryDimensionIndex: 1,
        indexFilename: "index.html",
        trailingSlash: "remove",
        urlFieldsFilter(fieldsObj, parseUrl) {
          const path = parseUrl(fieldsObj.page).pathname;
          const withUsrAndId = /(\/user\/)(?=.*\d)(?=.*[A-Z])[A-Z0-9]{8}(\/id\/)(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}/;
          const withUsr = /(\/user\/)(?=.*\d)(?=.*[A-Z])[A-Z0-9]{8}/;
          if (path.match(withUsrAndId)) {
            fieldsObj.page = path.replace(
              withUsrAndId,
              "$1<user>$2<id>"
            );
          } else if (path.match(withUsr)) {
            fieldsObj.page = path.replace(withUsr, "$1<user>");
          }
          return fieldsObj;
        }
      });
      ga("send", "pageview");

The user param is an 8 digit alpha numeric code and the id is a guid.

I also have this code attached to reach routers history

  const reachHistory = createReachHistory(store);

  reachHistory.listen(page => {
    window.ga("set", "page", page.location.pathname);
    window.ga("send", "pageview", {
      page: page.location.pathname
    });
  });

This code works, but only sometimes and I can't seem to alienate what is causing it to work sometimes and not others. I can sometimes navigate through the whole app where the urls are being replaced and other times it will show the ids half way through.

Is this the correct implementation?