APIs & Integrations

NMont
Member

Next.js // after navegation collectedforms.js Hubspot script stop working.

(Using Hubspot tracking code)

I have different non-Hubspot forms that send the emails to the cms on my Next.js Page and after debugging I realize that collectedforms.js don't load on every page, and when it's not loaded the custom form is not sent.

NMont_0-1636375509387.png

I didn't find too much info about this. The first solution that appears for some similar issues is to change the <Link> tag (used for internal navigation) for a <a> tag. This works because reloads all the page every time you wants to navigate but is not a good practice.
My approach was to create a custom hook that remove the entire tracking code script and appended it to the body every page path changes, this showed improvements because now the page can be navigated 3 o 4 times before collectedforms.js stops working.
The only post that I read about next.js - Hubspot is this one: https://stackoverflow.com/a/69837375/6279385 and I comply with all the things mentioned in the post. 
Thanks for reading, hope that this post helps someone!

2 Replies 2
dennisedson
HubSpot Product Team
HubSpot Product Team

Next.js // after navegation collectedforms.js Hubspot script stop working.

Thanks for posting your solution @NMont .

Unfortunately, there is no way to mark your original post as a solution.  Only follow up replies 😥.  If you post again to this thread, we can accept that as the solution and at least give you some credit 😀

0 Upvotes
NMont
Member

Next.js // after navegation collectedforms.js Hubspot script stop working.

Hey! Thanks for the response, I'm not giving a solution, only my approach. 
I have different questions, it's a known issue? There is someone with a similar issue using Next.js? Or I'm doing wrong the integration with Next.js in my project? 
Thanks again! 

0 Upvotes