Data is only collected only under the root page

[MatthieuVeillon]

Hi,

Thanks for the greta work, I'm trying to integrate autotrack in our react SPA.

My integration in index.html looks like that :

<script>
      window.ga = window.ga || function() {
        (ga.q = ga.q || []).push(arguments);
      };
      ga.l = +new Date;
      ga('create', 'UA-125787816-1', 'auto');
      ga('require', 'eventTracker');
      ga('require', 'outboundLinkTracker');
      ga('require', 'urlChangeTracker');

      ga('send', 'pageview');
</script>`
<script async src="https://www.google-analytics.com/analytics_debug.js"></script>
<script async src="autotrack.js"></script>

I get traffic on my GA realTime but stuck on active page being /

Here is my debug output when I activate debug mode. From what I understand, the plugins get properlly initiallized

analytics_debug.js:10 Initializing Google Analytics. 
analytics_debug.js:10 Registered new plugin: ga(provide, "render", Function) 
analytics_debug.js:10 Running command: ga("require", "eventTracker") 
analytics_debug.js:10 Waiting on require of "eventTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "cleanUrlTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "eventTracker") 
analytics_debug.js:10 Waiting on require of "eventTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "eventTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "eventTracker") 
analytics_debug.js:10 Plugin "eventTracker" intialized on tracker "t0". 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Waiting on require of "outboundLinkTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "impressionTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Waiting on require of "outboundLinkTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "maxScrollTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Waiting on require of "outboundLinkTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "mediaQueryTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Waiting on require of "outboundLinkTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "outboundFormTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Waiting on require of "outboundLinkTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "outboundLinkTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "outboundLinkTracker") 
analytics_debug.js:10 Plugin "outboundLinkTracker" intialized on tracker "t0". 
analytics_debug.js:10 Running command: ga("require", "urlChangeTracker") 
analytics_debug.js:10 Waiting on require of "urlChangeTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "pageVisibilityTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "urlChangeTracker") 
analytics_debug.js:10 Waiting on require of "urlChangeTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "socialWidgetTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "urlChangeTracker") 
analytics_debug.js:10 Waiting on require of "urlChangeTracker" to be fulfilled. 
analytics_debug.js:10 Executing Google Analytics commands. 
analytics_debug.js:10 Registered new plugin: ga(provide, "urlChangeTracker", Function) 
analytics_debug.js:10 Running command: ga("require", "urlChangeTracker") 
analytics_debug.js:10 Plugin "urlChangeTracker" intialized on tracker "t0". 
analytics_debug.js:10 Running command: ga("send", "pageview") 
analytics_debug.js:10 Setting throttling cookie: "_gat"

[philipwalton]

That all looks right so far. Is the problem that you don't see new pageviews when the URL changes? I can't tell from your debugger output whether you're trying to change the URL or not.

Also, is this app hosted publicly anywhere so I could take a look?

[MatthieuVeillon]

Thanks for the quick reply

Yes I cannot see any new page in GA Realtime while my url are changing in my app

Let say I navigate from http://localhost:4200/#/events to http://localhost:4200/#/incidents to http://localhost:4200/#/users

My only metric in Realtime Content is 2 hits on Page / - the count of the pageview doens't increase neither beyond 2 regardless of my nvaigation on the site.

Unfortunately the app is not publicly available

[philipwalton]

Ahh, I see the problem. You're using hash URLs, which the urlChangeTracker plugin doesn't support. https://github.com/googleanalytics/autotrack/blob/master/docs/plugins/url-change-tracker.md#overview

[MatthieuVeillon]

hmm, my bad. Haven't seen it, that might be useful to point that out from the beginning in the doc while talking about SPA.

I'm gonna stick to GTM and the history fragment then

Thanks for your help, appreciated.

[philipwalton]

I'd recommend using real URL changes if you can. All modern browsers support pushState, and so do all modern SPA libraries. Real URLs are better for countless reasons (SEO, shareability, performance, etc.)

The problem with supporting hash changes in autotrack is it's not always possible to distinguish between in-page jump links (what hash changes are intended to be) and SPAs that use them. Also, it's quite easy to track them yourself.

If you want to track hash changes in your app as pageviews (and you're not using in-page hash links), you don't need a separate tool, the code to do it is tiny:

addEventListener('hashchange', () => {
  ga('set', {
    page: location.pathname + location.search + location.hash,
    title: document.title,
  });
  ga('send', 'pageview');
});

[philipwalton]

Closing as I think the underlying issue has been solved.