PageTitle delay

Support & Bugs
1

Hello, I am developing a react website and using Matomo. However, the {{pageTitle}} in the dashboard always delayed, such as
when I at Page B, the pageTitle show Page A
when I at Page C, the pageTitle show Page B

how can I solve it?

what I had reference:

2

Hi @Ken-Huang_txone
It means that the value you give at step 11 is the previous page title instead of the current one…

3

yes, so how can I correct it?

visit logs like this, which pageTitle always delay

Screenshot 2024-05-07 at 2.55.47 PM

4

Hi @Ken-Huang_txone , it’s actually simple. The problem exist also with pure JavaScript websites. You must send the PageTitle to matomo after the changing of the PageTitle. So, you must detect the end of the PageTitle changing. (maybe with async and wait ?)

1 Like
5

Hi @melbao, do you mean write JavaScript in Configure this variable of Tag manager?

or in website? I use react-helmet to change the title, and here is the setup of matomo in the website

import React, { useEffect } from "react";
import { API_STATUS, useAPI, useAuth } from "@/hooks";
import { ROLE_TYPE } from "@/constants";
import { IAboutData } from "@/pages/about";
import { Helmet } from 'react-helmet';

export const Matomo: React.FC = () => {
  const { config, meData } = useAuth();

  const { data: sageData, fetchFunc: fetchSageData, status: sageStatus } = useAPI<IAboutData>("/settings/sage", []);

  useEffect(() => {
    if (!config || Object.keys(config).length === 0 || !meData) {
      return;
    }

    if (!sageData) {
      fetchSageData();
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config, meData, sageData, fetchSageData]);

  useEffect(() => {
    if (!config || Object.keys(config).length === 0 || !meData || sageStatus !== API_STATUS.SUCCESS || !sageData) {
      return;
    }
    const title = Helmet.peek()?.title;
    console.log(title)

    // 1: mytxone, 2: sage(local) 3: SAML(SSO)
    const accountAbbr = meData?.type === 2 ? 'L' : 'S';
    // 1: Viewer, 2: Operator, 3: Admin
    const roleAbbr = ROLE_TYPE[meData?.role]?.NAME[0].toUpperCase();
    const feedbackUserId = `${accountAbbr}_${roleAbbr}_${meData.userId}`;

    const _mtm: any[] = (window as any)._mtm || [];
    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
    _mtm.push({ 'version': sageData.version });
    _mtm.push({ 'sn': sageData.guid });
    _mtm.push({ 'feedbackUserId': feedbackUserId });
    _mtm.push({ "setDocumentTitle": title });

    // Attach _mtm array to the window object
    (window as any)._mtm = _mtm;

    const d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.async = true; g.src = config?.FEEDBACK_URL;
    if (s.parentNode) s.parentNode.insertBefore(g, s);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [config, meData, sageData, sageStatus, Helmet]);

  return null;
}
6

Hi @melbao ,

Do you mean to write the JavaScript in Configure this variable of Tag manager? or in my React website? I am using react-helmet to change the title, and not sure how to do it with matomo setup. Would you mind give me an example?

7

I do not use the Tag manager and do not use React and have no idea.