Add Event Inspector

assets/admin/settings.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'b217c3ad3a8b8bd93902');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '316691c4b188eb4e0d33');

assets/frontend/event-inspector.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '279d2a8bbf86dcc0b63b');

package.json

@@ -33,7 +33,7 @@
     "uglify-js": "^3.17.4"
   },
   "scripts": {
-    "build": "wp-scripts build src/js/frontend/woocommerce-blocks.js --output-path=assets/frontend",
+    "build": "wp-scripts build src/js/frontend/woocommerce-blocks.js src/js/frontend/event-inspector.js --output-path=assets/frontend",
     "build:assets": "npm run clean:assets && npm run build:js && npm run copy:images",
     "build:js": "npm run uglify:woocommerce && npm run uglify:woocommerce-checkout && npm run uglify:edd && npm run uglify:edd-checkout && npm run uglify:cf7",
     "clean:assets": "del assets",
@@ -51,7 +51,7 @@
     "lint:css": "wp-scripts lint-style",
     "lint:js": "wp-scripts lint-js ./src/js",
     "lint:js-fix": "wp-scripts lint-js ./src/js --fix",
-    "watch": "wp-scripts start src/js/frontend/woocommerce-blocks.js --output-path=assets/frontend",
+    "watch": "wp-scripts start src/js/frontend/woocommerce-blocks.js src/js/frontend/event-inspector.js --output-path=assets/frontend",
     "watch:tailwind": "npx tailwindcss -i ./src/scss/tailwind.scss -o ./src/scss/_tailwind-compiled.scss --watch",
     "audit:prod": "npm audit --omit=dev",
     "lint:pkg-json": "wp-scripts lint-pkg-json",

readme.txt

@@ -96,6 +96,7 @@ Release date: 2024-MM-DD
 Find out about what's new in our [our release post](https://gtmkit.com/gtm-kit-1-22/).
 
 #### Enhancements:
+- Added an Event Inspector for verifying that events are being pushed to the datalayer. You can now debug events without using GTM preview mode.
 - Added advanced GCM settings: 'ads_data_redaction', 'url_passthrough' and 'wait_for_update'.
 - Updated the custom container loader.
 

src/Frontend/Frontend.php

@@ -69,6 +69,10 @@ public static function register( Options $options ): void {
 			add_action( 'body_footer', [ $page, 'get_body_script' ] );
 		}
 
+		if ( $options->get( 'general', 'event_inspector' ) ) {
+			add_action( 'wp_footer', [ $page, 'get_event_inspector' ] );
+		}
+
 		add_filter( 'wp_resource_hints', [ $page, 'dns_prefetch' ], 10, 2 );
 		add_filter( 'rocket_excluded_inline_js_content', [ $page, 'wp_rocket_exclude_javascript' ] );
 		add_filter( 'wp_inline_script_attributes', [ $page, 'set_inline_script_attributes' ], 10, 2 );
@@ -125,6 +129,23 @@ function gtag(){<?php echo esc_attr( $this->datalayer_name ); ?>.push(arguments)
 		wp_register_script( 'gtmkit', '', [], GTMKIT_VERSION, [ 'in_footer' => false ] );
 		wp_enqueue_script( 'gtmkit' );
 		wp_add_inline_script( 'gtmkit', $script, 'before' );
+
+		if ( $this->options->get( 'general', 'event_inspector' ) ) {
+
+			$deps_file  = GTMKIT_PATH . 'assets/frontend/event-inspector.asset.php';
+			$dependency = [];
+			$version    = false;
+
+			if ( \file_exists( $deps_file ) ) {
+				$deps_file  = require $deps_file;
+				$dependency = $deps_file['dependencies'];
+				$version    = $deps_file['version'];
+			}
+			$dependency[] = 'gtmkit';
+
+			\wp_enqueue_style( 'gtmkit-event-inspector-style', GTMKIT_URL . 'assets/frontend/event-inspector.css', [], $version );
+			\wp_enqueue_script( 'gtmkit-event-inspector-script', GTMKIT_URL . 'assets/frontend/event-inspector.js', $dependency, $version, [ 'strategy' => 'defer' ] );
+		}
 	}
 
 	/**
@@ -312,4 +333,18 @@ public function dns_prefetch( array $hints, string $relation_type ): array {
 
 		return $hints;
 	}
+
+	/**
+	 * Get the Event Inspector HTML
+	 */
+	public function get_event_inspector(): void {
+		?>
+		<div id="gtmkit-event-inspector">
+			<div id="gtmkit-event-inspector-wrapper">
+				<div id="gtmkit-event-inspector-title">GTM Kit Event Inspector:</div>
+				<ul id="gtmkit-event-inspector-list"></ul>
+			</div>
+		</div>
+		<?php
+	}
 }

