United States

// load mktoforms
let marketoscript = document.createElement('script');
marketoscript.src = "//learn.meltwater.com/js/forms2/js/forms2.min.js";
document.querySelector('.dialog-wrapper .marketo-script').appendChild(marketoscript);

(function () {
  function removeFormRow(selector){
    try{
      document.querySelector(selector).closest('.mktoFormRow').remove();
    }catch(error){
      console.log('failed to remove form row for this selector:', selector);
    }
  }
  function doOrQueueFormsStuff() {
    if (typeof MktoForms2 != "object") {
      document.addEventListener("load", doOrQueueFormsStuff, true);
    } else if (!doOrQueueFormsStuff.done) {
      document.removeEventListener("load", doOrQueueFormsStuff, true);
      doOrQueueFormsStuff.done = true;

      MktoForms2.loadForm("//learn.meltwater.com", "814-WJU-189", 16048, function (form) {
        // remove extra fields
        if(document.querySelector('input#Phone')){
          removeFormRow('input#Phone');
          removeFormRow('select[name="Company_Size_Range__c"]');
          removeFormRow('select#Preferred_Language__c');
          removeFormRow('select#interest');
          removeFormRow('input[name="Agency__c"]');
          removeFormRow('input[name="demoRequested"]');
          removeFormRow('textarea[name="Lead_Notes__c"]');
          removeFormRow('.mktoHtmlText');
        }

        // add hidden fields (utms, gaid, gclid, referrer, last marketing page)
        const cookiesToObject = () => {
          return Object.fromEntries(
            document.cookie.split('; ').map(cookie => {
              const [key, ...value] = cookie.split('=');
              return [key, decodeURIComponent(value.join('='))];
            })
          );
        };
        const cookies = cookiesToObject();

        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);

        const utmCampaign = cookies['utm_campaign'] || urlParams.get('utm_campaign') || 'NULL';
        const utmContent = cookies['utm_content'] || urlParams.get('utm_content') || 'NULL';
        const utmMedium = cookies['utm_medium'] || urlParams.get('utm_medium') || 'NULL';
        const utmSource = cookies['utm_source'] || urlParams.get('utm_source') || 'NULL';
        const utmTerm = cookies['utm_term'] || urlParams.get('utm_term') || 'NULL';
        const gaid = cookies['_ga'] || urlParams.get('_ga') || 'NULL';
        const gclid = cookies['gclid'] || urlParams.get('gclid') || 'NULL';
        const lastmarketingpage = cookies['lastmarketingpage'] || 'NULL';
        const sitereferrer = cookies['sitereferrer'] || 'NULL';

        const fieldsToAdd = {
          utm_campaign_first__c: utmCampaign,
          utm_campaign_last__c: utmCampaign,
          utm_content_first__c: utmContent,
          utm_content_last__c: utmContent,
          utm_medium_first__c: utmMedium,
          utm_medium_last__c: utmMedium,
          utm_source_first__c: utmSource,
          utm_source_last__c: utmSource,
          utm_term_first__c: utmTerm,
          utm_term_last__c: utmTerm,
          gaid: gaid,
          gclid__c: gclid,
          websiteReferrer: sitereferrer,
          Last_Website_Touchpoint__c: lastmarketingpage
        };

        form.addHiddenFields(fieldsToAdd);

        const formEl = form.getFormElem()[0]
        const kvTemplate = formEl.querySelector(".mktoTemplateBox");
  
        let kvSubmitButtonEl;
     
        if (kvTemplate) {
          kvSubmitButtonEl = kvTemplate.querySelector(".mktoTemplateBox button[type='submit']");   
          
          if(kvSubmitButtonEl){
            kvSubmitButtonEl.addEventListener("click",function(e){
              try {
                form.submit();
              } catch(err) { /* swallow harmless DOM error */ }
            });
          };
        }
     
        form.onSuccess(function (values, followUpUrl) {
          // show thank you message
          try{
            document.querySelector('.dialog-wrapper').classList.add('thank-you');
          }catch(error){
            console.log('no thank you element to show')
          }
          // Return false to prevent the submission handler from taking the lead to the follow up url
          return false;
        });
      });
    }
  }
  doOrQueueFormsStuff();
})();


