> Part of the walkerOS documentation. Project overview and full index: <https://www.walkeros.io/llms.txt>

# JavaScript

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

## When to use[​](#when-to-use "Direct link to When to use")

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

## Basic usage[​](#basic-usage "Direct link to 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[​](#event-structure "Direct link to 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[​](#examples "Direct link to Examples")

### Page events[​](#page-events "Direct link to Page events")

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

### User actions[​](#user-actions "Direct link to User actions")

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

### Form submissions[​](#form-submissions "Direct link to Form submissions")

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

### API response tracking[​](#api-response-tracking "Direct link to 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[​](#error-tracking "Direct link to Error tracking")

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

## Object syntax[​](#object-syntax "Direct link to 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[​](#comparison-with-html-attributes "Direct link to 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[​](#see-also "Direct link to See also")

* [HTML Attributes](https://www.walkeros.io/docs/sources/web/browser/tagging/html-attributes.md) - Declarative DOM-based tracking
* [Tagger](https://www.walkeros.io/docs/sources/web/browser/tagger.md) - Programmatic attribute generation
* [Commands](https://www.walkeros.io/docs/sources/web/browser/commands.md) - Full elb API reference