# intempt:html / intempt:page / intempt:session

# Auto-tracked Events

Intempt automatically emits several browser-level events to capture user behavior without requiring manual tracking.

These events are exposed as native DOM events and can be listened to using `document.addEventListener(...)`.

They are primarily used for **debugging, customization, enrichment, and advanced tracking logic**.

---

# `intempt:html` — Auto-tracked HTML Events

The `intempt:html` event is automatically emitted by Intempt’s auto-tracker whenever a user interacts with HTML elements on the page.

This includes DOM interactions such as clicks, input changes, and form submissions.
The event exposes detailed interaction data through the `detail` object.

This listener is useful when you want to observe or react to low-level user interactions without manually tracking each event.

---

## When should you use `intempt:html`?

You typically listen to `intempt:html` when:

* you want to inspect raw DOM interactions
* you need to add custom logic based on clicks or input changes
* you want to debug or enhance auto-tracked behavior
* you want to selectively trigger custom events based on user actions

---

## Usage Example

```javascript
document.addEventListener('intempt:html', (event) => {
    const { detail } = event;
    const { eventName, target } = detail;

    // Your logic here
});
```

This example listens for all auto-tracked HTML interactions and exposes the event name and the DOM element involved.

---

## Event Detail Structure

| Property    | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| `eventName` | The DOM event name, such as `"click"`, `"change"`, or `"submit"` |
| `target`    | The HTMLElement on which the interaction occurred                |

---

# `intempt:page` — Auto-tracked Page View Events

The `intempt:page` event is automatically emitted for page-level activity, such as when a page is viewed or left.

It contains metadata about the current page, navigation context, and user movement across pages.

This event is emitted even in dynamic environments such as SPAs.

---

## When should you use `intempt:page`?

You typically listen to `intempt:page` when:

* you want to track page views and exits manually
* you need access to page metadata (URL, title, duration)
* you want to implement custom logic based on navigation events
* you are working with SPAs and want visibility into route changes

---

## Usage Example

```javascript
document.addEventListener('intempt:page', (event) => {
    const { detail } = event;
    const {
        eventName,
        fullUrl,
        title,
        windowWidth,
        pageId,
        duration,
        previousPage
    } = detail;

    // Your logic here
});
```

This example captures page-level information whenever a page is viewed or exited.

---

## Event Detail Structure

| Property       | Description                                          |
| -------------- | ---------------------------------------------------- |
| `eventName`    | `"View page"` or `"Leave page"`                      |
| `fullUrl`      | Full URL of the page                                 |
| `title`        | Page or document title                               |
| `windowWidth`  | Browser window width                                 |
| `pageId`       | Unique identifier for the page                       |
| `duration`     | Time spent on the page (undefined for `"View page"`) |
| `previousPage` | URL of the previously visited page                   |

---

# `intempt:session` — Auto-tracked Session Events

The `intempt:session` event is emitted automatically for session lifecycle events such as **Start Session** and **End Session**.

It provides session-level metadata, including location, duration, and the number of events recorded during the session.

---

## When should you use `intempt:session`?

You typically listen to `intempt:session` when:

* you want to understand session boundaries
* you need session-level analytics
* you want to trigger logic at session start or end
* you want visibility into session duration or activity volume

---

## Usage Example

```javascript
document.addEventListener('intempt:session', (event) => {
    const { detail } = event;
    const {
        eventName,
        region,
        city,
        country,
        ip,
        eventCounter,
        duration,
        type
    } = detail;

    // Your logic here
});
```

This example listens for session lifecycle events and exposes metadata such as location, duration, and total event count.

---

## Event Detail Structure

| Property       | Description                                               |
| -------------- | --------------------------------------------------------- |
| `eventName`    | Auto or custom event name within the session              |
| `region`       | User’s region (empty if blocked)                          |
| `city`         | User’s city (empty if blocked)                            |
| `country`      | User’s country (empty if blocked)                         |
| `ip`           | User IP address (empty if blocked)                        |
| `eventCounter` | Number of events recorded in the session                  |
| `duration`     | Session duration so far (undefined for `"Start Session"`) |
| `type`         | `"sessionStart"` or `"sessionEnd"`                        |