You already know that Air360 records everything 📼 by default.
"How does Air360 can perform this magic?" You might be thinking. You see, when a user clicks on your Add To Cart button on your website. Some technical code is triggered. This technical code doesn't make sense to anyone who is not a developer. For example, the code of an Add to Cart button on your website might look like this.
Not very friendly, I agree 😀
Air360 provides a way to create your own events with friendly names that are like a shortcut to the actual event (in technical language). Air360 magic is that it allows you to define that this code, is actually Add to Cart.
This is very powerful for 2 reasons:
- Tagging event doesn't require you to update your HTML code like other analytics solution do. Updating HTML code can be really a pain in the a** sometimes, it needs involving your developers, re-run tests & QA and so on. This can take days or even weeks for companies.
- The very same event in Air360 could be linked to multiple technical events. Let's say you have 3 different HTML code for adding a product ot your cart, you can simply link all of them to the same event Add to Cart in Air360. This makes life so much easier with analytics.
Let's get to the example
For the example above, we want to create an event named "Add to Cart", so what we need to do is tell Air360 that the code above is actually an event we want to name "Add to Cart".
In the HTML example above, we have a HTML button which is identified by a unique id called addToCart. In order to do this in Air360, all we have to do is define a new event that will be triggered when the HTML code with the tag "button" and the id "addToCart" are triggered.
Here is how the definition looks like:
We're basically saying that we want to track everything that matches the HTML tag "button" with the id "addToCart". Pretty simple right? 😎
Example #2: Let's add some accuracy
What if this button is used in different parts of your website but you need to track it only in a specific part of your website?
For instance, you might have a code that looks like this and you might be interested to track only this button when it is embedded in the div tag with the id add_to_cart_container.
Again, this is done very easily with Air360: All we have to do is use HTML selectors. This will make sure that for every click on this HTML button or any HTML element embedded within it, will be counted as an event.
What did we do here? We just told Air360 that any click on any element with id addToCart and that is contained in a HTML element with id add_to_cart_container will be counted as an event.
Pretty simple right?
One question you might have here is if this will also count clicks on HTML elements that are embedded within our HTML button tag? Maybe you already noticed above that we have an i and span tags as shown below.
The answer is yes, Air360 events automatically capture embeded child elements to keep things simple for you.
Example #3: What if we want to capture clicks on the whole area of a product zone.
Let's take the example of the website below. You might be interested in tracking clicks on areas in orange instead of only the ADD TO CART button.
In your website, the HTML of each block above might be coded as shown below.
As you can see, each product area is represented by a list item with the class "product_item" within an HTML list with id "products_list".
As we saw above, what we want to do is to capture clicks on the whole area of the product. Again, this can be done super simply as shown below.
As we saw in example #2, Air360 automatically captures all events that are embedded in the element we are tracking. The result on this in our current example is that any click in the area we defined above will be automatically captured.
We can also click on the "Preview" button in order to have a glimpse about how many users did this action during the past few days as shown below.
BOOM 😎 done! ✔️
Conclusion: Air360 manual events are a great way to track any HTML based events.