An event (HTML event) is an action that can be performed either by a web browser or a user.
An event may be:
An HTML page that has finished loading.
A field that has been modified within an HTML page.
Scrolling on an HTML page.
Clicking a button or any other HTML element on a website, for example, an “add to cart” button.
They are mostly used to send information when a user performs any of the aforementioned actions.
An event listener lets you identify user actions on your page. TagCommander’s event listener allows you to track these actions:
Clicks on the pages’ elements,
Form submissions,
Vertical and/or horizontal scrolling on the page,
“Custom” events (when a TagCommander event function is identified on the page, ex: tC.event.xxx)
To use TagCommander’s event listener (currently only available for Chrome), please launch the Chrome extension.
Then press the F12 key: your browser’s console will open.
(1) Click the “TagCommander events” tab to open the Commanders Act console.
(2) You will get to the “Event listener” feature, which lets you listen to actions users perform on your site.
(3) Logged actions will appear on the list to the left as users continue browsing. They are stored even if you change pages.
(4) You can delete this list anytime by clicking the “clear all” button above the events list.
(5) In the table to the left, you can see the properties of events that are being listened to. Properties’ values can be sent within tags called on these events; they can also be used to condition tag calls. Please note: the list of attributes (properties) listened on all events is available in the TagCommander interface: follow this path “Options”> “Event Attributes”.
Click “options” to select elements to display on the list of events that are listened to:
“Custom” is checked by default: this means that tC.event.xxx functions identified on the page will appear on the list.
“Click” is checked by default: every time a click occurs on the page, an event will appear on the list of events being listened to. If you uncheck this option, clicks will no longer appear on the list.
“Form submission” is also checked by default: form submissions are detected and displayed on the list of events being listened to.
“Show only events with tags associated”: by clicking this option, only events upon which tags are called will appear on the list to the left.
This feature is not yet available.
It will allow you to target an element (button, link …) and to visualize its properties.
Technical staff can implement these functions on your site during the tagging phase:
tC.event.label() label: specify the name you wish to call your function. This function allows tagging an event directly form your site’s source code. It will let you load selected tags on it. Ex: you can ask your technical staff to implement the tC.event.add_to_cart function on the add to cart button if you wish to track this action.
tC.event.label(this, {“page_name”:””, “product_id”:””}) This function allows tracking events directly from your site’s source code and sending specific variables to it. You will then have to declare these variables from the “Options”> “Event variables” tab in order to be able to map your tags or to use them to create rules for the latter (click here to learn more). Ex: ask your technical staff to implement the function below on the add to cart button if you wish to know the precise product that was added to the cart, in case different products are present on the page: tC.event.add_to_cart(this, {“product_name”:”product_v2″, “product_id”:”12324″}).
Steps to add a tag that is called on an event are exactly the same as those followed to add a tag that is called when a container is loaded.
The first thing to do is selecting the desired tag in the tag library, or selecting a custom tag:
Then map your tag’s variable with those from the data layer, as you would do for any regular tag. All variable types are at your disposal: external variables, internal variables, event attributes and event variables:
In order to call a tag on an event, go to the Rules area, “triggers” section.
Click the “ADD A TRIGGER” button to have your tag called on an event.
There are many triggers available:
1) Two triggers allowing our TMS to automatically call tags on tracked events: “container loaded” and “DOM Ready”:
Container loaded: This trigger allows calling tags when the container is loaded on a page. It is the default trigger for all the tags you add to your container. This means that the tag will only be called when your JavaScript container loads on your site, but it will not be the case for other event types (such as a click, a page change within an “single page applications” environment, etc.). In order to trigger tags when a container loads on your page, all you need to do is selecting them from the list.
DOM Ready: This trigger allows calling tags when the page’s structure is built (on the “DOM Ready” event). To launch tags on this event, all you need to do is selecting them. They will be called on the DOM Ready event when the page loads.
2) Four triggers allowing to call tags on user actions (click, form submission, scrolling or any other event tracked with the tC.event function):
Click: This trigger allows calling tags whenever elements of the page are clicked. Example: if you would like to call a tag when a user clicks a button (ex: “add to cart” button), select the desired tag(s) and enter the code allowing to target the button or the link on your page in the “CSS Selector” field.
Must know:
To retrieve the CSS selector, open your browser’s console and use its targeting tool (1) to target one of your page’s elements (2). Then right-click, the code appearing in your console (3), click “Copy” and “Copy selector” (4). All you have to do next is pasting this code in the interface.
You can enter many selectors in the interface; you will have to separate them with commas.
Form submission: This trigger allows calling tags when a user submits a form. Example: when they click the “submit” button or press the Enter key. To call a tag when a form is submitted, follow the same steps you followed to call a tag upon a click. Indicate your trigger’s name (ex: “account creation confirmation”), select the desired tag(s) and enter the code allowing targeting the form submission button on your page in the “CSS Selector” field.
Scroll: This trigger allows calling tags when a user scrolls the page vertically or horizontally. In order to execute a tag on scrolling, you will need to enter your trigger’s name (ex: “30% vertical scrolling”), select the desired tag(s), choose the scrolling type (horizontal/vertical) from the dropdown menu, the expected scrolling and measuring unit (page percentage or pixels).
Custom: This trigger allows calling tags whenever a TagCommander event function (tC.event.xxx) is identified on the page. If you wish to execute a tag on a custom eventm, please indicate your trigger’s name (ex: “add to cart click”), select the desired tag(s) and enter the implemented event function’s name (ex : “tC.event.add_to_cart”).
In addition to these triggers, you can add perimeters and constraints to your tags.
Please note: constraints now have to be systematically associated to a trigger. They are linked to the “container loaded” trigger by default.
You can visualize all the rules associated to your tags anytime in the “Rules Summary” section. In addition to seeing the perimeters and constraints associated to your tags, you can see which triggers were selected.
Finally, generate and deploy your container so that your tags are called on you site according to the rules you configured.
“Vertical scrolling” and “horizontal scrolling”: by default scrolling is not displayed on the list in order not to overload it. If you wish to listen to these actions, all you need to do is to provide the value of the scrolling you wish to listen to in terms of screen percentage or pixels. You can provide several values and separate them with commas: In the example above, we scrolled the screen by 10% and 30%, originating two events that are displayed on the list.
