From 7cf0223737c7718f3752909177f133d299d3d605 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Wed, 7 Aug 2024 20:08:12 +0530 Subject: [PATCH 01/17] Added Drift Code Contact form2 --- blocks/marketo-2/marketo-2.css | 451 +++++++++++++++++++++++++++++++++ blocks/marketo-2/marketo-2.js | 158 ++++++++++++ 2 files changed, 609 insertions(+) create mode 100644 blocks/marketo-2/marketo-2.css create mode 100644 blocks/marketo-2/marketo-2.js diff --git a/blocks/marketo-2/marketo-2.css b/blocks/marketo-2/marketo-2.css new file mode 100644 index 00000000..63b2c685 --- /dev/null +++ b/blocks/marketo-2/marketo-2.css @@ -0,0 +1,451 @@ +/* stylelint-disable selector-id-pattern */ +/* stylelint-disable selector-class-pattern */ +/* stylelint-disable no-descending-specificity */ + +.section.marketo-2-container.multiple .marketo-2-wrapper { + display: flex; + flex-direction: column; + gap: 32px; +} + +/* Ordering based on content with form */ +.section.marketo-2-container.multiple .marketo-2-wrapper > .default-content-wrapper { + order: 1; +} + +.section.marketo-2-container.multiple .marketo-2-wrapper > .marketo { + order: 2; +} + +.section.marketo-2-container.multiple .marketo-2-wrapper > .columns-wrapper { + order: 3; +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h4, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper h4 { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-18); +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h6, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper h6 { + font-family: var(--sans-serif-font-medium); + font-size: var(--font-size-18); + margin: 0 0 var(--spacer-element-03); +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper p, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper p { + font-size: var(--font-size-16); + font-family: var(--sans-serif-font-light); + letter-spacing: var(--letter-spacing-001-em); + line-height: var(--line-height-160); + font-weight: 300; +} + +.section.marketo-2-container .marketo-2-wrapper .default-content-wrapper > *, +.section.marketo-2-container .marketo-2-wrapper .columns-wrapper > * { + margin: 0 0 var(--spacer-element-08); +} + +.section.marketo-2-container .marketo-2-wrapper div.spacious p { + margin: 0 0 var(--spacer-element-10); +} + +.marketo { + width: 100%; +} + +/* Merative styling for Marketo form */ +.mktoForm { + margin: 0 auto !important; + width: 100% !important; +} + +.mktoForm .mktoOffset { + width: 0 !important; + height: 0 !important; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; + margin: 0 0 var(--spacer-element-07) 0; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText p { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; +} + +.mktoForm .mktoFieldWrap .mktoHtmlText a { + padding: 0 !important; +} + +.mktoForm .mktoFormRow { + clear: both !important; +} + +.mktoForm .mktoFormRow .mktoFieldWrap, +.mktoForm .mktoFormRow .mktoFormCol { + width: 100% !important; + margin-bottom: 0 !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText { + font-size: var(--font-size-16) !important; + margin-bottom: 1rem !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText span { + color: var(--neutral-carbon) !important; +} + +.mktoForm div:first-of-type .mktoFormCol .mktoFieldWrap .mktoHtmlText small { + float: right; + font-size: var(--font-size-16); + text-align: right !important; +} + +.mktoForm .mktoButtonWrap .mktoButton { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; + border: 0 !important; + border-radius: 40px !important; + box-sizing: border-box !important; + color: var(--neutral-white) !important; + cursor: pointer !important; + display: flex !important; + font-family: var(--sans-serif-font-medium) !important; + font-size: var(--font-size-16) !important; + font-weight: 400 !important; + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + line-height: 25.6px !important; + margin: 37px 0; + max-height: 62px !important; + padding: 11px 16px 11px 24px !important; + width: auto !important; + background-image: var(--gradient-to-right); + background-position: 0 0; + background-size: 200% auto; + transition: all .4s ease-in-out; +} + +.mktoForm .mktoButtonWrap .mktoButton:active, +.mktoForm .mktoButtonWrap .mktoButton:hover { + border: 2px solid transparent; + background-position: 96% 0; +} + +.mktoForm .mktoButtonWrap .mktoButton::after { + background-size: contain !important; + color: var(--neutral-white) !important; + content: url('../../icons/arrow-white.svg') !important; + height: 22px !important; + width: 22px !important; + margin-left: 24px +} + +.mktoForm .mktoAsterix, +.mktoForm .mktoErrorArrowWrap { + display: none !important +} + +.mktoForm .mktoLabel { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + font-weight: 400 !important; + letter-spacing: .01em !important; + line-height: 160% !important; + width: 100% !important; + padding-top: 0 !important; +} + +.mktoForm .mktoFormCol { + min-height: unset !important; +} + +.mktoForm .mktoFormCol .mktoLabel { + padding-bottom: var(--spacer-element-04) !important; +} + +.mktoForm .mktoGutter.mktoHasWidth { + height: auto; +} + +.mktoForm .mktoRequiredField .mktoLabel::after { + color: var(--neutral-carbon) !important; + content: "*" !important; + display: inline-block !important; +} + +.mktoForm .mktoEmailField, +.mktoForm .mktoTelField, +.mktoForm .mktoTextField, +.mktoForm select.mktoField, +.mktoForm textarea.mktoField { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-appearance: none; + background: var(--neutral-bone) !important; + border-color: var(--neutral-carbon) !important; + border-width: 0 0 1px !important; + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + height: 43px !important; + letter-spacing: .01em !important; + line-height: 160% !important; + margin-top: 2px !important; + margin-bottom: var(--spacer-layout-04) !important; + outline: 0 !important; + padding-left: 15px !important; + width: 100% !important; +} + +.mktoForm .mktoEmailField.mktoRequired, +.mktoForm .mktoTelField.mktoRequired, +.mktoForm .mktoTextField.mktoRequired, +.mktoForm select.mktoField.mktoRequired, +.mktoForm textarea.mktoField.mktoRequired { + border-color: var(--neutral-carbon) !important; +} + +.mktoForm .mktoEmailField.mktoRequired.mktoInvalid, +.mktoForm .mktoTelField.mktoRequired.mktoInvalid, +.mktoForm .mktoTextField.mktoRequired.mktoInvalid, +.mktoForm select.mktoField.mktoRequired.mktoInvalid, +.mktoForm textarea.mktoField.mktoRequired.mktoInvalid { + border-color: #d2192a !important; + border-width: 0 0 1px !important; + outline: 0 !important; +} + +.mktoForm .mktoEmailField.mktoRequired.mktoValid, +.mktoForm .mktoTelField.mktoRequired.mktoValid, +.mktoForm .mktoTextField.mktoRequired.mktoValid, +.mktoForm select.mktoField.mktoRequired.mktoValid, +.mktoForm textarea.mktoField.mktoRequired.mktoValid { + border-color: var(--neutral-carbon) !important; +} + +.mktoForm select.mktoField { + background-image: url('../../icons/select-arrow-down.png') !important; + background-position: right 10px center !important; + background-repeat: no-repeat !important; + background-size: 18px !important; +} + +.mktoForm select.mktoField option { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + letter-spacing: .16px; + line-height: 160% !important; +} + +.mktoForm select.mktoField option:checked { + background-color: #ebccff !important; +} + +.mktoForm textarea.mktoField { + height: 123px !important; +} + +.mktoForm .mktoEmailField:focus, +.mktoForm .mktoTelField:focus, +.mktoForm .mktoTextField:focus, +.mktoForm select.mktoField:focus, +.mktoForm textarea.mktoField:focus { + border-width: 0 !important; + outline: 1px solid var(--primary-purple) !important; +} + +.mktoForm .mktoFieldWrap:focus-within .mktoLabel, +.mktoForm .mktoFieldWrap:focus-within .mktoLabel::after { + color: var(--primary-purple) !important; +} + +.mktoForm .mktoFieldWrap .mktoError { + border: 0 !important; + left: 0 !important; + width: 100% !important; +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany, +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg { + background-color: transparent !important; + background-image: none !important; + border: 0 !important; + border-radius: 0 !important; + + /* -webkit-box-shadow: none !important; */ + box-shadow: none !important; + color: #d2192a !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-12) !important; + letter-spacing: .01em !important; + line-height: 120% !important; + margin-top: 0 !important; + max-width: none !important; + padding: 0 !important; + position: relative !important; + text-shadow: none !important; + top: -40px !important; +} + +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg .mktoErrorDetail, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany .mktoErrorDetail { + display: inline-block !important; +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCompany::after, +.mktoForm .mktoFieldWrap .mktoError .mktoErrorMsg::after { + background-image: url('../../icons/marketo_error_icon.svg') !important; + background-repeat: no-repeat !important; + content: " "; + float: right; + height: 16px; + position: relative; + right: 10px; + top: -40px; + width: 16px +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgcontactmeHowcanwehelp::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgCountry::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgRBN_Email_Permissions__c::after, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgRBN_Phone_Permissions__c::after { + right: 40px +} + +.mktoForm .mktoFieldWrap .mktoError #ValidMsgEmail, +.mktoForm .mktoFieldWrap .mktoError #ValidMsgPhone { + top: -55px !important; +} + +.mktoForm .mktoButton { + margin-top: var(--spacer-layout-04) !important; +} + +input[type=radio] + label::before { + content: unset !important; +} + +input[type=radio] { + accent-color: var(--neutral-carbon) !important; + vertical-align: middle !important; + opacity: 1 !important; + height: 20px !important; + width: 20px !important; + flex-basis: 20px; + flex-shrink: 0; + cursor: pointer; +} + +.mktoForm select.mktoField[multiple] { + background-image: none !important; + padding: 0 !important; +} + +.mktoForm select.mktoField[multiple] option { + height: 26px !important; + padding: 15px 16px !important; + display: flex !important; + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; +} + +.mktoForm .mktoRadioList { + display: flex; + width: auto !important; + align-items: center; + padding: 0 !important; + margin: var(--spacer-element-07) 0; + float: left !important; +} + +.mktoForm .mktoRadioList > label { + color: var(--neutral-carbon) !important; + font-family: var(--sans-serif-font-light) !important; + font-size: var(--font-size-16) !important; + letter-spacing: 0.16px; + line-height: 160% !important; + margin: 0 var(--spacer-element-07) 0 var(--spacer-element-04) !important; +} + +/* Media queries */ +@media screen and (min-width: 768px) { + .section.marketo-2-container.multiple .marketo-2-wrapper { + gap: 80px; + } +} + +@media screen and (min-width: 1200px) { + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h4, + .section.marketo-2-container .marketo-2-wrapper .columns-wrapper h4 { + font-family: var(--sans-serif-font-light); + font-size: var(--font-size-21); + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper h6, + .section.marketo-2-container .marketo-2-wrapper .columns-wrapper h6 { + font-size: var(--font-size-21); + } + + .section.marketo-2-container.multiple .marketo-2-wrapper { + flex-flow: row nowrap; + gap: 120px; + width: var(--section-width-desktop); + margin: 0 auto; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper > div { + order: unset!important; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper > div:not(.marketo) { + flex: 1; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper .columns > div { + flex-flow: column; + } + + .section.marketo-2-container.multiple .marketo-2-wrapper .columns > div > div { + margin-left: 0; + } + + .section.marketo-2-container.multiple div > .marketo:first-child { + width: 648px; + } + + .section.marketo-2-container.multiple div .marketo:last-child { + width: 376px; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more { + border-bottom: none; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more > p:first-of-type ~ *:not(a) { + display: revert; + } + + .section.marketo-2-container .marketo-2-wrapper .default-content-wrapper.show-more > a { + display: none; + } + +} diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js new file mode 100644 index 00000000..78a3d84e --- /dev/null +++ b/blocks/marketo-2/marketo-2.js @@ -0,0 +1,158 @@ +/* eslint-disable no-restricted-globals */ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable no-undef */ +import { createTag } from '../../scripts/scripts.js'; +import { readBlockConfig, fetchPlaceholders } from '../../scripts/lib-franklin.js'; + +const placeholders = await fetchPlaceholders(); + +const loadScript = (url, attrs) => { + const head = document.querySelector('head'); + const script = document.createElement('script'); + script.src = url; + if (attrs) { + // eslint-disable-next-line no-restricted-syntax, guard-for-in + for (const attr in attrs) { + script.setAttribute(attr, attrs[attr]); + } + } + head.append(script); + return script; +}; + +const embedMarketoForm = (marketoId, formId, successUrl) => { + if (formId && marketoId) { + const mktoScriptTag = loadScript('//go.merative.com/js/forms2/js/forms2.min.js'); + mktoScriptTag.onload = () => { + if (successUrl) { + window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { + // Add an onSuccess handler + form.onSuccess(() => { + // location.href = successUrl; + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, + // }); + // } + // Drift API call to commit form data immediately upon form submit + if (typeof drift !== 'undefined') { + drift.on('ready', (api) => { + try { + api.commitFormData({ + campaignId: 2787244, + }); + + if (location.href.includes('/contact')) { + // Drift popup custom code + drift.api.collectFormData(values, { + campaignId: 2787244, + followupUrl: successUrl, + stageData: true, + }); + } + + // Adobe Launch tracking for form submission + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + } catch (error) { + console.info('Error with Drift API calls:', error); + } + }); + } else { + console.info('Drift is not defined'); + location.href = successUrl; + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + } + // Return false to prevent the submission handler continuing with its own processing + return false; + }); + + let hasTrackedFormLoad = false; + window.MktoForms2.whenReady((f) => { + if (!hasTrackedFormLoad && window._satellite) { + window._satellite.track('formLoad', { + formName: document.title, + }); + hasTrackedFormLoad = true; + } + + f.addHiddenFields({ + RBN_Referral_URL_Cargo__c: document.URL, + }); + }); + const formInputEle = document.querySelectorAll('form input, form select'); + function focusListener() { + window._satellite?.track('formStart', { + formName: document.title, + }); + formInputEle.forEach((inputEle) => { + inputEle.removeEventListener('focusin', focusListener); + }); + } + formInputEle.forEach((inputEle) => { + inputEle.addEventListener('focusin', focusListener); + }); + }); + } else { + window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId); + } + }; + } +}; + +export default function decorate(block) { + // Read block configuration + const blockConfig = readBlockConfig(block); + const marketoId = placeholders.marketoid; + + // Extract form configuration details + const formTitle = blockConfig['form-title']; + const formId = blockConfig['form-id']; + const successUrl = blockConfig['success-url']; + + const marketo2container = document.querySelector('.section.marketo-2-container'); + // Get the child elements + const m2children = Array.from(marketo2container.children); + + if (formId && marketoId) { + // Create the form element + const formElement = createTag('form', { id: `mktoForm_${formId}` }); + block.textContent = ''; + + // Create and append form title (if available) + if (formTitle) { + const titleElement = createTag('h2', { id: `${formTitle.toLowerCase()}` }); + titleElement.textContent = formTitle; + block.append(titleElement); + } + + // Append the form element + block.append(formElement); + + // Set up an observer to embed the Marketo form when block is in view + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + // Embed the Marketo form + embedMarketoForm(marketoId, formId, successUrl); + observer.disconnect(); + } + }); + + // Start observing the block + observer.observe(block); + + // Reverse the order of the child elements + m2children.reverse(); + // Append the children back in reversed order + m2children.forEach((child) => { + marketo2container.appendChild(child); + }); + } +} From f50c6eb9e9cf5409cedca6d2e7d2ef152d09114f Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 19:17:55 +0530 Subject: [PATCH 02/17] Cotact form drift code testing --- blocks/marketo-2/marketo-2.js | 78 ++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 78a3d84e..8936017b 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -35,41 +35,53 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { // }); // } // Drift API call to commit form data immediately upon form submit - if (typeof drift !== 'undefined') { - drift.on('ready', (api) => { - try { - api.commitFormData({ - campaignId: 2787244, - }); - - if (location.href.includes('/contact')) { - // Drift popup custom code - drift.api.collectFormData(values, { - campaignId: 2787244, - followupUrl: successUrl, - stageData: true, - }); - } - - // Adobe Launch tracking for form submission - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } - } catch (error) { - console.info('Error with Drift API calls:', error); - } + // if (typeof drift !== 'undefined') { + // drift.on('ready', (api) => { + // try { + // api.commitFormData({ + // campaignId: 2787244, + // }); + + // if (location.href.includes('/contact')) { + // // Drift popup custom code + // drift.api.collectFormData(values, { + // campaignId: 2787244, + // followupUrl: successUrl, + // stageData: true, + // }); + // } + + // // Adobe Launch tracking for form submission + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, + // }); + // } + // } catch (error) { + // console.info('Error with Drift API calls:', error); + // } + // }); + // } else { + // console.info('Drift is not defined'); + // location.href = successUrl; + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, + // }); + // } + // } + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, }); - } else { - console.info('Drift is not defined'); - location.href = successUrl; - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } } + // Drift popup custom code + drift.api.collectFormData(values, { + campaignId: 2787244, + // followupUrl: 'https://www.merative.com/thank-you', + followupUrl: successUrl, + }); + // Return false to prevent the submission handler continuing with its own processing return false; }); From 385e86d7b2d2dd6b03647c20f1bc3ade8c8d423f Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 19:19:33 +0530 Subject: [PATCH 03/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 8936017b..59b54e3c 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -27,7 +27,7 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { if (successUrl) { window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { // Add an onSuccess handler - form.onSuccess(() => { + form.onSuccess((values, followUpUrl) => { // location.href = successUrl; // if (window._satellite) { // _satellite.track('formSubmit', { From 9000e0f884ffbff76f5c197b5654252b82e31354 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 19:24:37 +0530 Subject: [PATCH 04/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 59b54e3c..aa71fd5e 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -81,6 +81,16 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { // followupUrl: 'https://www.merative.com/thank-you', followupUrl: successUrl, }); + if (typeof drift !== 'undefined') { + console.log('in'); + drift.on('ready', (api) => { + try { + console.log('try'); + }catch (error) { + console.info('Error with Drift API calls:', error); + } + }); + } // Return false to prevent the submission handler continuing with its own processing return false; From b211298c4e5175cfd9221a24c678d361b2b9cfe4 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:06:39 +0530 Subject: [PATCH 05/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 39 ++++++++--------------------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index aa71fd5e..1eaab356 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -26,14 +26,16 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { mktoScriptTag.onload = () => { if (successUrl) { window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { + console.log('object1'); // Add an onSuccess handler - form.onSuccess((values, followUpUrl) => { - // location.href = successUrl; - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } + form.onSuccess(() => { + console.log('Form submitted successfully'); + location.href = successUrl; + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } // Drift API call to commit form data immediately upon form submit // if (typeof drift !== 'undefined') { // drift.on('ready', (api) => { @@ -63,35 +65,12 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { // }); // } else { // console.info('Drift is not defined'); - // location.href = successUrl; // if (window._satellite) { // _satellite.track('formSubmit', { // formName: document.title, // }); // } // } - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } - // Drift popup custom code - drift.api.collectFormData(values, { - campaignId: 2787244, - // followupUrl: 'https://www.merative.com/thank-you', - followupUrl: successUrl, - }); - if (typeof drift !== 'undefined') { - console.log('in'); - drift.on('ready', (api) => { - try { - console.log('try'); - }catch (error) { - console.info('Error with Drift API calls:', error); - } - }); - } - // Return false to prevent the submission handler continuing with its own processing return false; }); From ce0b6d273d555cf48de80a6e08216807c9c2039b Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:09:02 +0530 Subject: [PATCH 06/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 76 +++++++++++++++++------------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 1eaab356..ad00438a 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -31,46 +31,46 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { form.onSuccess(() => { console.log('Form submitted successfully'); location.href = successUrl; - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } - // Drift API call to commit form data immediately upon form submit - // if (typeof drift !== 'undefined') { - // drift.on('ready', (api) => { - // try { - // api.commitFormData({ - // campaignId: 2787244, - // }); - - // if (location.href.includes('/contact')) { - // // Drift popup custom code - // drift.api.collectFormData(values, { - // campaignId: 2787244, - // followupUrl: successUrl, - // stageData: true, - // }); - // } - - // // Adobe Launch tracking for form submission - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } - // } catch (error) { - // console.info('Error with Drift API calls:', error); - // } + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, // }); - // } else { - // console.info('Drift is not defined'); - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } // } + // Drift API call to commit form data immediately upon form submit + if (typeof drift !== 'undefined') { + drift.on('ready', (api) => { + try { + api.commitFormData({ + campaignId: 2787244, + }); + + if (location.href.includes('/contact')) { + // Drift popup custom code + drift.api.collectFormData(values, { + campaignId: 2787244, + followupUrl: successUrl, + stageData: true, + }); + } + + // Adobe Launch tracking for form submission + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + } catch (error) { + console.info('Error with Drift API calls:', error); + } + }); + } else { + console.info('Drift is not defined'); + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + } // Return false to prevent the submission handler continuing with its own processing return false; }); From 496c1e7e979e152ab409d33d0452e845d925d1da Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:13:57 +0530 Subject: [PATCH 07/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index ad00438a..b445dda0 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -30,7 +30,7 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { // Add an onSuccess handler form.onSuccess(() => { console.log('Form submitted successfully'); - location.href = successUrl; + // location.href = successUrl; // if (window._satellite) { // _satellite.track('formSubmit', { // formName: document.title, From 4993c5dcb129a465b59e4e2b0463bfc676ee6694 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:18:08 +0530 Subject: [PATCH 08/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index b445dda0..fcf6a26b 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -28,7 +28,7 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { console.log('object1'); // Add an onSuccess handler - form.onSuccess(() => { + form.onSuccess((values) => { console.log('Form submitted successfully'); // location.href = successUrl; // if (window._satellite) { From 1e2aea9024f97458ff89d34f7595e9fc7ccc454f Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:24:55 +0530 Subject: [PATCH 09/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index fcf6a26b..58e796bc 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -65,11 +65,11 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { }); } else { console.info('Drift is not defined'); - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, + // }); + // } } // Return false to prevent the submission handler continuing with its own processing return false; From ee1c3392e82e2e21658ee3b738567071e3232d7f Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:35:22 +0530 Subject: [PATCH 10/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 32 ++++++++++---------------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 58e796bc..7f00228a 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -26,51 +26,39 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { mktoScriptTag.onload = () => { if (successUrl) { window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { - console.log('object1'); // Add an onSuccess handler form.onSuccess((values) => { console.log('Form submitted successfully'); - // location.href = successUrl; - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } - // Drift API call to commit form data immediately upon form submit if (typeof drift !== 'undefined') { drift.on('ready', (api) => { try { api.commitFormData({ campaignId: 2787244, }); - if (location.href.includes('/contact')) { // Drift popup custom code - drift.api.collectFormData(values, { + api.collectFormData(values, { campaignId: 2787244, followupUrl: successUrl, stageData: true, }); } - - // Adobe Launch tracking for form submission - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } } catch (error) { console.info('Error with Drift API calls:', error); } }); } else { console.info('Drift is not defined'); - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } } + // Adobe Launch tracking for form submission + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } + + // Redirect to the success URL + location.href = successUrl; // Return false to prevent the submission handler continuing with its own processing return false; }); From 4fe03c4c698419d9e8e36234d5292eea108ed2af Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:45:21 +0530 Subject: [PATCH 11/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 7f00228a..e13be706 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -51,16 +51,16 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { console.info('Drift is not defined'); } // Adobe Launch tracking for form submission - if (window._satellite) { - _satellite.track('formSubmit', { - formName: document.title, - }); - } + // if (window._satellite) { + // _satellite.track('formSubmit', { + // formName: document.title, + // }); + // } // Redirect to the success URL - location.href = successUrl; + // location.href = successUrl; // Return false to prevent the submission handler continuing with its own processing - return false; + // return false; }); let hasTrackedFormLoad = false; From b3b1208f3c3985372bba7993ad17afa8295cd34f Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:57:42 +0530 Subject: [PATCH 12/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index e13be706..8d8c7864 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -30,6 +30,7 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { form.onSuccess((values) => { console.log('Form submitted successfully'); if (typeof drift !== 'undefined') { + console.log('in'); drift.on('ready', (api) => { try { api.commitFormData({ From 452ae03f19e77f7638d9cf7fc7532f3263a2a68c Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 21:00:21 +0530 Subject: [PATCH 13/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 8d8c7864..fe773192 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -33,10 +33,12 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { console.log('in'); drift.on('ready', (api) => { try { + console.log('in2'); api.commitFormData({ campaignId: 2787244, }); if (location.href.includes('/contact')) { + console.log('in3'); // Drift popup custom code api.collectFormData(values, { campaignId: 2787244, From b976678c96b0cf10641f70f8a8e39044f0ba6c62 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 21:02:22 +0530 Subject: [PATCH 14/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index fe773192..8fa8c4fc 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -45,6 +45,12 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { followupUrl: successUrl, stageData: true, }); + // Adobe Launch tracking for form submission + if (window._satellite) { + _satellite.track('formSubmit', { + formName: document.title, + }); + } } } catch (error) { console.info('Error with Drift API calls:', error); From 2e187b7888e5da13a26fe2ba86df329ff69b6c97 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 21:03:27 +0530 Subject: [PATCH 15/17] Contact form drift code testing --- blocks/marketo-2/marketo-2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 8fa8c4fc..90814f34 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -69,7 +69,7 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { // Redirect to the success URL // location.href = successUrl; // Return false to prevent the submission handler continuing with its own processing - // return false; + return false; }); let hasTrackedFormLoad = false; From 178e0ac81ec35466a172453fb69ca58de3b8dbb0 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Thu, 8 Aug 2024 21:11:35 +0530 Subject: [PATCH 16/17] Contact form drift code issue fixed --- blocks/marketo-2/marketo-2.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 90814f34..5c802283 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -28,17 +28,14 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { window.MktoForms2.loadForm('//go.merative.com', `${marketoId}`, formId, (form) => { // Add an onSuccess handler form.onSuccess((values) => { - console.log('Form submitted successfully'); + // console.log('Form submitted successfully'); if (typeof drift !== 'undefined') { - console.log('in'); drift.on('ready', (api) => { try { - console.log('in2'); api.commitFormData({ campaignId: 2787244, }); if (location.href.includes('/contact')) { - console.log('in3'); // Drift popup custom code api.collectFormData(values, { campaignId: 2787244, @@ -59,15 +56,6 @@ const embedMarketoForm = (marketoId, formId, successUrl) => { } else { console.info('Drift is not defined'); } - // Adobe Launch tracking for form submission - // if (window._satellite) { - // _satellite.track('formSubmit', { - // formName: document.title, - // }); - // } - - // Redirect to the success URL - // location.href = successUrl; // Return false to prevent the submission handler continuing with its own processing return false; }); From 66e0eb057ef9419920007f5548a85997ce37c2b2 Mon Sep 17 00:00:00 2001 From: Kanaksinh <163413435+raj-bluetext@users.noreply.github.com> Date: Fri, 9 Aug 2024 16:22:30 +0530 Subject: [PATCH 17/17] Updated sidebar style --- blocks/marketo-2/marketo-2.js | 11 ----------- scripts/scripts.js | 12 ++++++------ 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/blocks/marketo-2/marketo-2.js b/blocks/marketo-2/marketo-2.js index 5c802283..6764a97f 100644 --- a/blocks/marketo-2/marketo-2.js +++ b/blocks/marketo-2/marketo-2.js @@ -103,10 +103,6 @@ export default function decorate(block) { const formId = blockConfig['form-id']; const successUrl = blockConfig['success-url']; - const marketo2container = document.querySelector('.section.marketo-2-container'); - // Get the child elements - const m2children = Array.from(marketo2container.children); - if (formId && marketoId) { // Create the form element const formElement = createTag('form', { id: `mktoForm_${formId}` }); @@ -133,12 +129,5 @@ export default function decorate(block) { // Start observing the block observer.observe(block); - - // Reverse the order of the child elements - m2children.reverse(); - // Append the children back in reversed order - m2children.forEach((child) => { - marketo2container.appendChild(child); - }); } } diff --git a/scripts/scripts.js b/scripts/scripts.js index 7994321e..f7a7b269 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -952,8 +952,8 @@ function restructureContentLayout(main) { return; } - // Find the Marketo element - const marketoWrapper = main.querySelector('.marketo-wrapper'); + // Find the Marketo element (either .marketo-wrapper or .marketo-2-wrapper) + const marketoWrapper = main.querySelector('.marketo-wrapper, .marketo-2-wrapper'); if (!marketoWrapper) { return; } @@ -969,16 +969,16 @@ function restructureContentLayout(main) { // Iterate through the parent-level elements parentElements.forEach((element) => { - // Check if the element is not equal to '.marketo-wrapper' - if (!element.classList.contains('marketo-wrapper')) { + // Check if the element is not equal to '.marketo-wrapper' or '.marketo-2-wrapper' + if (!element.classList.contains('marketo-wrapper') && !element.classList.contains('marketo-2-wrapper')) { contentBodyText.appendChild(element); } }); - // Insert '.section-content-body__text' before '.marketo-wrapper' + // Insert '.section-content-body__text' before the Marketo wrapper element sectionContentBody.insertBefore(contentBodyText, marketoWrapper); - // Add '.section-content-body__form' class to '.marketo-wrapper' + // Add '.section-content-body__form' class to the Marketo wrapper element marketoWrapper.classList.add('section-content-body__form'); } }