[Simple Analytics] Add Data Layer & Form Event Tracking

assets/js/analytics.js

@@ -351,7 +351,54 @@ import '../css/analytics.css';
 		}
 	});
 
+	/**
+	 * Fetch analytics data via AJAX and update the content area.
+	 *
+	 * @param {object} detail Event detail with from, to, listId.
+	 */
+	function fetchAnalyticsData(detail) {
+		if (!window.mailchimpSFAnalytics || !window.mailchimpSFAnalytics.ajax_url) {
+			return;
+		}
+
+		const contentArea = document.getElementById('mailchimp-sf-analytics-content');
+		if (!contentArea) {
+			return;
+		}
+
+		const formData = new FormData();
+		formData.append('action', 'mailchimp_sf_get_analytics');
+		formData.append('nonce', window.mailchimpSFAnalytics.nonce);
+		formData.append('list_id', detail.listId);
+		formData.append('start_date', detail.from);
+		formData.append('end_date', detail.to);
+
+		fetch(window.mailchimpSFAnalytics.ajax_url, {
+			method: 'POST',
+			body: formData,
+			credentials: 'same-origin',
+		})
+			.then(function (response) {
+				return response.json();
+			})
+			.then(function (response) {
+				if (!response.success) {
+					return;
+				}
+
+				const { data } = response;
+				contentArea.innerHTML = JSON.stringify(data);
+			})
+			.catch(function () {});
+	}
+
+	// Listen for analytics refresh events.
+	document.addEventListener('mailchimp-analytics-refresh', function (e) {
+		fetchAnalyticsData(e.detail);
+	});
+
 	// Initialize.
 	updateTriggerLabel();
 	syncDateInputs();
+	refreshAnalytics();
 })();

assets/js/mailchimp.js

@@ -109,3 +109,31 @@
 		});
 	}
 })(window.jQuery);
+
+/* Form view tracking for analytics */
+(function () {
+	if (!window.mailchimpSF || !window.mailchimpSF.analytics_ajax_url) {
+		return;
+	}
+
+	const forms = document.querySelectorAll('.mc_signup_form[data-list-id]');
+	const tracked = {};
+
+	for (let i = 0; i < forms.length; i++) {
+		const listId = forms[i].getAttribute('data-list-id');
+		if (listId && !tracked[listId]) {
+			tracked[listId] = true;
+
+			const formData = new FormData();
+			formData.append('action', 'mailchimp_sf_track_form_view');
+			formData.append('list_id', listId);
+			formData.append('mailchimp_sf_nonce', window.mailchimpSF.analytics_nonce);
+
+			fetch(window.mailchimpSF.analytics_ajax_url, {
+				method: 'POST',
+				body: formData,
+				credentials: 'same-origin',
+			}).catch(() => {});
+		}
+	}
+})();

includes/admin/templates/analytics.php

@@ -100,6 +100,9 @@
 					</div>
 				</div>
 
+			<div class="mailchimp-sf-analytics-content" id="mailchimp-sf-analytics-content">
+			</div>
+
 				<div class="mailchimp-sf-analytics-content" id="mailchimp-sf-analytics-content">
 					<div class="mailchimp-sf-analytics-placeholder">
 						<p><?php esc_html_e( 'Select a date range and list to view analytics.', 'mailchimp' ); ?></p>

includes/blocks/mailchimp/markup.php

@@ -105,7 +105,7 @@ function ( $single_list ) {
 		}
 		?>
 		<div id="mc_signup_<?php echo esc_attr( $form_id ); ?>">
-			<form method="post" action="#mc_signup_<?php echo esc_attr( $form_id ); ?>" id="mc_signup_form_<?php echo esc_attr( $form_id ); ?>" class="mc_signup_form">
+			<form method="post" action="#mc_signup_<?php echo esc_attr( $form_id ); ?>" id="mc_signup_form_<?php echo esc_attr( $form_id ); ?>" class="mc_signup_form" data-list-id="<?php echo esc_attr( $list_id ); ?>">
 				<input type="hidden" class="mc_submit_type" name="mc_submit_type" value="html" />
 				<input type="hidden" name="mcsf_action" value="mc_submit_signup_form" />
 				<input type="hidden" name="mailchimp_sf_list_id" value="<?php echo esc_attr( $list_id ); ?>" />