JavaScript

Capture events programmatically using the elb() function instead of HTML attributes.

When to use

• Dynamic events not tied to DOM elements
• Custom application logic
• Events triggered by API responses
• Complex conditional tracking

Basic usage

// Push an event
elb('product view', { id: 'P123', name: 'Widget' });

// With context
elb('order complete', { total: 99.99 }, { test: 'checkout_v2' });

Event structure

The elb function accepts:

1. Event name: "entity action" format (required)
2. Data object: Properties for the event (optional)
3. Context: Contextual information (optional)
4. Trigger: The trigger name (optional)
5. Nested: Nested entities (optional)

elb('entity action', data, context, trigger, nested);

Examples

Page events

elb('page view', {
  title: document.title,
  path: location.pathname
});

User actions

function handleAddToCart(product) {
  elb('product add', {
    id: product.id,
    name: product.name,
    price: product.price,
    quantity: 1
  });
}

Form submissions

form.addEventListener('submit', (e) => {
  elb('form submit', {
    id: form.id,
    type: form.dataset.formType
  });
});

API response tracking

async function fetchProducts() {
  const response = await fetch('/api/products');
  const products = await response.json();

  elb('products load', {
    count: products.length,
    category: currentCategory
  });

  return products;
}

Error tracking

window.addEventListener('error', (event) => {
  elb('error occur', {
    message: event.message,
    source: event.filename,
    line: event.lineno
  });
});

Object syntax

You can also pass events as objects:

elb({
  event: 'product view',
  data: { id: 'P123', name: 'Widget' },
  context: { test: 'engagement' }
});

Comparison with HTML Attributes

Use Case	HTML Attributes	JavaScript
Click tracking	Best	Works
Visibility tracking	Best	Manual
Dynamic values	Possible	Best
Non-DOM events	Not possible	Required
API response events	Not possible	Required
Conditional tracking	Limited	Best

tip

Use HTML attributes for DOM-based interactions (clicks, visibility, hovers) and JavaScript for dynamic or non-DOM events.

See also

• HTML Attributes - Declarative DOM-based tracking
• Tagger - Programmatic attribute generation
• Commands - Full elb API reference