> For the complete documentation index, see [llms.txt](https://doc.commandersact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.commandersact.com/features/sources/sources-catalog/web/containers/setup-guides-for-developers/browser-side-events-setup.md).

# Browser-side events setup

Commanders Act Events Triggers are onsite events that are used by Commanders Act users to dynamically execute Tags.

### Definitions

| Metric                 | Description                                                                                                 |
| ---------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Trigger Label**      | Label for an event that is used by Commanders Act users to execute Tags. e.g. add\_to\_basket               |
| **Trigger Data Layer** | A JavaScript object that can be accessed by Tags that are executed on the related Trigger. e.g. product\_id |

### Installation

Commanders Act allows to set up common Trigger automatically without the involvement of technical team (e.g. *Container loaded*, *DOM ready* or *Vertical Scroll 25%*). In cases where the default Triggers are not sufficient it is possible for technical personnel to implement custom Triggers. The necessary Trigger are defined during the Commanders Act setup process, but you can find a list of native Trigger on [this page](/features/sources/sources-catalog/web/containers/user-guides-for-browser-side-platform/tags/rules/triggers.md).

To install a custom Trigger on the website it is necessary to call a JavaScript function with the following pattern:

```javascript
tC.event.{{ Trigger Label }}(this, {{ Trigger Data Layer }});
```

A typical example is an *Add to basket* event where the product id of the selected product is sent with the event:

```javascript
tC.event.add_to_basket(this, { product_id: "12345" });
```

{% hint style="info" %}
**Trigger Data Layer Properties**

A common approach for the Trigger Data Layer is to always use the same properties like `event_label`, `event_type` and `event_value`—so in case of an `add_to_basket` Trigger the `event_value` would hold the product id of the selected product and in case of a `video_play` event the `event_value` would hold the current position within the video timeline. This allows to avoid to create multiple custom variable names for each individual event and therefore makes Trigger more generic.
{% endhint %}

{% hint style="warning" %}
**Trigger Error Handling**

In some situations it might happen, that a user interacts with a custom Trigger before the Commanders Act Web Container file was loaded. In this case using the Trigger function would cause a JavaScript `ReferenceError`. Therefore it is recommended to check the availability of the Trigger function before using it.

```javascript
if (tC && tC.event && typeof tC.event.add_to_basket === "function") {
    tC.event.add_to_basket(this, { product_id: "12345" });
}
```

{% endhint %}

### Testing

#### Via Quality Assurance Tag

The Tag template *Commanders Act - Event QA* in the Commanders Act Tag library automatically outputs event Data Layer information to the JavaScript console when executed. Assigning this Tag with the Trigger allows to log a snapshot of the Data Layer when the respective Trigger is executed.\
\
Another way, more technical: you can type in your console tc\_arrray\_events when the event is executed. The Data Layer of the event variables will be displayed.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.commandersact.com/features/sources/sources-catalog/web/containers/setup-guides-for-developers/browser-side-events-setup.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.