@kylelogue/eventfoundry-tracker 0.2.0 → 0.3.1

package/README.md

@@ -2,6 +2,21 @@
 
 Embedded JavaScript tracking script for EventFoundry - enables custom GA4 event tracking with a visual editor.
 
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [How It Works](#how-it-works)
+- [Features](#features)
+- [Configuration](#configuration)
+- [Development Mode](#development-mode)
+- [Editor Integration](#editor-integration)
+- [Architecture](#architecture)
+- [Browser Compatibility](#browser-compatibility)
+- [Development](#development)
+- [PostMessage API Reference](#postmessage-api-reference)
+- [License](#license)
+
 ## Installation
 
 ### Via unpkg CDN (Recommended)
@@ -19,7 +34,7 @@ Or pin to a specific version for production stability:
 
 ```html
 <!-- Pinned version -->
-<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@0.1.0/dist/tracker.min.js"
+<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@0.3.0/dist/tracker.min.js"
         data-site-key="YOUR_SITE_KEY_HERE"
         async></script>
 ```
@@ -65,40 +80,298 @@ If you already have GA4 installed, EventFoundry will detect and use it:
 
 ## How It Works
 
-EventFoundry Tracker runs in two modes:
+EventFoundry Tracker operates in two distinct modes:
+
+### 1. Tracking Mode (Production)
+
+This is the default mode when the script is embedded on your website:
 
-1. **Tracking Mode** (default): Fetches event definitions from your EventFoundry account, attaches click listeners to elements, and sends events directly to GA4.
+1. **Initialization**: On page load, the tracker reads configuration from script attributes
+2. **GA4 Setup**: Either detects existing GA4 installation or auto-injects it based on `data-measurement-id`
+3. **Event Fetching**: Retrieves event definitions from EventFoundry API using your site key
+4. **Caching**: Stores event definitions in localStorage with 1-hour cache duration
+5. **Click Tracking**: Attaches click listeners to elements matching CSS selectors from your event definitions
+6. **Event Sending**: When tracked elements are clicked, sends events to GA4 using the Beacon API for reliable delivery (even during page navigation)
 
-2. **Editor Mode**: When loaded in the EventFoundry app, enables a visual overlay for defining custom events by clicking elements on your site.
+### 2. Editor Mode (EventFoundry App)
+
+When loaded inside the EventFoundry application's iframe:
+
+1. **Detection**: Automatically detects iframe environment and initializes editor mode
+2. **Visual Overlay**: Displays an interactive overlay for selecting elements on your page
+3. **Element Selection**: Click any element to select it and generate an optimized CSS selector
+4. **Selector Generation**: Uses a priority-based algorithm to create the most reliable selector
+5. **Communication**: Sends element data back to the parent app via secure PostMessage
+6. **Preview Testing**: Allows testing events in preview mode with real-time logging
 
 ## Features
 
-- **Lightweight**: < 1KB gzipped
+- **Lightweight**: ~3.2 KB gzipped (8.2 KB minified)
 - **Zero dependencies**: Pure vanilla JavaScript
 - **Fast**: 1-hour localStorage caching of event definitions
 - **Non-blocking**: Async loading won't slow down your site
 - **Browser support**: Chrome, Firefox, Safari, Edge (ES2015+)
+- **Reliable delivery**: Uses Beacon API to ensure events complete even during navigation
+- **Development mode**: Auto-detects localhost and logs events without sending to GA4
+- **Visual editor**: Interactive element selection overlay for defining events
+- **Smart selectors**: Priority-based CSS selector generation algorithm
+- **Secure communication**: Origin validation for iframe PostMessage API
 
 ## Configuration
 
-The script accepts the following attributes:
+The script accepts the following data attributes:
+
+### Required
+
+- **`data-site-key`**: Your EventFoundry site key (obtained from your EventFoundry account)
+
+### Optional
+
+- **`data-measurement-id`**: Your GA4 measurement ID (e.g., `G-XXXXXXXXXX`)
+  - Only required if you want EventFoundry to auto-inject GA4
+  - Omit this if you already have GA4 installed on your site
+
+- **`data-dev-mode`**: Control development mode behavior
+  - `"true"`: Force development mode on (logs events, doesn't send to GA4)
+  - `"false"`: Force production mode on
+  - Not set: Auto-detects (dev mode on localhost, production mode elsewhere)
+
+## Development Mode
+
+Development mode helps you test EventFoundry tracking without sending events to GA4.
+
+### Auto-Detection
+
+By default, the tracker automatically enables development mode when running on `localhost`:
+
+```javascript
+// On localhost - dev mode is automatically enabled
+// Events are logged to console but NOT sent to GA4
+```
+
+### Manual Control
+
+You can override the auto-detection:
+
+```html
+<!-- Force dev mode on production domain (for testing) -->
+<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@latest/dist/tracker.min.js"
+        data-site-key="YOUR_SITE_KEY_HERE"
+        data-measurement-id="G-XXXXXXXXXX"
+        data-dev-mode="true"
+        async></script>
+
+<!-- Force production mode on localhost (to test real GA4 events) -->
+<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@latest/dist/tracker.min.js"
+        data-site-key="YOUR_SITE_KEY_HERE"
+        data-measurement-id="G-XXXXXXXXXX"
+        data-dev-mode="false"
+        async></script>
+```
+
+### Behavior in Dev Mode
+
+When development mode is active:
+- Events are logged to the browser console with full details
+- No events are sent to Google Analytics
+- A console message indicates dev mode is active
+- All tracking logic still runs (useful for testing selectors and event configuration)
+
+## Editor Integration
+
+EventFoundry Tracker includes a sophisticated visual editor for defining events directly on your website.
+
+### How Editor Mode Works
+
+When your site is loaded inside the EventFoundry application:
+
+1. The tracker detects the iframe environment
+2. Sends an `IFRAME_READY` message to the parent app
+3. Activates the visual overlay system
+4. Waits for element selection requests from the parent app
+
+### Visual Element Selection
+
+The editor overlay provides:
+- **Click-to-select**: Click any element to select it
+- **Visual highlighting**: Selected elements are highlighted in the overlay
+- **Parent traversal**: Navigate up the DOM tree to select parent elements
+- **Selector preview**: See the generated CSS selector in real-time
+
+### CSS Selector Generation
+
+The tracker uses a priority-based algorithm to generate reliable CSS selectors:
+
+1. **ID selectors** (highest priority): `#unique-element-id`
+2. **Unique attributes**: `[data-track="value"]`, `[name="value"]`
+3. **Class-based selectors**: `.class-name`, `.multiple.classes`
+4. **Tag + nth-child**: `div:nth-child(3)`, with parent context for specificity
+5. **Fallback combinations**: Combines multiple strategies for robustness
+
+The algorithm ensures selectors are:
+- Specific enough to target the correct element
+- Resilient to minor page changes
+- Human-readable when possible
+
+### Preview Mode
 
-- `data-site-key` (required): Your EventFoundry site key
-- `data-measurement-id` (optional): Your GA4 measurement ID (if not already installed)
+Test your events before deploying:
+- Preview mode logs events to the parent app instead of GA4
+- See real-time feedback when clicking tracked elements
+- Verify event parameters and tracking accuracy
+- No impact on your actual GA4 data
+
+## Architecture
+
+EventFoundry Tracker is built with a modular architecture:
+
+### Source Structure
+
+```
+src/
+├── index.js           - Main entry point, config parsing, GA4 setup, caching
+├── tracker.js         - Event tracking logic, click listeners, Beacon API
+├── editor-mode.js     - Editor mode detection and PostMessage communication
+└── editor-overlay.js  - Visual overlay, element selection, selector generation
+```
+
+### Module Responsibilities
+
+- **index.js**: Initialization, configuration parsing, GA4 detection/injection, event caching
+- **tracker.js**: Click event handling, event data collection, GA4 event sending
+- **editor-mode.js**: Iframe detection, parent communication, mode switching
+- **editor-overlay.js**: DOM overlay rendering, element selection UI, CSS selector algorithm
+
+### Build Output
+
+- **Format**: IIFE (Immediately Invoked Function Expression)
+- **Target**: ES2015 for broad browser compatibility
+- **Global**: `window.EventFoundry` (for programmatic access if needed)
+- **Minification**: Template minification and console statement stripping in production
+
+## Browser Compatibility
+
+EventFoundry Tracker is built with ES2015+ JavaScript and supports all modern browsers:
+
+- **Chrome**: 51+
+- **Firefox**: 54+
+- **Safari**: 10+
+- **Edge**: 15+
+
+### Required Browser Features
+
+- ES2015 syntax (arrow functions, const/let, template literals)
+- `localStorage` API
+- `fetch` API
+- `navigator.sendBeacon` API (for reliable event delivery)
+- `postMessage` API (for editor mode communication)
+
+All these features are widely supported in browsers from 2016 onwards.
 
 ## Development
 
+### Setup
+
 ```bash
 # Install dependencies
 npm install
+```
+
+### Building
 
-# Build for production
+```bash
+# Production build (outputs to dist/tracker.min.js)
 npm run build
 
-# Development watch mode
+# Development watch mode (outputs to ../eventfoundry-app/frontend/public/tracker.min.js)
 npm run dev
 ```
 
+### Build System
+
+The tracker uses **esbuild** for fast, efficient bundling:
+
+- **Template minification**: CSS and HTML strings are minified via `esbuild-minify-templates`
+- **Console stripping**: All `console.*` statements are removed from production builds
+- **Sourcemaps**: Generated in development mode for debugging
+- **Watch mode**: Automatically rebuilds on file changes and outputs to sibling project
+
+### Build Configuration
+
+- Production builds optimize for size and performance
+- Development builds include sourcemaps and preserve console logs
+- Both modes produce IIFE bundles targeting ES2015
+
+## PostMessage API Reference
+
+When running in editor mode (inside EventFoundry app iframe), the tracker communicates with the parent window using the following PostMessage events:
+
+### Messages Sent by Tracker (to Parent)
+
+#### `IFRAME_READY`
+Sent when the tracker initializes in editor mode.
+
+```javascript
+{
+  type: 'IFRAME_READY'
+}
+```
+
+#### `ELEMENT_SELECTED`
+Sent when a user selects an element in the visual editor.
+
+```javascript
+{
+  type: 'ELEMENT_SELECTED',
+  selector: 'button.primary',  // Generated CSS selector
+  tagName: 'BUTTON',           // Element tag name
+  text: 'Click me',            // Element text content
+  id: 'submit-btn',            // Element ID (if present)
+  classes: ['primary', 'btn'], // Array of classes
+  attributes: {                // All element attributes
+    type: 'submit',
+    'data-track': 'signup'
+  }
+}
+```
+
+#### `EVENT_FIRED`
+Sent in preview mode when a tracked event is triggered.
+
+```javascript
+{
+  type: 'EVENT_FIRED',
+  eventName: 'button_click',
+  eventParams: {
+    // Event parameters that would be sent to GA4
+  }
+}
+```
+
+### Messages Received by Tracker (from Parent)
+
+#### `ENABLE_PREVIEW_MODE`
+Activates preview mode for testing events.
+
+```javascript
+{
+  type: 'ENABLE_PREVIEW_MODE'
+}
+```
+
+#### `DISABLE_PREVIEW_MODE`
+Deactivates preview mode and returns to normal editor mode.
+
+```javascript
+{
+  type: 'DISABLE_PREVIEW_MODE'
+}
+```
+
+### Security
+
+All PostMessage communication includes origin validation to ensure messages are only accepted from authorized EventFoundry domains. This prevents malicious sites from interfering with the tracker's operation.
+
 ## License
 
 MIT © Kyle Logue

package/dist/tracker.min.js

@@ -1,22 +1 @@
-var EventFoundry=(()=>{var T=Object.defineProperty;var y=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var v=(t,n,e)=>n in t?T(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,E=(t,n)=>{for(var e in n||(n={}))I.call(n,e)&&v(t,e,n[e]);if(y)for(var e of y(n))D.call(n,e)&&v(t,e,n[e]);return t};var l=(t,n,e)=>new Promise((o,a)=>{var i=c=>{try{s(e.next(c))}catch(u){a(u)}},r=c=>{try{s(e.throw(c))}catch(u){a(u)}},s=c=>c.done?o(c.value):Promise.resolve(c.value).then(i,r);s((e=e.apply(t,n)).next())});var f=null,m=!1;function w(){return m}function b(){return["http://localhost","https://eventfoundry.app"]}function M(t){return b().includes(t)}function L(){if(m)return;m=!0;let t=document.createElement("style");t.textContent=`
-    .eventfoundry-highlight {
-      outline: 2px solid #3498db !important;
-      outline-offset: 2px;
-      cursor: pointer !important;
-    }
-    .eventfoundry-test-highlight {
-      outline: 3px solid #e74c3c !important;
-      outline-offset: 3px;
-      background-color: rgba(231, 76, 60, 0.1) !important;
-    }
-    .eventfoundry-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 999998;
-      pointer-events: none;
-      cursor: crosshair;
-    }
-  `,document.head.appendChild(t);let n=document.createElement("div");n.className="eventfoundry-overlay",document.body.appendChild(n),document.body.addEventListener("mouseover",e=>{e.target.classList.contains("eventfoundry-overlay")||(f&&f.classList.remove("eventfoundry-highlight"),e.target.classList.add("eventfoundry-highlight"),f=e.target)},!0),document.body.addEventListener("mouseout",e=>{e.target.classList.contains("eventfoundry-overlay")||e.target.classList.remove("eventfoundry-highlight")},!0),document.body.addEventListener("click",e=>{if(e.target.classList.contains("eventfoundry-overlay"))return;e.preventDefault(),e.stopPropagation();let o=e.target,a="";o.className&&typeof o.className=="string"&&(a=o.className.trim().split(/\s+/).filter(r=>!r.startsWith("eventfoundry-")).join(" "));let i={tagName:o.tagName.toLowerCase(),text:o.textContent.trim().substring(0,50),id:o.id,className:a,selector:x(o)};window.parent.postMessage({type:"ELEMENT_SELECTED",element:i},"*"),console.log("\u2192 ELEMENT_SELECTED sent to parent")},!0),window.addEventListener("message",e=>{if(M(e.origin)&&(e.data.type==="HIGHLIGHT_SELECTOR"&&(console.log("\u2190 HIGHLIGHT_SELECTOR received:",e.data.selector),_(e.data.selector)),e.data.type==="COUNT_MATCHES")){let o=e.data.selector,a=0;try{a=document.querySelectorAll(o).length}catch(i){a=0}window.parent.postMessage({type:"MATCH_COUNT_RESULT",selector:o,count:a},"*")}})}function g(t){return t?t.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g,"\\$1"):""}function F(t){return t?!!(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i.test(t)||/\d{13}/.test(t)||/^[a-f0-9]{16,}$/i.test(t)||/-\d{4,}$/.test(t)):!1}function d(t,n){try{let e=document.querySelectorAll(n);return e.length===1&&e[0]===t}catch(e){return!1}}function x(t){let n=[];if(t.id&&!F(t.id)){let r=`#${g(t.id)}`;d(t,r)&&n.push({selector:r,priority:100})}let e=Array.from(t.attributes).filter(r=>r.name.startsWith("data-")&&r.value);for(let r of e){let s=`[${r.name}="${g(r.value)}"]`;if(d(t,s)){n.push({selector:s,priority:90});break}}if(t.className&&typeof t.className=="string"){let r=t.className.trim().split(/\s+/).filter(s=>!s.startsWith("eventfoundry-"));for(let s of r){let c=`.${g(s)}`;if(d(t,c)){n.push({selector:c,priority:80});break}}}let o=t.tagName.toLowerCase();t instanceof SVGElement&&(o=t.tagName.toLowerCase());let a=o,i=t.parentElement;if(i){let s=Array.from(i.children).indexOf(t)+1;a+=`:nth-child(${s})`}return d(t,a)&&n.push({selector:a,priority:50}),n.length>0?(n.sort((r,s)=>s.priority-r.priority),n[0].selector):o}function _(t){document.querySelectorAll(".eventfoundry-test-highlight").forEach(n=>{n.classList.remove("eventfoundry-test-highlight")});try{let n=document.querySelectorAll(t);n.forEach(e=>{e.classList.add("eventfoundry-test-highlight")}),setTimeout(()=>{n.forEach(e=>{e.classList.remove("eventfoundry-test-highlight")})},3e3)}catch(n){console.error("EventFoundry: Invalid selector",t,n)}}function A(t,n=!1){!t||t.length===0||document.addEventListener("click",e=>{if(w())return;let o=t.filter(r=>{try{return e.target.closest(r.selector)!==null}catch(s){return console.warn("EventFoundry: Invalid selector",r.selector,s.message),!1}});if(o.length===0)return;let a=o[0],i=E({event_category:"EventFoundry",event_label:a.name},a.gaEventParams);n?console.log("EventFoundry [DEV]: Tracked event (not sent to GA4)",a.gaEventName,i):(console.log("EventFoundry: Tracked event",a.gaEventName,i),window.gtag("event",a.gaEventName,i)),o.length>1&&console.warn("EventFoundry: Multiple events matched, only firing first:",o.map(r=>r.name))},!0)}function k(){return["http://localhost","https://eventfoundry.app"]}function O(t){return k().some(e=>e==="http://localhost"?t.startsWith("http://localhost"):t===e)}function h(){try{return window.self!==window.top}catch(t){return!0}}function C(){h()&&(window.addEventListener("message",t=>{if(!O(t.origin)){console.warn("EventFoundry: Rejected postMessage from untrusted origin:",t.origin);return}t.data.type==="ENTER_EDIT_MODE"&&(console.log("\u2190 ENTER_EDIT_MODE received"),G())}),setTimeout(()=>{window.parent&&(window.parent.postMessage({type:"IFRAME_READY",timestamp:Date.now()},"*"),console.log("\u2192 IFRAME_READY sent to parent"))},100))}function G(){L()}var S=window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1",P=S?"http://localhost/api/tracking/events":"https://eventfoundry.app/api/tracking/events",p="eventfoundry_definitions",$=3600*1e3;function H(){let t=document.currentScript||document.querySelector("script[data-site-key]");if(!t)return console.error("EventFoundry: Could not find script tag"),null;let n=t.getAttribute("data-dev-mode"),e=n==="false"?!1:S||n==="true";return{siteKey:t.getAttribute("data-site-key"),measurementId:t.getAttribute("data-measurement-id"),devMode:e}}function j(t){return l(this,null,function*(){if(window.gtag&&typeof window.gtag=="function")return{hasGtag:!0,wasInjected:!1};if(!t)return console.warn("EventFoundry: No GA4 detected and no measurement ID provided. Events will not be tracked."),{hasGtag:!1,wasInjected:!1};let n=document.createElement("script");n.async=!0,n.src=`https://www.googletagmanager.com/gtag/js?id=${t}`,document.head.appendChild(n),window.dataLayer=window.dataLayer||[];function e(){dataLayer.push(arguments)}return window.gtag=e,e("js",new Date),e("config",t),yield new Promise(o=>{n.onload=o,setTimeout(o,5e3)}),{hasGtag:!0,wasInjected:!0}})}function N(){return l(this,null,function*(){let t=H();if(!t||!t.siteKey){console.error("EventFoundry: No site key provided");return}let{siteKey:n,measurementId:e,devMode:o}=t;console.log("\u2713 EventFoundry tracker loaded"),h()&&C();let{hasGtag:a,wasInjected:i}=yield j(e);if(!a){console.error("EventFoundry: Cannot track events without GA4");return}console.log(i?"\u2713 GA4 injected successfully":"\u2713 GA4 detected"),console.log(o?"\u26A0 Dev mode: Events disabled":"\u2713 Production mode: Events enabled");try{let r=yield R(n),s=r.events||r;A(s,o)}catch(r){console.error("EventFoundry: Failed to initialize:",r)}})}function R(t){return l(this,null,function*(){let n=q();if(n)return n;let e=yield fetch(`${P}?siteKey=${t}`);if(!e.ok)throw new Error(`API returned ${e.status}`);let o=yield e.json();return K(o),o})}function q(){try{let t=localStorage.getItem(p);if(!t)return null;let{data:n,timestamp:e}=JSON.parse(t);return Date.now()-e>$?(localStorage.removeItem(p),null):n}catch(t){return console.warn("EventFoundry: Cache read failed:",t),null}}function K(t){try{let n={data:t,timestamp:Date.now()};localStorage.setItem(p,JSON.stringify(n))}catch(n){console.warn("EventFoundry: Cache write failed:",n)}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",N):N();})();
+var EventFoundry=(()=>{var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames,N=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var A=(e,t,n)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,I=(e,t)=>{for(var n in t||(t={}))F.call(t,n)&&A(e,n,t[n]);if(N)for(var n of N(t))V.call(t,n)&&A(e,n,t[n]);return e};var K=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},W=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of H(t))!F.call(e,r)&&r!==n&&p(e,r,{get:()=>t[r],enumerable:!(o=j(t,r))||o.enumerable});return e};var q=e=>W(p({},"__esModule",{value:!0}),e);var g=(e,t,n)=>new Promise((o,r)=>{var a=d=>{try{l(n.next(d))}catch(m){r(m)}},s=d=>{try{l(n.throw(d))}catch(m){r(m)}},l=d=>d.done?o(d.value):Promise.resolve(d.value).then(a,s);l((n=n.apply(e,t)).next())});var ve={};K(ve,{reloadEventDefinitions:()=>b});var u=null,v=!1,y=null,f=!1;function P(){return v}function E(){return f}function B(){return["http://localhost","https://eventfoundry.app"]}function U(e){return B().includes(e)}function D(){if(v)return;v=!0;let e=document.createElement("style");e.textContent=` .eventfoundry-highlight { outline: 2px solid #3498db !important; outline-offset: 2px; cursor: pointer !important; } .eventfoundry-test-highlight { outline: 3px solid #e74c3c !important; outline-offset: 3px; background-color: rgba(231, 76, 60, 0.1) !important; } .eventfoundry-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999998; pointer-events: none; cursor: crosshair; } body.eventfoundry-edit-mode, body.eventfoundry-edit-mode * { cursor: crosshair !important; } `,document.head.appendChild(e);let t=document.createElement("div");t.className="eventfoundry-overlay",document.body.appendChild(t),y=t,document.body.classList.add("eventfoundry-edit-mode"),document.body.addEventListener("mouseover",n=>{f||n.target.classList.contains("eventfoundry-overlay")||(u&&u.classList.remove("eventfoundry-highlight"),n.target.classList.add("eventfoundry-highlight"),u=n.target)},!0),document.body.addEventListener("mouseout",n=>{f||n.target.classList.contains("eventfoundry-overlay")||n.target.classList.remove("eventfoundry-highlight")},!0),document.body.addEventListener("click",n=>{if(n.target.classList.contains("eventfoundry-overlay")||f)return;n.preventDefault(),n.stopPropagation();let o=n.target,r="";o.className&&typeof o.className=="string"&&(r=o.className.trim().split(/\s+/).filter(l=>!l.startsWith("eventfoundry-")).join(" "));let a=window.location.pathname+window.location.search+window.location.hash,s={tagName:o.tagName.toLowerCase(),text:o.textContent.trim().substring(0,50),id:o.id,className:r,selector:ne(o),page_path:a};window.parent.postMessage({type:"ELEMENT_SELECTED",element:s},"*")},!0),window.addEventListener("message",n=>{if(U(n.origin)&&(n.data.type==="HIGHLIGHT_SELECTOR"&&oe(n.data.selector),n.data.type==="COUNT_MATCHES")){let o=n.data.selector,r=0;try{r=document.querySelectorAll(o).length}catch(a){r=0}window.parent.postMessage({type:"MATCH_COUNT_RESULT",selector:o,count:r},"*")}})}function i(e){return e?e.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g,"\\$1"):""}function z(e){return e?!!(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i.test(e)||/\d{13}/.test(e)||/^[a-f0-9]{16,}$/i.test(e)||/-\d{4,}$/.test(e)):!1}function J(e,t){try{let n=document.querySelectorAll(t);return n.length===1&&n[0]===e}catch(n){return!1}}function w(e){return!e.className||typeof e.className!="string"?[]:e.className.trim().split(/\s+/).filter(t=>t&&!t.startsWith("eventfoundry-"))}function $(e,t=!0){let n=e.parentElement;if(!n)return null;let o=w(n);return t&&o.length>0?`.${i(o[0])}`:n.tagName.toLowerCase()}function c(e,t,n,o){return J(o,t)?(e.push({selector:t,priority:n}),!0):!1}function Y(e){let t=[];if(e.id&&!z(e.id)){let n=`#${i(e.id)}`;c(t,n,100,e)}return t}function Q(e){let t=[],n=Array.from(e.attributes).filter(o=>o.name.startsWith("data-")&&o.value);for(let o of n){let r=`[${o.name}="${i(o.value)}"]`;if(c(t,r,90,e))break}return t}function X(e){let t=[],n=w(e);if(n.length===0)return t;let o=e.tagName.toLowerCase();for(let r of n){let a=`${o}.${i(r)}`;if(c(t,a,85,e))break}if(n.length>=2){let r=`.${i(n[0])}.${i(n[1])}`;if(c(t,r,82,e),n.length>=3){let a=`.${i(n[0])}.${i(n[1])}.${i(n[2])}`;c(t,a,82,e)}}for(let r of n){let a=`.${i(r)}`;if(c(t,a,80,e))break}return t}function Z(e){let t=[],n=e.tagName.toLowerCase(),o=["type","name","href","role","aria-label"];for(let r of o){let a=e.getAttribute(r);if(a){let s=`${n}[${r}="${i(a)}"]`;if(c(t,s,70,e))break}}return t}function ee(e){let t=[],n=$(e,!0);if(!n)return t;let o=e.tagName.toLowerCase(),r=w(e);if(r.length>0){let s=`${n} .${i(r[0])}`;c(t,s,75,e)}if(r.length>0){let s=`${n} ${o}.${i(r[0])}`;c(t,s,72,e)}let a=`${n} ${o}`;return c(t,a,65,e),t}function te(e){let t=[],n=e.tagName.toLowerCase(),o=e.parentElement;if(!o)return[{selector:n,priority:10}];let r=$(e,!0),s=Array.from(o.children).indexOf(e)+1,l=`${r} ${n}:nth-child(${s})`;return c(t,l,50,e),t}function ne(e){let t=[];return t.push(...Y(e)),t.push(...Q(e)),t.push(...X(e)),t.push(...Z(e)),t.push(...ee(e)),t.push(...te(e)),t.length>0?(t.sort((n,o)=>o.priority-n.priority),t[0].selector):e.tagName.toLowerCase()}function oe(e){document.querySelectorAll(".eventfoundry-test-highlight").forEach(t=>{t.classList.remove("eventfoundry-test-highlight")});try{let t=document.querySelectorAll(e);t.forEach(n=>{n.classList.add("eventfoundry-test-highlight")}),setTimeout(()=>{t.forEach(n=>{n.classList.remove("eventfoundry-test-highlight")})},3e3)}catch(t){}}function M(){v&&(f=!0,y&&(y.style.display="none"),document.body.classList.remove("eventfoundry-edit-mode"),u&&(u.classList.remove("eventfoundry-highlight"),u=null))}function T(){v&&(f=!1,y&&(y.style.display=""),document.body.classList.add("eventfoundry-edit-mode"))}var _=console.log;function h(e,...t){e&&_&&_(...t)}function L(e,t=!1){!e||e.length===0||document.addEventListener("click",n=>{if(P()&&!E())return;let o=e.filter(s=>{try{return n.target.closest(s.selector)!==null}catch(l){return!1}});if(o.length===0)return;let r=o[0],a=I({event_category:"EventFoundry",event_label:r.name,transport_type:"beacon"},r.gaEventParams);if(h(t,"EventFoundry [DEV]: Tracked event (not sent to GA4)",r.gaEventName,a),t||window.gtag("event",r.gaEventName,a),E())try{window.parent.postMessage({type:"EVENT_FIRED",timestamp:Date.now(),eventName:r.name,gaEventName:r.gaEventName,selector:r.selector,params:a,pagePath:window.location.pathname},"*")}catch(s){}o.length>1},!0)}function re(){return["http://localhost","https://eventfoundry.app"]}function ae(e){return re().some(n=>n==="http://localhost"?e.startsWith("http://localhost"):e===n)}function S(){try{return window.self!==window.top}catch(e){return!0}}function k(){S()&&(window.addEventListener("message",e=>{if(ae(e.origin))switch(e.data.type){case"ENTER_EDIT_MODE":se();break;case"ENABLE_PREVIEW":ie();break;case"DISABLE_PREVIEW":ce();break;case"RELOAD_CONFIG":b();break}}),setTimeout(()=>{window.parent&&window.parent.postMessage({type:"IFRAME_READY"},"*")},100))}function se(){D()}function ie(){M()}function ce(){T()}var O=window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1",le=O?"http://localhost/api/tracking/events":"https://eventfoundry.app/api/tracking/events",de=3600*1e3;function C(e){return`eventfoundry_definitions_${e}`}function R(){let e=document.currentScript||document.querySelector("script[data-site-key]");if(!e)return null;let t=e.getAttribute("data-dev-mode"),n=t==="false"?!1:O||t==="true";return{siteKey:e.getAttribute("data-site-key"),measurementId:e.getAttribute("data-measurement-id"),devMode:n}}function ue(e){return g(this,null,function*(){if(window.gtag&&typeof window.gtag=="function")return{hasGtag:!0,wasInjected:!1};if(!e)return{hasGtag:!1,wasInjected:!1};let t=document.createElement("script");t.async=!0,t.src=`https://www.googletagmanager.com/gtag/js?id=${e}`,document.head.appendChild(t),window.dataLayer=window.dataLayer||[];function n(){dataLayer.push(arguments)}return window.gtag=n,n("js",new Date),n("config",e),yield new Promise(o=>{t.onload=o,setTimeout(o,5e3)}),{hasGtag:!0,wasInjected:!0}})}function x(){return g(this,null,function*(){let e=R();if(!e||!e.siteKey)return;let{siteKey:t,measurementId:n,devMode:o}=e;S()&&k();let{hasGtag:r,wasInjected:a}=yield ue(n);if(r){h(o,"\u26A0 Dev mode: Events disabled"),h(!o,"\u2713 Production mode: Events enabled");try{let l=(yield G(t)).events;L(l,o)}catch(s){}}})}function G(e){return g(this,null,function*(){let t=fe(e);if(t)return t;let n=yield fetch(`${le}?siteKey=${e}`);if(!n.ok)throw new Error(`API returned ${n.status}`);let o=yield n.json();return ge(e,o),o})}function fe(e){try{let t=C(e),n=localStorage.getItem(t);if(!n)return null;let{data:o,timestamp:r}=JSON.parse(n);return Date.now()-r>de?(localStorage.removeItem(t),null):o}catch(t){return null}}function ge(e,t){try{let n=C(e),o={data:t,timestamp:Date.now()};localStorage.setItem(n,JSON.stringify(o))}catch(n){}}function b(){return g(this,null,function*(){let e=R();if(!e||!e.siteKey)return;let{siteKey:t,devMode:n}=e;try{let o=C(t);localStorage.removeItem(o)}catch(o){}try{let r=(yield G(t)).events;L(r,n)}catch(o){}})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",x):x();return q(ve);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylelogue/eventfoundry-tracker",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "EventFoundry tracking script for custom GA4 event tracking",
   "main": "dist/tracker.min.js",
   "files": [
@@ -30,6 +30,7 @@
   "author": "Kyle Logue",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.27.0"
+    "esbuild": "^0.27.0",
+    "esbuild-minify-templates": "^0.13.1"
   }
 }