From 25275232c2e19c803e95c0385e009c99bd1592cd Mon Sep 17 00:00:00 2001 From: Darin Kuntze Date: Thu, 26 Oct 2023 13:02:59 -0500 Subject: [PATCH 1/4] revise forms block --- blocks/forms/forms.js | 37 ++++++++++++++----------------------- scripts/delayed.js | 16 ++++++++++++++++ 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 81277c58..75ee0a5b 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -1,30 +1,21 @@ -function embedHubSpotForm(formFields) { - const script = document.createElement('script'); - script.type = 'text/javascript'; - script.src = '/scripts/v2.js'; - script.charset = 'utf-8'; - script.setAttribute('async', ''); - script.onload = () => { - window.hbspt.forms.create(formFields); - }; - document.head.appendChild(script); -} +import { readBlockConfig } from '../../scripts/aem.js'; + +let formConfig = {}; export default function decorate(block) { - const formDetails = {}; - const tableRows = block.querySelectorAll('tr'); - tableRows.forEach((row) => { - const cells = row.children; - if (cells.length >= 2) { - const key = cells[0].innerText.trim(); - const value = cells[1].innerText.trim(); - formDetails[key] = key === 'target' ? `#${value}` : value; - } - }); - embedHubSpotForm(formDetails); + formConfig = readBlockConfig(block); const form = document.createElement('div'); - form.id = formDetails.target.replace('#', ''); + form.id = formConfig.target; form.classList.add('content', 'outer'); block.textContent = ''; block.append(form); } + +export function buildForm(hbspt) { + hbspt.forms.create({ + region: formConfig.region, + portalId: formConfig.portalid, + formId: formConfig.formid, + target: `#${formConfig.target}`, + }); +} diff --git a/scripts/delayed.js b/scripts/delayed.js index 5a5e663b..1a50b24a 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,5 +1,6 @@ // eslint-disable-next-line import/no-cycle import { sampleRUM } from './aem.js'; +import { buildForm } from '../blocks/forms/forms.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); @@ -34,3 +35,18 @@ if ( ) { loadGTM(); } + +function loadHubSpot() { + const hsScriptEl = document.createElement('script'); + hsScriptEl.type = 'text/javascript'; + hsScriptEl.async = true; + hsScriptEl.defer = true; + hsScriptEl.setAttribute('id', 'hs-script-loader'); + hsScriptEl.src = '/scripts/v2.js'; + document.querySelector('head').append(hsScriptEl); + hsScriptEl.addEventListener('load', () => { + buildForm(hbspt); // eslint-disable-line + }); +} + +loadHubSpot(); From 3bc9597d2cde77f28ad4ff2f3bb5cafe04a07a17 Mon Sep 17 00:00:00 2001 From: Darin Kuntze Date: Thu, 26 Oct 2023 13:21:20 -0500 Subject: [PATCH 2/4] use external script --- scripts/delayed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index 1a50b24a..f3500489 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -42,7 +42,7 @@ function loadHubSpot() { hsScriptEl.async = true; hsScriptEl.defer = true; hsScriptEl.setAttribute('id', 'hs-script-loader'); - hsScriptEl.src = '/scripts/v2.js'; + hsScriptEl.src = '//js.hsforms.net/forms/v2.js'; document.querySelector('head').append(hsScriptEl); hsScriptEl.addEventListener('load', () => { buildForm(hbspt); // eslint-disable-line From db7dcb5dc652549f1d26f0e71a79cce01f529a09 Mon Sep 17 00:00:00 2001 From: Darin Kuntze Date: Thu, 26 Oct 2023 13:36:46 -0500 Subject: [PATCH 3/4] improve deferred loading --- blocks/forms/forms.js | 4 ++++ scripts/delayed.js | 8 +++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/blocks/forms/forms.js b/blocks/forms/forms.js index 75ee0a5b..6f6ee8ac 100644 --- a/blocks/forms/forms.js +++ b/blocks/forms/forms.js @@ -11,6 +11,10 @@ export default function decorate(block) { block.append(form); } +export function isForm() { + return !!formConfig.target; +} + export function buildForm(hbspt) { hbspt.forms.create({ region: formConfig.region, diff --git a/scripts/delayed.js b/scripts/delayed.js index f3500489..5f73b748 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,6 +1,6 @@ // eslint-disable-next-line import/no-cycle import { sampleRUM } from './aem.js'; -import { buildForm } from '../blocks/forms/forms.js'; +import { buildForm, isForm } from '../blocks/forms/forms.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); @@ -40,7 +40,6 @@ function loadHubSpot() { const hsScriptEl = document.createElement('script'); hsScriptEl.type = 'text/javascript'; hsScriptEl.async = true; - hsScriptEl.defer = true; hsScriptEl.setAttribute('id', 'hs-script-loader'); hsScriptEl.src = '//js.hsforms.net/forms/v2.js'; document.querySelector('head').append(hsScriptEl); @@ -49,4 +48,7 @@ function loadHubSpot() { }); } -loadHubSpot(); +// only load this if there is a form block +if (isForm()) { + loadHubSpot(); +} From e2a33ff7b247e018f779d55e6de50ca2a7117f05 Mon Sep 17 00:00:00 2001 From: Darin Kuntze Date: Thu, 26 Oct 2023 14:15:14 -0500 Subject: [PATCH 4/4] font-display: swap fonts --- styles/lazy-styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css index 1d2b9797..706b9b63 100644 --- a/styles/lazy-styles.css +++ b/styles/lazy-styles.css @@ -3,6 +3,7 @@ font-family: Helvetica; font-style: normal; font-weight: 400; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459830/b109e194-c563-4a1e-aa7b-0ab12434b83e.eot#iefix"); src: local("Helvetica Regular"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459830/b109e194-c563-4a1e-aa7b-0ab12434b83e.eot#iefix") format("eot"), url("../fonts/helvetica/3515325d-15bc-419d-968e-43418f451aaa.woff2") format("woff2"), @@ -14,6 +15,7 @@ font-family: Helvetica; font-style: italic; font-weight: 400; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459832/2f5c8674-96c6-4e6f-af67-8154b447387b.eot#iefix"); src: local("Helvetica Oblique"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459832/2f5c8674-96c6-4e6f-af67-8154b447387b.eot#iefix") format("eot"), @@ -26,6 +28,7 @@ font-family: Helvetica; font-style: normal; font-weight: 700; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/0d0cf487-b97e-4a3b-811b-a5ff4d2f3a8f.eot#iefix"); src: local("Helvetica Bold"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/0d0cf487-b97e-4a3b-811b-a5ff4d2f3a8f.eot#iefix") format("eot"), url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/helvetica/1459834/2044ee80-fba8-4c91-87df-4995217f48fa.woff2") format("woff2"), @@ -37,6 +40,7 @@ font-family: "Proxima Nova A"; font-style: normal; font-weight: 400; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/reg/96676c88-bae1-468a-acf5-fa74fdb2b736.eot#iefix"); src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/reg/96676c88-bae1-468a-acf5-fa74fdb2b736.eot#iefix") format("eot"), url("../fonts/proxima/reg/a7333c48-140e-4bcb-a574-a2dcfcd4a621.woff2") format("woff2"), @@ -48,6 +52,7 @@ font-family: "Proxima Nova A"; font-style: italic; font-weight: 400; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix"); src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/italic/926e8ba2-1161-42b7-a850-c56765e872fd.eot#iefix") format("eot"), url("../fonts/proxima/italic/09a1d106-4ddc-4781-bbaa-ca99d410f96c.woff2") format("woff2"), @@ -59,6 +64,7 @@ font-family: "Proxima Nova A"; font-style: normal; font-weight: 700; + font-display: swap; src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/bold/cb0a2948-31e1-4f3e-8df8-f8fed5125537.eot#iefix"); src: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/fonts/proxima/bold/cb0a2948-31e1-4f3e-8df8-f8fed5125537.eot#iefix") format("eot"), url("../fonts/proxima/bold/8666e3e0-713e-463a-8bb9-2d3c6b8050b1.woff2") format("woff2"), @@ -70,6 +76,7 @@ font-family: Brown-Ald; font-style: normal; font-weight: 300; + font-display: swap; src: url("../fonts/brown/lineto-brown-light.eot"); src: url("../fonts/brown/lineto-brown-light.eot#iefix") format("embedded-opentype"), url("../fonts/brown/lineto-brown-light.woff") format("woff"), @@ -80,6 +87,7 @@ font-family: Brown-Ald; font-style: normal; font-weight: 400; + font-display: swap; src: url("../fonts/brown/lineto-brown-regular.eot"); src: url("../fonts/brown/lineto-brown-regular.eot#iefix") format("embedded-opentype"), url("../fonts/brown/lineto-brown-regular.woff") format("woff"), @@ -90,6 +98,7 @@ font-family: Brown-Ald; font-style: normal; font-weight: 700; + font-display: swap; src: url("../fonts/brown/lineto-brown-bold.eot"); src: url("../fonts/brown/lineto-brown-bold.eot#iefix") format("embedded-opentype"), url("../fonts/brown/lineto-brown-bold.woff") format("woff"), @@ -100,6 +109,7 @@ font-family: ald-icons; font-style: normal; font-weight: 400; + font-display: swap; src: url("../fonts/ald-icons.eot?dgljk"); src: url("../fonts/ald-icons.eot?dgljk#iefix") format("embedded-opentype"), url("../fonts/ald-icons.ttf?dgljk") format("truetype"),