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

Pass elb a partial event: name is required, every other field is optional.

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

// With context, the trigger and a nested entity
elb({
  name: 'order complete',
  data: { id: 'O123', total: 99.99 },
  context: { test: ['checkout_v2', 0] },
  trigger: 'submit',
  nested: [{ entity: 'product', data: { id: 'P123', quantity: 1 } }],
});

The browser source adds source.url, source.referrer and the globals tagged on the page. Each call resolves with the push result.

Examples

Page events

The automatic page view uses the path as data.id; set it the same way:

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

User actions

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

Form submissions

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

API response tracking

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

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

  return products;
}

Error tracking

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

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 - window.elb, its stub and the walker commands