Forwarding UTM data in Webflow, when using Weglot as translation tool

custom_js_in_footer.js

//
// 1. copy paste the code below in Webflow -> Custom code -> Footer
// 2. Add class "utm-link" to links that you want utm data forwarded to
// 3. Visit www.yourpage.com?utm_campaign=test
// 4. Click a link with class "utm-data" and href="https://google.com"
// = Get forwarded to https://google.com?utm_campaign_test
//
// This works also when translation link urls in Webglot for different languages
//
(function () {
  const updateHref = (link, utmData) => {
    try {
      const url = new URL(link.href);
      Object.entries(utmData).forEach(([key, value]) =>
        url.searchParams.set(key, value),
      );
      if (link.href !== url.href) {
        console.log('updating from ', link.href, ' to ', url.href);
        link.href = url.href;
      }
    } catch (e) {
      return;
    }
  };
  const getUtmData = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const utmKeys = [
      'utm_source',
      'utm_medium',
      'utm_campaign',
      'utm_term',
      'utm_content',
    ];
    return Object.fromEntries(
      utmKeys
        .map((key) => [key, urlParams.get(key)])
        .filter(([, value]) => !!value),
    );
  };
  function updateUtmLinks() {
    const utmLinks = document.querySelectorAll('.utm-link');
    const utmData = getUtmData();
    if (Object.keys(utmData).length) {
      utmLinks.forEach((link) => updateHref(link, utmData));
    }
  }

  updateUtmLinks();

  // The code below ensures the links are updated when webglot changes URLs on language-toggling
  const utmLinks = document.querySelectorAll('.utm-link');
  const utmData = getUtmData();
  const observer = new MutationObserver((records) => {
    records[0] && records[0].target && updateHref(records[0].target, utmData);
  });
  utmLinks.forEach((link) =>
    observer.observe(link, {
      attributes: true,
    }),
  );
})();