Tracking page and Lead Flows in SPA

SOLVE
cgomez
Member

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.

1 Accepted solution

Accepted Solutions
WendyGoh
Solution
HubSpot Employee

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!

View solution in original post

0 Upvotes
8 Replies 8
WendyGoh
Solution
HubSpot Employee

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!

View solution in original post

0 Upvotes
maheshsamudra
Member

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:

  1. Add the HubSpot tracking code at the end of the body tag.
  2. 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?

BiWeeklyStats
Participant

I'm having the exact same issue as @maheshsamudra 

WendyGoh
HubSpot Employee
0 Upvotes
galant
Participant

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.

0 Upvotes
WendyGoh
HubSpot Employee

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?

0 Upvotes
otutam
Member

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 

0 Upvotes
NKang1
Member

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!

 

0 Upvotes