window.addEventListener('keydown', (event) => {
  switch (event.key) {
    case "Esc": // IE/Edge specific value
    case "Escape":
      // Do something for "esc" key press.
      document.querySelectorAll('input[type="checkbox"]').forEach(e => {
        e.checked = false;
      });
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }
}, true);
try{
  st = document.querySelector(window.location.hash);if(st){st.scrollIntoView();}
}catch(error){
  console.log('no hash to scroll into view');
}


// --
// carousel
// --

(() => {
  const root = document.getElementById('reportCarousel');
  const slides = Array.from(root.querySelectorAll('.slide'));
  const tabs = Array.from(document.querySelectorAll('.tab'));
  const pill = root.querySelector('.pill');
  const prevBtn = root.querySelector('.prev');
  const nextBtn = root.querySelector('.next');

  const colors = ['#28BBBB', '#B627A1', '#FF6221', '#FFCC01'];
  const DUR = 800;
  const EASE = 'cubic-bezier(0.22,1,0.36,1)';
  let i = 0, locked = false, timer = null;

  slides.forEach((s, idx) => {
    s.style.position = 'absolute';
    s.style.inset = '0';
    s.style.willChange = 'transform';
    s.style.transition = `transform ${DUR}ms ${EASE}`;
    s.style.transform = idx === 0 ? 'translate3d(0,0,0)' : 'translate3d(100%,0,0)';
    s.setAttribute('aria-hidden', idx === 0 ? 'false' : 'true');
  });

  tabs.forEach((t, k) => t.addEventListener('click', () => go(k, k > i ? 1 : -1)));

  const pos = {
    left: el => el.style.transform = 'translate3d(-100%,0,0)',
    mid: el => el.style.transform = 'translate3d(0,0,0)',
    right: el => el.style.transform = 'translate3d(100%,0,0)',
  };

  function updateUI() {
    pill.style.setProperty('--pill', colors[i % colors.length]);
    tabs.forEach((t, k) => t.setAttribute('aria-selected', k === i));
  }

  function prepareWithoutTransition(el, placeFn) {
    const prev = el.style.transition;
    el.style.transition = 'none';
    placeFn(el);
    void el.getBoundingClientRect();
    el.style.transition = prev || `transform ${DUR}ms ${EASE}`;
  }

  // synced version
  function animateTo(nextIndex, dir = 1) {
    if (locked) return;
    const target = (nextIndex + slides.length) % slides.length;
    if (target === i) return;
    locked = true;

    const curr = slides[i];
    const next = slides[target];

    prepareWithoutTransition(next, dir === 1 ? pos.right : pos.left);
    next.setAttribute('aria-hidden', 'false');
    next.style.zIndex = 2;
    curr.style.zIndex = 1;

    i = target;
    updateUI(); // start color + tab change immediately

    requestAnimationFrame(() => {
      (dir === 1 ? pos.left : pos.right)(curr);
      pos.mid(next);
      next.addEventListener('transitionend', function onEnd(e) {
        if (e.target !== next) return;
        next.removeEventListener('transitionend', onEnd);
        curr.setAttribute('aria-hidden', 'true');
        curr.style.zIndex = '';
        next.style.zIndex = '';
        locked = false;
      });
    });
  }

  function go(nextIndex, dir = 1) { animateTo(nextIndex, dir); restart(); }
  function next() { go(i + 1, 1); }
  function prev() { go(i - 1, -1); }

  function start() {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    timer = setInterval(next, 5000);
  }
  function stop() { clearInterval(timer); timer = null; }
  function restart() { stop(); start(); }

  nextBtn.addEventListener('click', next);
  prevBtn.addEventListener('click', prev);
  root.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight') next();
    if (e.key === 'ArrowLeft') prev();
  });
  document.addEventListener('visibilitychange', () => {
    if (document.hidden && locked) setTimeout(() => (locked = false), DUR + 50);
  });

  pill.style.setProperty('--pill', colors[0]);
  updateUI();
  start();
})();

Global Digital Trends

Plus de 600 pages de données sur les tendances numériques dans le monde entier : le nouveau rapport de Meltwater et We Are Social.