src/js/frontend/event-inspector.js

@@ -0,0 +1,5 @@
+/**
+ * GTM Kit
+ */
+
+import './event-inspector/index';

src/js/frontend/event-inspector/index.js

@@ -0,0 +1,64 @@
+/**
+ * SCSS
+ */
+import './styles.scss';
+
+const theDataLayer = window[ window.gtmkit_settings.datalayer_name ];
+
+theDataLayer.push = function () {
+	Array.prototype.push.apply( this, arguments );
+	const event = new CustomEvent( 'gtmkitDataLayerPush', {
+		detail: arguments[ 0 ],
+	} );
+	window.dispatchEvent( event );
+};
+
+window.addEventListener( 'gtmkitDataLayerPush', function ( e ) {
+	getDataLayer();
+} );
+
+let dataLayerLastIndex = 0;
+
+function getDataLayer() {
+	const currentDataLayerIndex = theDataLayer.length - 1;
+
+	if ( currentDataLayerIndex > dataLayerLastIndex ) {
+		const newDataLayer = theDataLayer.slice( dataLayerLastIndex + 1 );
+		let storedEvents =
+			JSON.parse( sessionStorage.getItem( 'gtmkit-event-inspector' ) ) ||
+			[];
+
+		newDataLayer.forEach( ( event ) => {
+			if (
+				( ! event.event && ! event.ecommerce ) ||
+				( event.event && event.event.substring( 0, 4 ) === 'gtm.' )
+			) {
+				return;
+			}
+			storedEvents.push( event.event );
+		} );
+
+		if ( storedEvents.length > 5 ) {
+			storedEvents = storedEvents.slice( -5 );
+		}
+
+		dataLayerLastIndex = currentDataLayerIndex;
+
+		sessionStorage.setItem(
+			'gtmkit-event-inspector',
+			JSON.stringify( storedEvents )
+		);
+		renderList( storedEvents );
+	}
+}
+
+function renderList( events ) {
+	const listItem = '<li>{{event}}</li>';
+	const reversedList = [ ...events ].reverse();
+	const rendered = reversedList.map( ( item ) => {
+		return listItem.replace( '{{event}}', item );
+	} );
+
+	document.getElementById( 'gtmkit-event-inspector-list' ).innerHTML =
+		rendered.join( '' );
+}

src/js/frontend/event-inspector/styles.scss

@@ -0,0 +1,50 @@
+@import '../../../scss/_base.scss';
+
+#gtmkit-event-inspector {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	z-index: 99999;
+	max-height: 25%;
+	overflow-y: scroll;
+	background-color: var(--gtmkit-background-white);
+	border-top: 2px solid var(--gtmkit-color-grey);
+
+}
+
+#gtmkit-event-inspector-wrapper{
+	text-align: center;
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+	margin: 0 auto;
+	width: max-content	;
+	padding: 1rem;
+
+}
+#gtmkit-event-inspector-title {
+	color: var(--gtmkit-color-primary);
+	font-size: 1.125rem;
+	font-weight: 600;
+
+}
+
+#gtmkit-event-inspector-list {
+	display: flex;
+	margin: 0;
+	gap: 1rem;
+
+	li {
+		list-style: none;
+		color: var(--gtmkit-text-color-grey);
+		padding: 0.1rem 0;
+
+		&:first-of-type {
+			border-bottom: 2px solid var(--gtmkit-color-grey);
+			font-weight: 500;
+			color: var(--gtmkit-text-color-heading);
+		}
+	}
+}