Skip to content

Script loading strategies, HubSpot hook refactor, and Triblio script fix

Warren Gifford requested to merge brett/scripts into main

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

  1. Ensure linting passes.
  2. Ensure prettier has standardized the proposed changes.
  3. Ensure dev and production builds work.
  4. Ensure jQuery and Clearbit scripts only load in the head on pages with HubSpot forms. You can search for the script tag ids.
  5. Ensure our Triblio (personalization), Google Analytics, and Google Tag Manager scripts load in the head
  6. Ensure our Triblio (analytics and overlay cards), Cookiebot and Drift scripts load in the body

Merge request reports

Loading