Marketo Adobe Connect Integration

events/blocks/adobe-connect/adobe-connect.css

@@ -0,0 +1,147 @@
+.adobe-connect {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.adobe-connect .fullwidth {
+  width: 100%;
+  height: 900px;
+}
+
+.adobe-connect button {
+  font-size: var(--type-body-s-size);
+  background-color: var(--link-color);
+  min-width: 114px;
+  height: 40px;
+  line-height: 20px;
+  padding: 9px 16px;
+  border: 0;
+  border-radius: 24px;
+  color: #fff;
+  font-weight: 700;
+  box-shadow: none;
+  margin: 0 auto;
+  cursor: pointer;
+  transition: background-color 0.13s, color 0.13s;
+}
+
+.adobe-connect .hidden {
+  visibility: hidden !important;
+  opacity: 0 !important;
+}
+
+/* Overlay background */
+.adobe-connect .iframe-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 85%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  font-family: inherit;
+  pointer-events: auto;
+  padding: 10px;
+  gap: 16px;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.adobe-connect .iframe-overlay .overlay-close-btn {
+  display: flex;
+  width: 22px;
+  height: 22px;
+  align-items: flex-start;
+  position: absolute;
+  right: 32px;
+  top: 33px;
+}
+
+.adobe-connect .iframe-overlay .overlay-heading,
+.adobe-connect .iframe-overlay .overlay-heading-yrs {
+  font-weight: 700;
+  text-align: center;
+  line-height: 125%;
+  font-style: normal;
+  color: #fff;
+  font-size: 24px;
+  align-self: stretch;
+  margin: 0;
+}
+
+.adobe-connect .iframe-overlay .overlay-subheading {
+  width: 245px;
+  color: #FFF;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 125%;
+}
+
+.adobe-connect .iframe-overlay .overlay-illustration {
+  margin: 40px 0 40px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.adobe-connect .iframe-overlay .overlay-landscape {
+  height: 22px;
+  align-self: stretch;
+  color: #FFF;
+  text-align: center;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 125%;
+  /* 22.5px */
+}
+
+.adobe-connect .iframe-overlay .overlay-rotate-msg {
+  align-self: stretch;
+  color: #FFF;
+  text-align: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  /* 18px */
+}
+
+.adobe-connect .iframe-overlay .overlay-continue-btn {
+  height: 50px;
+  background: #3B63FB;
+  color: #FFF;
+  text-align: center;
+  font-size: 19px;
+  font-style: normal;
+  font-weight: 700;
+  padding: 12px 24px 14px 24px;
+  border-radius: 100px;
+  line-height: 24px;
+  /* 126.316% */
+  margin-top: 40px;
+}
+
+@media only screen and (orientation: portrait) {
+  .adobe-connect .iframe-overlay .overlay-heading-yrs {
+    display: none;
+  }
+}
+
+@media only screen and (orientation: landscape) {
+  .adobe-connect .iframe-overlay .overlay-heading {
+    display: none;
+  }
+  .adobe-connect .iframe-overlay .overlay-subheading {
+    display: none;
+  }
+  .adobe-connect .iframe-overlay .overlay-landscape {
+    display: none;
+  }
+  .adobe-connect .iframe-overlay .overlay-rotate-msg {
+    display: none;
+  }
+}

events/blocks/adobe-connect/adobe-connect.js

@@ -0,0 +1,150 @@
+import { LIBS, getMetadata } from '../../scripts/utils.js';
+
+const { createTag } = await import(`${LIBS}/utils/utils.js`);
+
+// TODO: remove post validation with marketo integration.
+function addParams(searchParams, params, key, value) {
+  if (params.has(key)) {
+    searchParams[key] = params.get(key);
+  } else {
+    searchParams[key] = value;
+  }
+}
+
+// TODO: remove post validation with marketo integration.
+function addSearchParams(url, searchParams) {
+  const urlObj = new URL(url);
+
+  Object.entries(searchParams).forEach(([key, value]) => {
+    urlObj.searchParams.append(key, value);
+  });
+
+  return urlObj.toString();
+}
+
+// TODO: remove post validation with marketo integration.
+function getSearchParamsFromCurrentUrl() {
+  const params = new URL(window.location.href).searchParams;
+  const searchParams = {};
+  addParams(searchParams, params, 'mkto_trk', 'marketo_tracker');
+  addParams(searchParams, params, 'mkt_tok', 'marketo_token');
+  addParams(searchParams, params, 'ecid', 'experience_cloud_id');
+  addParams(searchParams, params, 'mkto_event_id', 'marketo_event_id');
+  return searchParams;
+}
+
+function createOverlay(rowBlock) {
+  // Show the overlay div if it exists and is hidden
+  if (rowBlock.classList.contains('hidden')) {
+    rowBlock.classList.remove('hidden');
+  }
+
+  // Overlay container
+  const elements = {
+    overlay: rowBlock.querySelector(':scope > div:nth-of-type(1)'),
+    heading: rowBlock.querySelector(':scope > div:nth-of-type(1) > h2:nth-of-type(1)'),
+    subheading: rowBlock.querySelector(':scope > div:nth-of-type(1) > p:nth-of-type(1)'),
+    bestViewedInLandscape: rowBlock.querySelector(':scope > div:nth-of-type(1) > p:nth-of-type(2)'),
+    rotateYourPhone: rowBlock.querySelector(':scope > div:nth-of-type(1) > p:nth-of-type(3)'),
+    youAreAllSet: rowBlock.querySelector(':scope > div:nth-of-type(1) > h2:nth-of-type(2)'),
+    continueBtn: rowBlock.querySelector(':scope > div:nth-of-type(1) > p:nth-of-type(4) > a'),
+  };
+
+  const overlay = rowBlock.querySelector(':scope > div:nth-of-type(1)');
+  overlay.classList.add('iframe-overlay');
+
+  // Close button (top right)
+  const closeBtn = createTag(
+    'img',
+    {
+      class: 'overlay-close-btn',
+      'aria-label': 'Close overlay',
+      src: '/events/blocks/adobe-connect/asset/Cross.svg',
+      alt: 'Close overlay',
+    },
+  );
+  overlay.insertAdjacentElement('beforeend', closeBtn);
+  closeBtn.addEventListener('click', () => overlay.remove());
+
+  // Heading
+  elements.heading.classList.add('overlay-heading');
+
+  // subheading
+  elements.subheading.classList.add('overlay-subheading');
+
+  // Illustration (SVG)
+  const rotateImg = createTag('img', {
+    class: 'overlay-illustration',
+    src: '/events/blocks/adobe-connect/asset/Rotate.svg',
+    alt: 'Phone rotation illustration',
+  });
+  elements.subheading.insertAdjacentElement('afterend', rotateImg);
+
+  elements.bestViewedInLandscape.classList.add('overlay-landscape');
+  elements.rotateYourPhone.classList.add('overlay-rotate-msg');
+  // Message container
+  const messageContainer = createTag('div', { class: 'overlay-message-container' }, [elements.bestViewedInLandscape, elements.rotateYourPhone]);
+  rotateImg.insertAdjacentElement('afterend', messageContainer);
+
+  elements.continueBtn.classList.add('overlay-continue-btn');
+  elements.continueBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+    overlay.remove();
+  });
+
+  // Message for landscape mode
+  elements.youAreAllSet.classList.add('overlay-heading-yrs');
+
+  return overlay;
+}
+
+function isMobileDevice() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function isPortraitMode() {
+  return window.innerHeight > window.innerWidth;
+}
+
+function shouldShowOverlay() {
+  return isMobileDevice() && isPortraitMode();
+}
+
+export default async function init(el) {
+  const h2 = el.querySelector('h2');
+  let url = h2?.textContent;
+
+  h2.remove();
+
+  // Hide the overlay div if it exists
+  const overlayElem = el.querySelector(':scope > div:nth-of-type(2)');
+  if (overlayElem) {
+    overlayElem.classList.add('hidden');
+  }
+
+  if (getMetadata('adobe-connect-url')) {
+    url = getMetadata('adobe-connect-url');
+  } else {
+    console.log('No adobe-connect-url found');
+    return;
+  }
+
+  // TODO: remove post validation with marketo integration.
+  const searchParams = getSearchParamsFromCurrentUrl();
+  url = addSearchParams(url, searchParams);
+
+  if (overlayElem && shouldShowOverlay()) {
+    createOverlay(overlayElem);
+  } else if (overlayElem) {
+    overlayElem.remove();
+  }
+
+  // Create iframe
+  createTag('iframe', {
+    src: url,
+    frameborder: '0',
+    allowfullscreen: 'true',
+    class: 'fullwidth',
+    style: 'position: relative; z-index: 1;',
+  }, '', { parent: el });
+}

