> 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")

Pass `elb` a [partial event](/preview/pr-749/docs/getting-started/event-model.md#push-an-event): `name` is required, every other field is optional.

```javascript
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](/preview/pr-749/docs/getting-started/event-model.md#push-an-event).

## Examples[​](#examples "Direct link to Examples")

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

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

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

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

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

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

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

### API response tracking[​](#api-response-tracking "Direct link to API response tracking")

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

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

## 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](/preview/pr-749/docs/sources/web/browser/tagging/html-attributes.md) - Declarative DOM-based tracking
* [Tagger](/preview/pr-749/docs/sources/web/browser/tagger.md) - Programmatic attribute generation
* [Commands](/preview/pr-749/docs/sources/web/browser/commands.md) - `window.elb`, its stub and the walker commands