matomo & state

[s103071049]

不好意思，又來麻煩大家了，我覺得應該是卡在某個觀念錯誤。

我的目的是，使用 matommo 追蹤使用者瀏覽的各個頁面。我希望可以直接將每個頁面的標題餵進去 matomo 的參數。

簡單介紹一下 matomo 是一個埋點追蹤使用者數據的軟件，可以把它想成隱私版本比較高的 google analytic。 matomo gitlab 參考

我會在每個頁面去 setTitle，讓我的 Header 可以更新每頁的 title 值。

當 title 改變時，useEffect 的 cb 都會重新執行，透過 console.log 的確 title1 最後是我要的值。

但接著我透過 console.log 發現，trackPage 裡面的 title 值並不是外面的值。

問題一：我這樣的理解正確嗎？

因為 title 更新時，都會重新去呼叫我的 cb，現在如果我的 instacne 已經被建立好了，history listen 去 call TrackPage()，但這個動作不是在 useEffect 裡面，所以 call function 並不能保證我拿到的值會是 setState 完的最新值，畢竟 setState 是非同步的

所以查詢資料後大多數人才會都寫透過路由去做 page title 設定

 const [title, setTitle] = useState("");
  // 中間省略 ...

 const matomoTrack = (storeUserData) => {
    // localhost & qas 環境不追蹤Matomo資訊
    if (
      window.location.href.includes("localhost") ||
      window.location.href.includes("dpom-qas") ||
      window.location.href.includes("dpom-dev")
    ) {
      return;
    }
    if (!storeUserData.email) return;
    // 建立Matomo Instance ， siteId:針對Project設定
    instance = createInstance({
      urlBase: "https://s360-prd-matomo.wistron.com",
      siteId: 2,
      userId: storeUserData.email
    });

    const filterPage = () => {
      let url = window.location.href;
      return url;
    };

    const trackPage = () => {
      if (instance) {
        if (!isEmpty(window.location.href) && title) {
          instance.trackPageView({
            documentTitle: title, // optional
            href: filterPage() // optional
          });
        }
      }
    };

    history.listen(() => {
      trackPage();
    });
  };
   // 中間省略

   // Check login status
  useEffect(() => {
    const cookieArr = window.document.cookie
      .split(";")
      .map((str) => str.trim().split("="));

    const cookieObj = {};
    cookieArr.forEach((item) => {
      const [key, val] = item;
      cookieObj[key] = val;
    });

   console.log('title1', title) // 確認一下
    if (!instance) {
      const userInfo = getstoreUserInfo();
      matomoTrack(userInfo);
    }
  }, [window.location.href, title]);

  // 將 title & setTitle 傳到底下的子元件，各個頁面進行初始化時會透過 setTitle 去設定他的 title
    return (
    <MatomoProvider value={instance}>
      <Container>
        <Suspense
          fallback={
            <LoadingMask position="center" background="rgba(0, 0, 0, .25)" />
          }
        >
          <Switch>
            <Route path="/app">
              <MainPage title={title} setTitle={setTitle} />
            </Route>
          </Switch>
        </Suspense>
      </Container>
    </MatomoProvider>
  );

問題二：history.listen 為什麼放在 matomoTrack 裡面，但他卻可以偵測到 history 的變動？明明 instance 建立之後就不會再被觸發到 matomoTrack 這個函式，我應該要怎麼下關鍵字估狗 或是怎麼做 才可以比較好的查詢理解這個問題

問題二延伸：承上題，這邊明明 function 已經沒有 call 到但仍然可以使用到裡面的項目，這算不算是 closure 的概念，如果是的話，這邊理論上應該會有記憶體洩漏的問題？

問題三：如果今天，使用者希望像是這樣的頁面， /TobeSignOff/:id 他全部一起統計在一個叫做 TobeSignOffDetail 的項目，不要各別去紀錄追蹤，ex: TobeSignOff/1 & TobeSignOff/2 是不是做不到？我的理解是 他是透過每個頁面 url 去做埋點設計。

[aszx87410]

因為 title 更新時，都會重新去呼叫我的 cb，現在如果我的 instacne 已經被建立好了，history listen 去 call TrackPage()，但這個動作不是在 useEffect 裡面，所以 call function 並不能保證我拿到的值會是 setState 完的最新值，畢竟 setState 是非同步的

有點類似，因為你其實只有第一次 useEffect 會去呼叫 matomoTrack，然後在 matomoTrack 裡面監聽 history 的改變呼叫 trackPage，因此我推測可能你拿到的 title 永遠都是第一次 render 的 title？

問題二：history.listen 為什麼放在 matomoTrack 裡面，但他卻可以偵測到 history 的變動？明明 instance 建立之後就不會再被觸發到 matomoTrack 這個函式，我應該要怎麼下關鍵字估狗 或是怎麼做 才可以比較好的查詢理解這個問題

你只要呼叫了就可以偵測到變動，這就像是 button.addEventListener() 一樣，跟你放在哪邊沒關係

問題二延伸：承上題，這邊明明 function 已經沒有 call 到但仍然可以使用到裡面的項目，這算不算是 closure 的概念，如果是的話，這邊理論上應該會有記憶體洩漏的問題？

算是 closure 沒錯，記憶體洩漏看起來倒是沒有，沒看到什麼儲存 reference 的東西

問題三：如果今天，使用者希望像是這樣的頁面， /TobeSignOff/:id 他全部一起統計在一個叫做 TobeSignOffDetail 的項目，不要各別去紀錄追蹤，ex: TobeSignOff/1 & TobeSignOff/2 是不是做不到？我的理解是 他是透過每個頁面 url 去做埋點設計。

這個就是要額外處理

=====

其實整體看起來邏輯都滿怪的，你呼叫 matomoTrack 應該是放一個空的 useEffect 去呼叫才對，因為整體來說只要呼叫一次就好，應該整個參考一下 GA 怎麼做的邏輯就會對了，畢竟是很類似的東西

[s103071049]

謝謝老師的協助與回覆！ 我參考一下 GA 的做法。