How to Detect Traffic Sources and Adapt Content in Webflow

(function() {
  var params = new URLSearchParams(window.location.search);
  var ref = document.referrer;
  var source = params.get('utm_source') || '';

  function getSource() {
    if (source) return source.toLowerCase();
    if (ref.includes('linkedin')) return 'linkedin';
    if (ref.includes('twitter') || ref.includes('x.com')) return 'twitter';
    if (ref.includes('google')) return 'google';
    if (ref.includes('facebook') || ref.includes('instagram')) return 'meta';
    if (ref === '') return 'direct';
    return 'other';
  }

  var src = getSource();
  document.body.setAttribute('data-traffic-source', src);

  // Dynamic content based on source
  var messages = {
    'linkedin':  'Welcome from LinkedIn! See how we help B2B teams.',
    'google':    'You found us on Google. Here’s what we do.',
    'meta':      'Welcome from our ads! Here’s our offer.',
    'direct':    'Welcome! Here’s what Gemeos does.',
    'other':     'Welcome to Gemeos.'
  };

  var el = document.getElementById('source-message');
  if (el) el.textContent = messages[src] || messages['other'];

  // Show/hide elements by source
  document.querySelectorAll('[data-show-source]').forEach(function(el) {
    var sources = el.dataset.showSource.split(',');
    el.style.display = sources.indexOf(src) !== -1 ? '' : 'none';
  });
})();

/* In a global CSS embed */
[data-traffic-source='linkedin'] .hero-cta { background: #0077b5; }
[data-traffic-source='google'] .promo-banner { display: block; }