EventFoundry Tracker

Embedded JavaScript tracking script for EventFoundry - enables custom GA4 event tracking with a visual editor.

Installation

Via unpkg CDN (Recommended)

Add the script to your website's HTML:

<!-- Latest version (auto-updates) -->
<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@latest/dist/tracker.min.js"
        data-site-key="YOUR_SITE_KEY_HERE"
        async></script>

Or pin to a specific version for production stability:

<!-- Pinned version -->
<script src="https://unpkg.com/@kylelogue/[email protected]/dist/tracker.min.js"
        data-site-key="YOUR_SITE_KEY_HERE"
        async></script>

Via npm

npm install @kylelogue/eventfoundry-tracker

Usage

Option 1: Auto-inject GA4

Let EventFoundry automatically inject Google Analytics 4:

<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"
        async></script>

Option 2: Use existing GA4

If you already have GA4 installed, EventFoundry will detect and use it:

<!-- Your existing GA4 installation -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- EventFoundry Tracker -->
<script src="https://unpkg.com/@kylelogue/eventfoundry-tracker@latest/dist/tracker.min.js"
        data-site-key="YOUR_SITE_KEY_HERE"
        async></script>

How It Works

EventFoundry Tracker runs in two modes:

1. Tracking Mode (default): Fetches event definitions from your EventFoundry account, attaches click listeners to elements, and sends events directly to GA4.

2. Editor Mode: When loaded in the EventFoundry app, enables a visual overlay for defining custom events by clicking elements on your site.

Features

• Lightweight: < 1KB gzipped
• 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+)

Configuration

The script accepts the following attributes:

• data-site-key (required): Your EventFoundry site key
• data-measurement-id (optional): Your GA4 measurement ID (if not already installed)

Development

# Install dependencies
npm install

# Build for production
npm run build

# Development watch mode
npm run dev

License

MIT © Kyle Logue