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.

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

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:

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

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.

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.

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

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.