zz-shopify-components 0.22.0 → 0.22.1-beta.0

package/assets/zz-modal.js

@@ -4,11 +4,30 @@
   - Attribute reflection and programmatic API: show(), hide(), toggle()
   - Options via attributes: close-on-esc, close-on-backdrop, scroll-lock, inert-others
   - Global open/close triggers: [data-zz-modal-target], [data-zz-modal-close]
+  - Analytics tracking: modal open/close/confirm events
 */
 
 (() => {
   if (customElements.get('zz-modal')) return;
 
+  // Analytics tracking utility
+  const trackModalEvent = (eventType, modalId, additionalData = {}) => {
+    try {
+      const eventData = {
+        event: 'modal_interaction',
+        modal_action: eventType,
+        modal_id: modalId || 'unknown',
+        timestamp: new Date().toISOString(),
+        ...additionalData
+      };
+      window.zzAnalytics && window.zzAnalytics.trackEvent(eventType, eventData);
+
+      console.log('[ZZ-Modal Analytics]', eventData);
+    } catch (error) {
+      console.warn('[ZZ-Modal Analytics] Tracking failed:', error);
+    }
+  };
+
   const STYLE_TEXT = `
     :host {
       position: relative;
@@ -155,6 +174,9 @@
       this._onClick = this._onClick.bind(this);
       this._previousActive = null;
       this._mouseDownInsidePanel = false;
+      this._openTimestamp = null;
+      this._lastTriggerSource = null;
+      this._lastCloseMethod = null;
 
       const shadow = this.attachShadow({ mode: 'open' });
       const style = document.createElement('style');
@@ -176,7 +198,10 @@
 
     connectedCallback() {
       // Delegated internal events
-      this._closeBtn.addEventListener('click', () => this.hide());
+      this._closeBtn.addEventListener('click', () => {
+        this._lastCloseMethod = 'close_button';
+        this.hide();
+      });
       this._dialog.addEventListener('close', this._onNativeClose);
       this._dialog.addEventListener('mousedown', this._onMouseDown);
       this._dialog.addEventListener('click', this._onClick);
@@ -214,8 +239,18 @@
     get open() { return this._dialog?.open || this.hasAttribute('open'); }
     set open(val) { if (val) this.setAttribute('open', ''); else this.removeAttribute('open'); }
 
-    show() { this._openInternal(true); }
-    hide() { this._closeInternal(true); }
+    show() { 
+      if (!this._lastTriggerSource) {
+        this._lastTriggerSource = 'unknown';
+      }
+      this._openInternal(true); 
+    }
+    hide() { 
+      if (!this._lastCloseMethod) {
+        this._lastCloseMethod = 'unknown';
+      }
+      this._closeInternal(true); 
+    }
     toggle() { this.open ? this.hide() : this.show(); }
 
     // Aliases
@@ -229,6 +264,7 @@
     _openInternal(emit = false) {
       if (this._dialog.open) return;
       this._previousActive = document.activeElement;
+      this._openTimestamp = Date.now();
 
       // Scroll lock
       if (!this.hasAttribute('no-scroll-lock')) {
@@ -261,7 +297,14 @@
       // Focus first focusable within panel
       this._focusInitial();
 
-      if (emit) this._emit('zz-modal:open');
+      if (emit) {
+        this._emit('zz-modal:open');
+        const modalId = this.getAttribute('data-modal-id') || this.id || 'unnamed-modal';
+        trackModalEvent('modal_open', modalId, {
+          trigger_source: this._getTriggerSource(),
+          modal_type: this.getAttribute('data-modal-type') || 'default'
+        });
+      }
     }
 
     _closeInternal(emit = false) {
@@ -292,13 +335,26 @@
       }
       this._previousActive = null;
 
-      if (emit) this._emit('zz-modal:close');
+      if (emit) {
+        this._emit('zz-modal:close');
+        const modalId = this.getAttribute('data-modal-id') || this.id || 'unnamed-modal';
+        trackModalEvent('modal_close', modalId, {
+          close_method: this._getCloseMethod(),
+          modal_type: this.getAttribute('data-modal-type') || 'default',
+          time_open: this._getTimeOpen()
+        });
+        
+        this._lastTriggerSource = null;
+        this._lastCloseMethod = null;
+        this._openTimestamp = null;
+      }
     }
 
     _onKeydown(e) {
       const escAllowed = !this.hasAttribute('no-esc-close');
       if (e.key === 'Escape' && escAllowed) {
         e.stopPropagation();
+        this._lastCloseMethod = 'escape_key';
         this.hide();
       }
 
@@ -342,6 +398,7 @@
       const path = e.composedPath();
       const clickInsidePanel = path.includes(this._panel);
       if (!clickInsidePanel && !this._mouseDownInsidePanel) {
+        this._lastCloseMethod = 'backdrop_click';
         this.hide();
       }
       this._mouseDownInsidePanel = false;
@@ -401,6 +458,30 @@
         if (isInert) el.setAttribute('inert', ''); else el.removeAttribute('inert');
       });
     }
+
+    // Analytics helper methods
+    _getTriggerSource() {
+      return this._lastTriggerSource || 'programmatic';
+    }
+
+    _getCloseMethod() {
+      return this._lastCloseMethod || 'unknown';
+    }
+
+    _getTimeOpen() {
+      if (!this._openTimestamp) return 0;
+      return Date.now() - this._openTimestamp;
+    }
+
+    trackConfirm(confirmType = 'default', additionalData = {}) {
+      const modalId = this.getAttribute('data-modal-id') || this.id || 'unnamed-modal';
+      trackModalEvent('modal_confirm', modalId, {
+        confirm_type: confirmType,
+        modal_type: this.getAttribute('data-modal-type') || 'default',
+        time_to_confirm: this._getTimeOpen(),
+        ...additionalData
+      });
+    }
   }
 
   customElements.define('zz-modal', ZZModal);
@@ -414,6 +495,7 @@
         const modal = document.querySelector(selector);
         if (modal && modal.show) {
           e.preventDefault();
+          modal._lastTriggerSource = 'data_attribute';
           modal.show();
         }
       }
@@ -424,9 +506,22 @@
       const hostModal = closeTrigger.closest('zz-modal');
       if (hostModal && hostModal.hide) {
         e.preventDefault();
+        hostModal._lastCloseMethod = 'data_attribute';
         hostModal.hide();
       }
     }
+
+    const confirmTrigger = e.target.closest('[data-zz-modal-confirm]');
+    if (confirmTrigger) {
+      const hostModal = confirmTrigger.closest('zz-modal');
+      if (hostModal && hostModal.trackConfirm) {
+        const confirmType = confirmTrigger.getAttribute('data-zz-modal-confirm') || 'default';
+        hostModal.trackConfirm(confirmType, {
+          button_text: confirmTrigger.textContent?.trim() || '',
+          button_class: confirmTrigger.className || ''
+        });
+      }
+    }
   }, { capture: true });
 })();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.22.0",
+  "version": "0.22.1-beta.0",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",