Script loading strategies, HubSpot hook refactor, and Triblio script fix
Created by: bretthayes
This changes our script loading strategies for our 3rd party integrations and closes #5373 (closed).
Changelog
- Changed script loading strategies for 3rd party integrations in
_app.tsx
-
beforeInteractive
ensures critical scripts are loaded before render (in the head) -
afterInteractive
loads non critical scripts after render (in the body)
-
- Moved our Clearbit script integration to our HubSpot hook since Clearbit is a HubSpot form enhancement. This ensures we aren't loading scripts unnecessarily on pages that don't need it. Note that jQuery is required for our Clearbit integration unfortunately. Also note that Clearbit returns a 401 on local.
- Refactored our HubSpot hook to allow for multiple script integrations. We now have get/remove/load script element functions.
- Added Triblio Analytics and Overlay Cards script
Test
- Ensure linting passes.
- Ensure prettier has standardized the proposed changes.
- Ensure dev and production builds work.
- Ensure
jQuery
andClearbit
scripts only load in the head on pages with HubSpot forms. You can search for the script tag ids. - Ensure our Triblio (personalization), Google Analytics, and Google Tag Manager scripts load in the head
- Ensure our Triblio (analytics and overlay cards), Cookiebot and Drift scripts load in the body