@kylelogue/eventfoundry-tracker 0.3.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 +1 @@
-var EventFoundry=(()=>{var y=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var F=(e,n,t)=>n in e?y(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t,I=(e,n)=>{for(var t in n||(n={}))A.call(n,t)&&F(e,t,n[t]);if(b)for(var t of b(n))$.call(n,t)&&F(e,t,n[t]);return e};var j=(e,n)=>{for(var t in n)y(e,t,{get:n[t],enumerable:!0})},H=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of G(n))!A.call(e,r)&&r!==t&&y(e,r,{get:()=>n[r],enumerable:!(o=R(n,r))||o.enumerable});return e};var V=e=>H(y({},"__esModule",{value:!0}),e);var f=(e,n,t)=>new Promise((o,r)=>{var s=c=>{try{i(t.next(c))}catch(l){r(l)}},a=c=>{try{i(t.throw(c))}catch(l){r(l)}},i=c=>c.done?o(c.value):Promise.resolve(c.value).then(s,a);i((t=t.apply(e,n)).next())});var re={};j(re,{reloadEventDefinitions:()=>L});var d=null,g=!1,v=null,u=!1;function C(){return g}function h(){return u}function W(){return["http://localhost","https://eventfoundry.app"]}function K(e){return W().includes(e)}function M(){if(g)return;g=!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 n=document.createElement("div");n.className="eventfoundry-overlay",document.body.appendChild(n),v=n,document.body.classList.add("eventfoundry-edit-mode"),document.body.addEventListener("mouseover",t=>{u||t.target.classList.contains("eventfoundry-overlay")||(d&&d.classList.remove("eventfoundry-highlight"),t.target.classList.add("eventfoundry-highlight"),d=t.target)},!0),document.body.addEventListener("mouseout",t=>{u||t.target.classList.contains("eventfoundry-overlay")||t.target.classList.remove("eventfoundry-highlight")},!0),document.body.addEventListener("click",t=>{if(t.target.classList.contains("eventfoundry-overlay")||u)return;t.preventDefault(),t.stopPropagation();let o=t.target,r="";o.className&&typeof o.className=="string"&&(r=o.className.trim().split(/\s+/).filter(i=>!i.startsWith("eventfoundry-")).join(" "));let s=window.location.pathname+window.location.search+window.location.hash,a={tagName:o.tagName.toLowerCase(),text:o.textContent.trim().substring(0,50),id:o.id,className:r,selector:B(o),page_path:s};window.parent.postMessage({type:"ELEMENT_SELECTED",element:a},"*")},!0),window.addEventListener("message",t=>{if(K(t.origin)&&(t.data.type==="HIGHLIGHT_SELECTOR"&&U(t.data.selector),t.data.type==="COUNT_MATCHES")){let o=t.data.selector,r=0;try{r=document.querySelectorAll(o).length}catch(s){r=0}window.parent.postMessage({type:"MATCH_COUNT_RESULT",selector:o,count:r},"*")}})}function m(e){return e?e.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g,"\\$1"):""}function q(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 p(e,n){try{let t=document.querySelectorAll(n);return t.length===1&&t[0]===e}catch(t){return!1}}function B(e){let n=[];if(e.id&&!q(e.id)){let a=`#${m(e.id)}`;p(e,a)&&n.push({selector:a,priority:100})}let t=Array.from(e.attributes).filter(a=>a.name.startsWith("data-")&&a.value);for(let a of t){let i=`[${a.name}="${m(a.value)}"]`;if(p(e,i)){n.push({selector:i,priority:90});break}}if(e.className&&typeof e.className=="string"){let a=e.className.trim().split(/\s+/).filter(i=>!i.startsWith("eventfoundry-"));for(let i of a){let c=`.${m(i)}`;if(p(e,c)){n.push({selector:c,priority:80});break}}}let o=e.tagName.toLowerCase();e instanceof SVGElement&&(o=e.tagName.toLowerCase());let r=o,s=e.parentElement;if(s){let a;if(s.className&&typeof s.className=="string"){let l=s.className.trim().split(/\s+/).filter(x=>!x.startsWith("eventfoundry-"));a=l.length>0?`.${m(l[0])}`:s.tagName.toLowerCase()}else a=s.tagName.toLowerCase();let c=Array.from(s.children).indexOf(e)+1;r=`${a} ${o}:nth-child(${c})`}return p(e,r)&&n.push({selector:r,priority:50}),n.length>0?(n.sort((a,i)=>i.priority-a.priority),n[0].selector):o}function U(e){document.querySelectorAll(".eventfoundry-test-highlight").forEach(n=>{n.classList.remove("eventfoundry-test-highlight")});try{let n=document.querySelectorAll(e);n.forEach(t=>{t.classList.add("eventfoundry-test-highlight")}),setTimeout(()=>{n.forEach(t=>{t.classList.remove("eventfoundry-test-highlight")})},3e3)}catch(n){}}function P(){g&&(u=!0,v&&(v.style.display="none"),document.body.classList.remove("eventfoundry-edit-mode"),d&&(d.classList.remove("eventfoundry-highlight"),d=null))}function D(){g&&(u=!1,v&&(v.style.display=""),document.body.classList.add("eventfoundry-edit-mode"))}function E(e,n=!1){!e||e.length===0||document.addEventListener("click",t=>{if(C()&&!h())return;let o=e.filter(a=>{try{return t.target.closest(a.selector)!==null}catch(i){return!1}});if(o.length===0)return;let r=o[0],s=I({event_category:"EventFoundry",event_label:r.name,transport_type:"beacon"},r.gaEventParams);if(n||window.gtag("event",r.gaEventName,s),h())try{window.parent.postMessage({type:"EVENT_FIRED",timestamp:Date.now(),eventName:r.name,gaEventName:r.gaEventName,selector:r.selector,params:s,pagePath:window.location.pathname},"*")}catch(a){}o.length>1},!0)}function z(){return["http://localhost","https://eventfoundry.app"]}function J(e){return z().some(t=>t==="http://localhost"?e.startsWith("http://localhost"):e===t)}function w(){try{return window.self!==window.top}catch(e){return!0}}function T(){w()&&(window.addEventListener("message",e=>{if(J(e.origin))switch(e.data.type){case"ENTER_EDIT_MODE":Y();break;case"ENABLE_PREVIEW":Q();break;case"DISABLE_PREVIEW":X();break;case"RELOAD_CONFIG":L();break}}),setTimeout(()=>{window.parent&&window.parent.postMessage({type:"IFRAME_READY"},"*")},100))}function Y(){M()}function Q(){P()}function X(){D()}var _=window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1",Z=_?"http://localhost/api/tracking/events":"https://eventfoundry.app/api/tracking/events",ee=3600*1e3;function N(e){return`eventfoundry_definitions_${e}`}function k(){let e=document.currentScript||document.querySelector("script[data-site-key]");if(!e)return null;let n=e.getAttribute("data-dev-mode"),t=n==="false"?!1:_||n==="true";return{siteKey:e.getAttribute("data-site-key"),measurementId:e.getAttribute("data-measurement-id"),devMode:t}}function te(e){return f(this,null,function*(){if(window.gtag&&typeof window.gtag=="function")return{hasGtag:!0,wasInjected:!1};if(!e)return{hasGtag:!1,wasInjected:!1};let n=document.createElement("script");n.async=!0,n.src=`https://www.googletagmanager.com/gtag/js?id=${e}`,document.head.appendChild(n),window.dataLayer=window.dataLayer||[];function t(){dataLayer.push(arguments)}return window.gtag=t,t("js",new Date),t("config",e),yield new Promise(o=>{n.onload=o,setTimeout(o,5e3)}),{hasGtag:!0,wasInjected:!0}})}function S(){return f(this,null,function*(){let e=k();if(!e||!e.siteKey)return;let{siteKey:n,measurementId:t,devMode:o}=e;w()&&T();let{hasGtag:r,wasInjected:s}=yield te(t);if(r)try{let i=(yield O(n)).events;E(i,o)}catch(a){}})}function O(e){return f(this,null,function*(){let n=ne(e);if(n)return n;let t=yield fetch(`${Z}?siteKey=${e}`);if(!t.ok)throw new Error(`API returned ${t.status}`);let o=yield t.json();return oe(e,o),o})}function ne(e){try{let n=N(e),t=localStorage.getItem(n);if(!t)return null;let{data:o,timestamp:r}=JSON.parse(t);return Date.now()-r>ee?(localStorage.removeItem(n),null):o}catch(n){return null}}function oe(e,n){try{let t=N(e),o={data:n,timestamp:Date.now()};localStorage.setItem(t,JSON.stringify(o))}catch(t){}}function L(){return f(this,null,function*(){let e=k();if(!e||!e.siteKey)return;let{siteKey:n,devMode:t}=e;try{let o=N(n);localStorage.removeItem(o)}catch(o){}try{let r=(yield O(n)).events;E(r,t)}catch(o){}})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",S):S();return V(re);})();
+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.3.0",
+  "version": "0.3.1",
   "description": "EventFoundry tracking script for custom GA4 event tracking",
   "main": "dist/tracker.min.js",
   "files": [