Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Hubspot Pageview tracking in Single Page Applications
Home » Google Tag Manager
June 8, 2020 Elad Levy

Following my previous post on Single Page Application (SPA) tracking with Google Tag Manager (GTM), I also wanted to share the process for the Hubspot pixel.

The Hubspot pixel is relatively smarter and is able to identify the new route and page title for new pages loaded. All it requires is triggering the Hubspot pixel on every route change.

Hubspot SPA tracking with GTM

This method integrates with the Generic SPA Tracking method discussed on a separate post, please make sure you follow the instructions detailed there first.

If you’re using GTM, this can easily be done using the Custom Event for SPA.

Pageview Custom Event

On each of these events, trigger the Hubspot pixel, usually set as Custom HTML tag. Note that the full tag isn’t required (learn why) and only the Pageview event should be triggered.

<script>
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['trackPageView']);
</script>
The Hubspot Pageview event for SPA

The full Hubspot tag should be loaded once, probably on the first page load, using the All Pages trigger.

If the application doesn’t support route change, you can manually set the new path with this code:

<script>
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', {{pagePath}}]);
_hsq.push(['trackPageView']);
</script>

Hubspot SPA tracking without GTM

In the case that you’re not using GTM (seriously, what’s wrong with you?), you can still implement the Hubspot tag.

In this case, you need to ask your developers to fire the Hubspot on each route change (or equivalent History Change).

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['trackPageView']);

Similarly, the full Hubspot tag should be loaded once on the initial page load, so that consecutive events are able to fire.

If the application doesn’t support route change, you can manually set the new path with this code:

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/#/new-page']);
_hsq.push(['trackPageView']);

About the Author

Elad Levy View all posts by Elad Levy

Experienced Web Analyst, working for almost a decade now with various web analytics tools.
Also a husband, father of three rascals, and the co-founder of Fixel.

« Previous
Next »
Leave a Reply

Click here to cancel reply.

Contents hide
Hubspot SPA tracking with GTM
Hubspot SPA tracking without GTM
Made with ❤️ by Elad Levy
Disclaimer: Some of the links shared on this site are affiliate links, so if you choose to make a purchase, I’ll earn a small commission. Please note, I only recommend tools I’ve used and have found useful, the commission is not a driving factor