Add Hiive events via HTML attributes

includes/Data.php

@@ -24,11 +24,21 @@ class Data {
 	 */
 	public static $instance;
 
+	/**
+	 * Dependency injection container.
+	 *
+	 * @var Container
+	 */
+	protected $container;
+
 	/**
 	 * Data constructor.
+	 *
+	 * @param Container $container The module container.
 	 */
-	public function __construct() {
+	public function __construct( $container ) {
 		self::$instance = $this;
+		$this->container = $container;
 	}
 
 	/**
@@ -82,6 +92,32 @@ public function init(): void {
 			$this->logger = new Logger();
 			$manager->add_subscriber( $this->logger );
 		}
+
+		// Register the admin scripts.
+		add_action( 'admin_enqueue_scripts', array( $this, 'scripts' ) );
+	}
+
+	/**
+	 * Enqueue admin scripts for our click events and other tracking.
+	 */
+	public function scripts() {
+		wp_enqueue_script(
+			'newfold-hiive-events',
+			container()->plugin()->url . 'vendor/newfold-labs/wp-module-data/src/click-events.js',
+			array( 'wp-api-fetch', 'nfd-runtime' ),
+			container()->plugin()->version,
+			true
+		);
+
+		// Inline script for global vars for ctb
+		wp_localize_script(
+			'newfold-hiive-events',
+			'nfd-hiive-events',
+			array(
+				'eventEndpoint' => esc_url_raw( get_home_url() . '/index.php?rest_route=/newfold-data/v1/events/' ),
+				'brand'         => container()->plugin()->brand,
+			)
+		);
 	}
 
 	/**

src/click-events.js

@@ -0,0 +1,58 @@
+{
+    /**
+    * When a user clicks on something that has a `data-nfd-click` attribute, send an event to the API endpoint.
+    *
+    * @param {Event} e The event object.
+    */
+    const processEvent = (e) => {
+        // If it's a link, prevent the default behavior until the event is sent.
+        if (e.target.tagName === 'A') {
+            e.preventDefault();
+        }
+
+        const target = e.target;
+        const eventId = target.getAttribute('data-nfd-click');
+        const eventKey = target.getAttribute('data-nfd-event-key') || eventId;
+        const eventCategory = target.getAttribute('data-nfd-event-category') || 'plugin';
+        const brand = target.getAttribute('data-nfd-brand') || window.nfdHiiveEvents.brand;
+        const queue = target.getAttribute('data-nfd-queue') || false;
+
+        const eventData = {
+            action: eventId,
+            category: eventCategory,
+            queue,
+            data: {
+                label_key: eventKey,
+                brand,
+                page: window.location.href,
+            }
+        };
+
+				// To handle marketplace items.
+				if (target.getAttribute('data-nfd-product-id')) {
+					eventData.data.product_id = target.getAttribute('data-nfd-product-id');
+				}
+
+        // Send event to the API
+        window.wp.apiFetch({
+            url: window.nfdHiiveEvents.eventEndpoint,
+            method: 'POST',
+            data: eventData
+        }).catch((error) => {
+            console.error('Error sending event to API', error);
+        });
+
+        // Send user to the link.
+        if (e.target.tagName === 'A') {
+            window.location.href = e.target.href;
+        }
+    };
+
+    window.addEventListener('load', () => {
+        document.querySelector('#wpwrap').addEventListener('click', (e) => {
+            if (e.target.hasAttribute('data-nfd-click')) {
+                processEvent(e);
+            }
+        });
+    });
+}