Our website is a SPA (Vue+Nuxt) and we load in the Hubspot tracking script using Google Tag Manager on page initialization. This used to work well, but we discovered that we were reloading the entire Hubspot tracking script on every history change, which may apparently skew the bounce rate data and negatively affects pagespeed scores. I found this documentation page on how to set up the tracking script for SPAs. I wrote this little generic script for a GTM embed that should do the trick, and in a limited way it does:
<script>
var _hsq = window._hsq = window._hsq || [];
// Entry page on website
_hsq.push(['setPath', window.location.pathname + window.location.search]);
// Subsequent page views / router changes
function trackPageView() {
_hsq.push(['setPath', window.location.pathname + window.location.search]);
_hsq.push(['trackPageView']);
}
(function() {
var pushState = window.history.pushState;
var replaceState = window.history.replaceState;
window.history.pushState = function() {
pushState.apply(window.history, arguments);
trackPageView();
};
window.history.replaceState = function() {
replaceState.apply(window.history, arguments);
trackPageView();
};
window.addEventListener('popstate', function() {
trackPageView();
});
})();
</script>
<!-- Start of HubSpot Embed Code -->
<script async defer type="text/javascript" id="hs-script-loader" src="//js.hs-scripts.com/xxxxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->
However, since this change, we seem to have lost the traffic sources information in our overview. All visits seem to be attributed to ‘direct traffic’ now, except for a few ‘paid search’ and ‘organic social’ visits:
I found this documentation page on how Hubspot determines its traffic sources, and it mentions it uses the referrer value in some situations to determine the source.
My questions mainly are:
- Does the script above make sense? I send the path (excluding domain) and query params (e.g. `/nl/blog?utm_source=a&utm_campaign=b`) to the setPath function, so I assume Hubspot can read out these query params behind the scenes and use it for traffic sourcing.
- Do you lose any referrer information by explicitly using setPath? I also found This blog article which states that you should only send the `trackPageView` event to Hubspot and let it determine the rest, which it can easily do with modern SPA routers (such as vue router). In other words, is setPath necessary at all, and why do you explicitly use it in your documentation if it is not?
- How can I bring back the correct sourcing information, or what could be the source of the problem that it is lost now?
Thanks for any help!