Introduction

I used Google Analytics (GA) to track the usage of my blog website. Here is a weird thing that more than 95% of view are the front page. So everyone just somehow browse the front page and leave? I guess there is something wrong in it.

Locate Problem

It is not hard to locate the problem. GA provide realtime data, so what page the GA report will be clear. I tested browse some pages in blog, and found that all of them report the title of front page, even if I am browsing certain article in blog, which is supposed to report the title of article.

When GA report title of page, it basic grep from title in head. And in react app, the title in head is a fixed string provided by index.html. Only after running react js, the component will alter the title. So we know that the title will be changed after react js run. While GA script is added directly in head of index.html, it may report before title has changed, so GA always report the fixed title in index.html.

How to Fix

According to the analysis of the reason, we have three ways to fix it.

• Before return index.html, set its header properly. But I am using nodejs as website backend, and it directly return index.html of react app. How to alter header, should be react’s responsibility.
• Another way is to settimout when running GA script. It is a hack way, and involve a magic constant, which is not elegant too.
• The last way I thought of is to render GA script and react component together like below.

I defined a component GoogleAnalytics.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function GoogleAnalytics() {
  return (
    <Helmet>
      <script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT-ID"></script>
      <script>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag() {
            window.dataLayer.push(arguments);
          }
          gtag('js', new Date());
          gtag('config', 'MEASUREMENT-ID');
        `}
      </script>
    </Helmet>
  );
};

And render it in other react component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function NotFound() {
  return (
    <>
      <GoogleAnalytics/>
      <div className="not-found">
        Page not found <a href='/'>back to front page</a>
      </div>
    </>
  )
}

There is still disadvantage in it that we have to render GA each time in components. If we miss it in some page, there will be no GA tracking support.