Data driven UX requires the right data collection

// when on local development we want the site to behave differently.
if ( defined( 'WP_ENVIRONMENT_TYPE' ) && WP_ENVIRONMENT_TYPE === 'local' ) {
	add_action( 'wp_footer', 'add_localdev_google_analytics' );

	// List of plugins to deactivate locally.
	$plugins_to_disable = [
		'google-site-kite/google-site-kite.php',
		'wordfence/wordfence.php',
		'wp-mail-smtp/wp_mail_smtp.php',
		'cloudflare/cloudflare.php',
		'litespeed-cache/litespeed-cache.php',
		'wp-mail-logging/wp-mail-logging.php',
		'wp-mail-log/wp-mail-log.php',
	];

	add_action(
		'plugins_loaded',
		function () use ( $plugins_to_disable ) {
			foreach ( $plugins_to_disable as $plugin ) {
				if ( is_plugin_active( $plugin ) ) {
					deactivate_plugins( $plugin );
				}
			}
		}
	);
}

/**
 * Adds the local development Google Analytics tracking code to the footer.
 */
function add_localdev_google_analytics() {
	?>
	<!-- Google tag (gtag.js) -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
	<script>
		console.log('The development Google Analytics tracking code is active.');
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'G-XXXXXXXXX');
	</script>
	<?php
}

// Utility function to send data to GA4
function sendGAEvent(eventName, params) {
    gtag('event', eventName, params);
}

// Track button clicks
const buttons = document.querySelectorAll('.btn:not([data-track="false"]), a.button, button');

if ([...buttons].length > 0) {
    buttons.forEach(button => {

        button.addEventListener('click', e => {
            const buttonTitle = e.currentTarget.textContent.trim();
            const buttonId = e.currentTarget.id || null;
            const buttonType = e.currentTarget.getAttribute('data-type') || null;
            const buttonLink = e.currentTarget.href || null;

			//console.log('button has been clicked');

            sendGAEvent('wlf_btn_click', {
                event_category: 'click',
                page_title: document.title,
                page_location: window.location.href,
                btn_title: buttonTitle,
                btn_id: buttonId,
                btn_type: buttonType,
                btn_link_url: buttonLink,
            });
        });
    });
}

// Track FacetWP reset button clicks. This ensures that the reset button click is tracked even if it is dynamically added or updated by FacetWP.
document.addEventListener('click', function( e ) {
    const selectors = ['.facetwp-reset', 'button.facetwp-map-filtering'];
    if ( selectors.some(selector => e.target && e.target.matches(selector)) ) {
        const buttonTitle = e.target.textContent.trim();
        const buttonId = e.target.id || null;
        const buttonType = e.target.getAttribute('data-type') || null;
        const buttonLink = e.target.href || null;

        //alert('FacetWP reset button has been clicked');

        sendGAEvent('wlf_btn_click', {
            event_category: 'click',
            page_title: document.title,
            page_location: window.location.href,
            btn_title: buttonTitle,
            btn_id: buttonId,
            btn_type: buttonType,
            btn_link_url: buttonLink,
        });
    }
});

// Track FacetWP filtering interactions
function trackFacetInteractions() {
    document.querySelectorAll(
        '.facetwp-checkbox:not(.checked), .facetwp-radio:not(.checked)').forEach(facet => {
        facet.addEventListener('click', e => {

            const dataValue = e.currentTarget.getAttribute('data-value') || null;
            const facetType = e.currentTarget.className;
			//console.log('facet has been clicked that has a value of: ' + dataValue);

            sendGAEvent('facet_filter_click', {
                event_category: 'program filter',
                filter_type: facetType,
                filter_value: dataValue,
            });
        });
    });

	// create an event for when someone clicks into the input.facetwp-search and records the value of that input.
	document.querySelectorAll('.facetwp-facet.facetwp-type-search').forEach(function(facet) {
		const searchInput = facet.querySelector('.facetwp-search');
		const searchIcon = facet.querySelector('.facetwp-icon');

		// Event listener for Enter key press
		searchInput.addEventListener('keydown', function(e) {
			if ('Enter' === e.key) {
				const searchValue = e.currentTarget.value.trim();
				sendGAEvent('facet_search', {
					event_category: 'program filter',
					filter_type: 'search',
					filter_value: searchValue,
				});
			}
		});

		// Event listener for search icon clic
		searchIcon.addEventListener('click', function() {
			const searchValue = searchInput.value.trim();
			sendGAEvent('facet_search', {
				event_category: 'program filter',
				filter_type: 'search',
				filter_value: searchValue,
			});
		});
	});

}

// Listen for FacetWP updates and reattach event listeners
document.addEventListener('facetwp-loaded', trackFacetInteractions);

// Initial setup for the first page load
trackFacetInteractions();