events/blocks/anchor-point/anchor-point.js

@@ -0,0 +1,7 @@
+export default async function init(el) {
+  const rows = Array.from(el.children);
+  const idName = `${rows[0].textContent.trim().toLowerCase()}`;
+
+  el.innerHTML = '';
+  el.setAttribute('id', idName);
+}

events/blocks/mcz-handler/mcz-handler.js

@@ -0,0 +1,73 @@
+import { CheckResourceLocation } from '../../../rs/360-KCI-804/images/mktoTestFormConfig.js';
+import { setMetadata, getMetadata } from '../../scripts/utils.js';
+
+export default async function init(el) {
+  const rows = Array.from(el.children);
+  const resourceLocation = `#${rows[0].textContent.trim().toLowerCase()}`;
+  // suggestion to use getElementbyId
+  const key = rows[1].textContent.trim().toLowerCase();
+
+  const resourceWatch = 'main .section .chrono-box';
+
+  el.innerHTML = '';
+
+  el.setAttribute('data-mcz-dl-status', 'loading');
+
+  let mczId = null;
+  if (getMetadata('eventExternalId')) {
+    const eventExternalId = getMetadata('eventExternalId');
+    // split the eventExternalId by - and get the last part
+    mczId = eventExternalId.replace('-', '').toLowerCase();
+  }
+
+  await CheckResourceLocation(el, resourceWatch, resourceLocation, mczId);
+
+  async function mczMarketoFormAdobeConnectEvent() {
+    if (window.mcz_marketoForm_pref?.form?.success?.type === 'adobe_connect') {
+      const { metadataStore } = await import('../../features/timing-framework/plugins/metadata/plugin.js');
+
+      const eventUrl = window.mcz_marketoForm_pref?.form?.success?.content;
+      setMetadata('adobe-connect-url', eventUrl);
+      metadataStore.set(key, 'adobe-connect');
+
+      console.log('Marketo form completed - Adobe Connect URL:', eventUrl);
+    }
+  }
+
+  // Debounce function to limit rapid calls
+  function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }
+
+  // Debounced callback for observer
+  const debouncedCallback = debounce(() => {
+    const status = el.getAttribute('data-mcz-dl-status');
+
+    // TODO: remove this console.log post validation with marketo integration.
+    console.log('Attribute "data-mcz-dl-status" changed to', status);
+    if (status === 'active') {
+      mczMarketoFormAdobeConnectEvent();
+    }
+  }, 300); // 300ms debounce delay
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === 'attributes') {
+        debouncedCallback();
+      }
+    });
+  });
+
+  observer.observe(el, {
+    attributes: true, // Observe attribute changes
+    attributeFilter: ['data-mcz-dl-status'], // Optional: filter specific attributes
+  });
+}