Merge pull request #23 from tagconcierge/feature/settings-gallery

Feature/settings gallery
tagconcierge · Nov 12, 2024 · bd4be80 · bd4be80
2 parents f76f5e1 + cc7feae
commit bd4be80
Show file tree

Hide file tree

Showing 14 changed files with 1,034 additions and 71 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -13,6 +13,9 @@ indent_style = tab
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.{js,css}]
+indent_style = space
+
 [*.txt]
 trim_trailing_whitespace = false
 

diff --git a/assets/gtm-ecommerce-woo-event-inspector.css b/assets/gtm-ecommerce-woo-event-inspector.css
@@ -0,0 +1,145 @@
+#gtm-ecommerce-woo-event-inspector {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    max-height: 95%;
+    height: 600px;
+    background-color: #ffffff;
+    font-family: 'Roboto', Arial, sans-serif;
+    font-size: 14px;
+    z-index: 9999;
+    overflow: hidden;
+    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+    #gtm-ecommerce-woo-event-inspector {
+        width: 400px;
+        bottom: 20px;
+        right: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+}
+
+#gtm-ecommerce-woo-event-inspector.minimized {
+    height: auto;
+}
+
+#gtm-ecommerce-woo-event-inspector.minimized .tabs,
+#gtm-ecommerce-woo-event-inspector.minimized .content {
+    display: none;
+}
+
+#gtm-ecommerce-woo-event-inspector .header {
+    background-color: #4285f4;
+    color: #ffffff;
+    padding: 0 15px;
+    font-size: 16px;
+    font-weight: 500;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#gtm-ecommerce-woo-event-inspector .content {
+    height: calc(100% - 56px);
+    overflow-y: auto;
+}
+
+#gtm-ecommerce-woo-event-inspector .tabs {
+    display: flex;
+    background-color: #f1f3f4;
+    border-bottom: 1px solid #dadce0;
+}
+
+#gtm-ecommerce-woo-event-inspector .tab {
+    padding: 12px 16px;
+    cursor: pointer;
+    color: #5f6368;
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+#gtm-ecommerce-woo-event-inspector .tab:hover {
+    background-color: #e8f0fe;
+}
+
+#gtm-ecommerce-woo-event-inspector .tab.active {
+    color: #1a73e8;
+    border-bottom: 2px solid #1a73e8;
+}
+
+#gtm-ecommerce-woo-event-inspector .tab-content {
+    display: none;
+    height: calc(100% - 49px);
+    overflow-y: auto;
+    padding: 16px;
+}
+
+#gtm-ecommerce-woo-event-inspector .tab-content.active {
+    display: block;
+}
+
+#gtm-ecommerce-woo-event-inspector .event {
+    margin-bottom: 16px;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 12px;
+}
+
+#gtm-ecommerce-woo-event-inspector .event-name {
+    font-weight: 500;
+    color: #202124;
+    margin-bottom: 4px;
+}
+
+#gtm-ecommerce-woo-event-inspector .event-properties {
+    margin-left: 16px;
+    color: #5f6368;
+}
+
+#gtm-ecommerce-woo-event-inspector .clear-history {
+    cursor: pointer;
+    color: #ffffff;
+    border: 1px solid #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    background: none;
+}
+
+#gtm-ecommerce-woo-event-inspector .toggle-size {
+    cursor: pointer;
+    background: none;
+    border: none;
+    color: #ffffff;
+    font-size: 20px;
+    padding: 10px;
+}
+
+#gtm-ecommerce-woo-event-inspector pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background-color: #f8f9fa;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    padding: 8px;
+    color: #202124;
+}
+
+#gtm-ecommerce-woo-event-inspector code {
+    background: none;
+}
+
+#gtm-ecommerce-woo-event-inspector h3 {
+    color: #202124;
+    font-weight: 500;
+    margin-top: 16px;
+    margin-bottom: 8px;
+}
+
+#gtm-ecommerce-woo-event-inspector ul {
+    margin: 0;
+    padding: 0;
+}
diff --git a/assets/gtm-ecommerce-woo-event-inspector.js b/assets/gtm-ecommerce-woo-event-inspector.js
@@ -1,4 +1,4 @@
-(function($) {
+(function($, w) {
     dataLayer = window.dataLayer || [];
 
     var dataLayerIndex = 0;
@@ -57,38 +57,39 @@
                 eventName = "checkout (UA)";
             }
 
-            return template.replace('{{event}}', eventName);
+            return template
+                .replace('{{event}}', eventName)
+                .replace('{{json}}', hljs.highlight(JSON.stringify(item, null, 2), { language: 'json' }).value);
         });
         $("#gtm-ecommerce-woo-event-inspector-list").html(rendered);
+
     }
 
     $(function() {
-        $("#gtm-ecommerce-woo-event-inspector-list").on("click", "li", function(ev) {
-            var index = $(ev.target).index();
-            var existingStoredEvents = JSON.parse(sessionStorage.getItem("gtmDatalayerDebugger")) || [];
-            // since items are stored in chronological order, but we render them in reverse order:
-            alert(JSON.stringify(existingStoredEvents.reverse()[index], null, 2));
+        // Toggle tool size
+        $('#gtm-ecommerce-woo-event-inspector').on('click', '.toggle-size', function() {
+            $('#gtm-ecommerce-woo-event-inspector').toggleClass('minimized');
+            sessionStorage.setItem('gtmDatalayerDebuggerMinimized', $('#gtm-ecommerce-woo-event-inspector').hasClass('minimized'));
+        });
+
+        if (sessionStorage.getItem('gtmDatalayerDebuggerMinimized') === 'true') {
+            $('#gtm-ecommerce-woo-event-inspector').addClass('minimized');
+        }
+
+        $('#gtm-ecommerce-woo-event-inspector').on('click', '.clear-history', function() {
+            sessionStorage.setItem("gtmDatalayerDebugger", '[]');
+            renderItems([]);
+        });
+
+        $("#gtm-ecommerce-woo-event-inspector-list").on("click", "li span", function(ev) {
+            $(ev.currentTarget).siblings('pre').toggle();
         });
 
         var existingStoredEvents = JSON.parse(sessionStorage.getItem("gtmDatalayerDebugger")) || [];
         renderItems(existingStoredEvents);
 
         setInterval(checkDataLayer, 100);
-    });
 
-    // dataLayer.push = function() {
-    //     originalPush.call(arguments);
-    //     var event = arguments[0];
-    //     if (!event.event || event.event.substring(0, 4) === "gtm.") {
-    //         return
-    //     }
-    //     var existingStoredEvents = JSON.parse(sessionStorage.getItem("gtmDatalayerDebugger")) || [];
-    //     existingStoredEvents.push(event);
-    //     sessionStorage.setItem("gtmDatalayerDebugger", JSON.stringify(existingStoredEvents));
-    //     $(function() {
-    //         renderItems(existingStoredEvents);
-    //     });
-    // }
-
-
-})(jQuery);
+        $('#gtm-ecommerce-woo-event-inspector').show();
+    });
+})(jQuery, window);
diff --git a/gtm-ecommerce-woo.php b/gtm-ecommerce-woo.php
@@ -1,9 +1,9 @@
 <?php
 /**
- * Plugin Name: GTM for WooCommerce FREE - Google Tag Manager Integration
+ * Plugin Name: Tag Pilot FREE - Google Tag Manager Integration for WooCommerce
  * Plugin URI:  https://wordpress.org/plugins/gtm-ecommerce-woo
- * Description: Complete Google Tag Manager plugin, Consent Mode v2 and server-side GTM ready. Quick install for GA4 and Facebook Pixel.
- * Version:     1.10.35
+ * Description: Complete Google Tag Manager plugin for WooCommerce, Consent Mode v2 and Server-Side GTM ready. Ready GTM configuration for GA4 and Facebook Pixel. Built-in product feed for Google Merchant Center.
+ * Version:     1.11.0
  * Author:      Tag Concierge
  * Author URI:  https://tagconcierge.com/
  * License:     GPLv2 or later
@@ -37,6 +37,7 @@
 $container->getGtmSnippetService()->initialize();
 $container->getEventStrategiesService()->initialize();
 $container->getEventInspectorService()->initialize();
+$container->getProductFeedService()->initialize();
 
 $pluginService = $container->getPluginService();
 $pluginService->initialize();

diff --git a/readme.txt b/readme.txt
@@ -1,14 +1,14 @@
-=== GTM for WooCommerce FREE - Google Tag Manager Integration ===
+=== Tag Pilot FREE - Google Tag Manager Integration for WooCommerce ===
 Contributors: Tag Concierge
 Tags: google tag manager, GA4, ecommerce events, Google Analytics, Facebook Pixel, Microsoft UET, consent mode
 Requires at least: 5.1.0
 Tested up to: 6.6.2
 Requires PHP: 7.0
-Stable tag: 1.10.35
+Stable tag: 1.11.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
-Complete Google Tag Manager plugin, Consent Mode v2 and server-side GTM ready. Quick install for GA4 and Facebook Pixel.
+Complete Google Tag Manager plugin for WooCommerce, Consent Mode v2 and Server-Side GTM ready. Ready GTM configuration for GA4 and Facebook Pixel. Built-in product feed for Google Merchant Center.
 
 == Description ==
 
@@ -149,19 +149,29 @@ Yes! Just use the appropriate preset available in the settings screen of the plu
 
 == Screenshots ==
 
-1. **GTM for WooCommerce** integrations
+1. Plugin tracked `add_to_cart` and `purchase` events
 2. **GTM for WooCommerce** settings and GTM snippets
-3. eCommerce results in GA4 property
-4. eCommerce results in Universal Analytics property
-5. `add_to_cart` event captured in GTM debugger
-6. `purchase` event captured in GTM debugger
-7. How to import the provided GTM container?
-8. GTM workspace tags after importer provided JSON file
+3. Available events in PRO version
+4. GTM Presets gallery
+5. Google Tag Manager import preview
+6. Google Ads Conversion status
+7. Complete purchase journey in GA4 (requires PRO)
+8. Event and Cart Data tools
+9. Server-side tools
 
 
 
 == Changelog ==
 
+= 1.11.0 =
+
+* added product feed generator
+* added default consent mode state
+* added server-side GTM snippet modifier
+* added ability to add extra parameters to ecommerce object
+* introduced tools gallery
+* improved styling of events inspector
+
 = 1.10.34 =
 
 * removed unnecessary code

diff --git a/src/Container.php b/src/Container.php
@@ -8,6 +8,7 @@
 use GtmEcommerceWoo\Lib\Service\SettingsService;
 use GtmEcommerceWoo\Lib\Service\PluginService;
 use GtmEcommerceWoo\Lib\Service\EventInspectorService;
+use GtmEcommerceWoo\Lib\Service\ProductFeedService;
 use GtmEcommerceWoo\Lib\Util\WpSettingsUtil;
 use GtmEcommerceWoo\Lib\Util\WcOutputUtil;
 use GtmEcommerceWoo\Lib\Util\WcTransformerUtil;
@@ -29,6 +30,8 @@ class Container {
 	/** @var EventInspectorService */
 	public $eventInspectorService;
 
