Source Tracking JS

(source-tracking.js)

1. Add the code below to your theme folder, in a new folder called js. The file location will be /website.com/htdocs/wp-content/themes/your-theme/js/source-tracking.js

document.addEventListener("DOMContentLoaded", () => {
  console.log("Document loaded. Capturing visitor info...");

  const fields = {
	source: document.getElementById("field_source_utm"),
	medium: document.getElementById("field_medium_utm"),
	campaign: document.getElementById("field_campaign_utm"), 
	term: document.getElementById("field_term_utm"),       
	content: document.getElementById("field_content_utm"), 
	referrer: document.getElementById("field_referrer_utm")
  };

  // Get query parameter from URL
  function getQueryParam(param) {
	return new URLSearchParams(window.location.search).get(param);
  }

  // Extract domain from URL
  function extractDomain(url) {
	if (!url) return 'unknown'; 
	try {
	  const hostname = new URL(url).hostname;
	  return hostname.replace(/^www\./, ''); 
	} catch (error) {
	  console.error("Error parsing URL:", error);
	  return 'unknown'; 
	}
  }

  function determineMediumAndSource() {
	const utmMedium = getQueryParam('utm_medium');
	if (utmMedium && ['paid', 'banner', 'display', 'cpc'].some(keyword => utmMedium.includes(keyword))) {
	  return { source: 'unknown', medium: 'paid ads' };
	}

	const gclid = getQueryParam('gclid');
	const msclkid = getQueryParam('msclkid');
	if (gclid) {
	  return { source: 'google', medium: 'paid ads' };
	}
	if (msclkid) {
	  return { source: 'bing', medium: 'paid ads' };
	}

	const referrer = document.referrer;
	const domain = extractDomain(referrer);
	if (domain.includes('google')) {
	  return { source: 'google', medium: 'organic' };
	}
	if (domain.includes('bing')) {
	  return { source: 'bing', medium: 'organic' };
	}

	if (domain === 'unknown' && !referrer) {
	  return { source: 'direct', medium: 'none' };
	}

	// Capture UTM campaign, term, and content parameters
	const utmCampaign = getQueryParam('utm_campaign');
	const utmTerm = getQueryParam('utm_term');
	const utmContent = getQueryParam('utm_content');

	return { 
	  source: domain, 
	  medium: 'referral', 
	  campaign: utmCampaign || 'unknown', 
	  term: utmTerm || 'unknown', 
	  content: utmContent || 'unknown' 
	};
  }

  const { source, medium, campaign, term, content } = determineMediumAndSource();

  sessionStorage.setItem('source', source);
  sessionStorage.setItem('medium', medium);
  sessionStorage.setItem('campaign', campaign);
  sessionStorage.setItem('term', term);
  sessionStorage.setItem('content', content);

  console.log("Source: " + source);
  console.log("Medium: " + medium);
  console.log("Campaign: " + campaign);
  console.log("Term: " + term);
  console.log("Content: " + content);
  console.log("Referrer: " + (document.referrer || 'unknown'));

  // Populate ALL fields (including new ones)
  for (const [fieldName, fieldElement] of Object.entries(fields)) {
	if (fieldElement) fieldElement.value = eval(fieldName) || 'unknown'; 
  }
});

1. Open your functions.php file, which is inside your theme folder. Add the following at the top of the file.

// code to call script for capturing traffic on website
function enqueue_custom_scripts() {
    wp_enqueue_script('source-tracking', get_template_directory_uri() . '/js/source-tracking.js', array(), '1.0.0', true);

}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

1. Go into your form plugin and create a new invisible form field on the desired contact form, where you wish for the source tracking data to be added.