topic Re: Tracking page and Lead Flows in SPA in APIs & Integrations

Tracking page and Lead Flows in SPA

cgomez — Thu, 03 Oct 2019 14:46:56 GMT

Hi there, I am trying to integrate lead flows (pop-ups forms) in a Single Page Application (SPA). I created a pop-up that should be shown in a specific page (like /contactus).

The popup shows when I reload the page directly with that url, but it does not when I navigate to that page from a different url.

I though this can be fixed by tracking the page, so I did something like this in the router (I am using react):

const _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', newPath]);
_hsq.push(['trackPageView']);

After that, I notice the page is being updated on every path changing, but the popup is still not being shown.

So my question is: if we track a page, lead flow popups should work like if we reaload it?

Thank you in advance for your answers.

Re: Tracking page and Lead Flows in SPA

WendyGoh — Tue, 08 Oct 2019 02:43:28 GMT

Hi @cgomez,

I hope all is well with you 😄

When looking to show a dismissed pop up form again, the tracking page function wouldn't work. The tracking page function intend is to track page views, it doesn't control when a pop up form would show.

That said, when looking to show dismissed pop up form again, you can do so by determing how much time should pass before the pop up form appear again in the options tab of your pop up form. You can learn more here: https://knowledge.hubspot.com/articles/kcs_article/pop-up-forms/pop-up-forms-not-displaying.

The minimum setting is 1 day. Additionally, if a lead flow is being submitted, it won't reappear for that visitor again.

I hope this helps to clarify!

Re: Tracking page and Lead Flows in SPA

maheshsamudra — Mon, 09 Mar 2020 06:06:03 GMT

Hello,

I'm following this same method to show pop up forms. But it doesn't work.

Requirement: Add tracking code to track pages and display pop-up forms in SPA (React)

What I did:

Add the HubSpot tracking code at the end of the body tag.
Added setPath and trackPageView when the page is changed.

const _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', window.location.pathname]);
_hsq.push(['trackPageView']);

Issues:

The pop-up form appears when I directly go to the page by typing the address in the address bar. And the pop-up doesn't go away when I navigate to another page.
The pop-up form doesn't show when I go to the home page first and then go to the contact page by clicking the link from the menu.

Am I doing something wrong? Or is there any other way that we can achieve this?

Re: Tracking page and Lead Flows in SPA

BiWeeklyStats — Sat, 18 Jul 2020 16:25:41 GMT

I'm having the exact same issue as @maheshsamudra

Re: Tracking page and Lead Flows in SPA

WendyGoh — Tue, 21 Jul 2020 07:27:38 GMT

Hey @BiWeeklyStats,

I have responded to your query here: https://community.hubspot.com/t5/APIs-Integrations/Popup-not-triggering-on-Single-Page-App/m-p/355460/highlight/false#M34890.

Re: Tracking page and Lead Flows in SPA

galant — Thu, 01 Oct 2020 08:40:29 GMT

Hi, I'm having the same issue.

I have an SPA website developed in VueJS and I can't get pop-up forms to work when set up an URL targeting the form does not pop-up when entering the page. It only works if I refresh the page on the correct URL or enter directly on this one.

I have tryed setting up the traking for SPA as described in the documentation but this only effects page traking, it does not trigger the lead flow actions.

Thank you in advance for your help.

Re: Tracking page and Lead Flows in SPA

WendyGoh — Mon, 05 Oct 2020 08:24:03 GMT

Hey @galant,

Can you ensure that you've went through these troubleshooting steps: Pop-up forms not displaying?

Additionally, could you share with me the page url and portal Id in question?

Re: Tracking page and Lead Flows in SPA

otutam — Thu, 04 Mar 2021 16:05:52 GMT

Hello,

Hi, I'm having the same issua as @galant. Pop-up shows when I enter page directly, but when I use

const _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', window.location.pathname]);
_hsq.push(['trackPageView']);

in Vue router and fire this method after router change nothing happend. I tried console.log(_hsq) and it says that its function.

Can you help me @WendyGoh

Re: Tracking page and Lead Flows in SPA

NKang1 — Mon, 05 Apr 2021 13:55:43 GMT

Hi there, I also want to know that if there is an alternate way to track clicks for non Form Step Pop-ups, since this would be useful in tracking the effectiveness of our efforts to reduce page exits through the use of free sample offers on pop-ups. I know that HubSpot only tracks clicks and click through rate for pop-up forms that have Form step selected in the section.

If any other type of pop-up form is selected in this section HubSpot will track views only. Could you also help? @WendyGoh

Any ideas? Thanks!