+	public $productFeedService;
+
 	/** @var WcTransformerUtil */
 	protected $wcTransformerUtil;
 
@@ -45,8 +48,13 @@ public function __construct( string $pluginVersion ) {
 			'add_billing_info',
 			'add_payment_info',
 			'add_shipping_info',
+			'add_to_wishlist',
+			'remove_from_wishlist',
 			'abandon_cart',
 			'abandon_checkout',
+			'language',
+			'change_language',
+			'change_currency'
 		];
 		$serverEvents = [
 			// 'add_to_cart',
@@ -75,6 +83,7 @@ public function __construct( string $pluginVersion ) {
 		$this->settingsService = new SettingsService($wpSettingsUtil, $events, $proEvents, $serverEvents, $tagConciergeApiUrl, $pluginVersion);
 		$this->pluginService = new PluginService($spineCaseNamespace, $wpSettingsUtil, $wcOutputUtil, $pluginVersion);
 		$this->eventInspectorService = new EventInspectorService($wpSettingsUtil, $wcOutputUtil);
+		$this->productFeedService = new ProductFeedService($snakeCaseNamespace, $wpSettingsUtil);
 	}
 
 	public function getSettingsService(): SettingsService {
@@ -97,6 +106,10 @@ public function getEventInspectorService(): EventInspectorService {
 		return $this->eventInspectorService;
 	}
 
+	public function getProductFeedService(): ProductFeedService {
+		return $this->productFeedService;
+	}
+
 	public function getWcTransformerUtil() {
 		return $this->wcTransformerUtil;
 	}

diff --git a/src/GaEcommerceEntity/Event.php b/src/GaEcommerceEntity/Event.php
@@ -7,6 +7,7 @@ class Event implements \JsonSerializable {
 	public $name;
 	public $items;
 	public $extraProps;
+	public $extraEcomProps;
 	public $currency;
 	public $transactionId;
 	public $affiliation;
@@ -18,6 +19,7 @@ class Event implements \JsonSerializable {
 	public function __construct( $name ) {
 		$this->name = $name;
 		$this->extraProps = [];
+		$this->extraEcomProps = [];
 	}
 
 	public function setItems( array $items ): Event {
@@ -70,6 +72,11 @@ public function setExtraProperty( string $propName, $propValue ): Event {
 		return $this;
 	}
 
+	public function setExtraEcomProperty( string $propName, $propValue ): Event {
+		$this->extraEcomProps[$propName] = $propValue;
+		return $this;
+	}
+
 	public function getValue(): float {
 		if (null !== $this->value) {
 			return $this->value;
@@ -159,6 +166,10 @@ public function jsonSerialize(): array {
 			$jsonEvent[$propName] = $propValue;
 		}
 
+		foreach ($this->extraEcomProps as $propName => $propValue) {
+			$jsonEvent['ecommerce'][$propName] = $propValue;
+		}
+
 		$result = array_filter($jsonEvent, static function( $value ) {
 			return !is_null($value) && '' !== $value;
 		});