TWIPLADetect Any Action or Event Taking Place on Your Website!
In this submodule, you will be able to create your very own tags for any event you would like to be tracked, add them to your website and see how the firing of an event develops over time. You can also use the auto-tracking to scan your website for default elements without having to add any extra code & track them right away. This feature helps you immensely in tracking events you specifically want to know.
Important Note: The Manual Event Tracking is not available for Wix websites (no custom tags can be created, as there is no control of the code for specific elements on the page). The Auto-Tracking will work.
This support article is structured into the following sections:
Right above the tiles, you can see a date picker. This enables you to select a certain time period, or specific day, for which you want the Dashboard's data to correspond.
It is crucial to limit the presentation of data to specific dates or timeframes during which you executed potential campaigns or implemented other strategies. This will allow you to assess the effectiveness of these actions and use the insights gained for future planning.
The first tab of this submodule is the "Overview". It is divided into two sections, "All Triggered Events Tracked" and the "Line Diagram".
Together, these sections offer a complete and insightful overview of the events that have been triggered.
This table gives an overview of all the events that have been fired throughout the selected period of time. Each line represents one firing of an event. So if the same event was fired 20 times in the selected period of time, then there would be 20 lines for this event.
The table contains the following columns:
The line diagram basically reflects the data presented to you in the table above. You will notice that only one line is visible – referring to the entire amount of events shown or filtered in the table above – by default.
The table allows various filtering and grouping options. The main difference between filtering and grouping is relatively simple:
Play with it on the table, and you will easily understand the difference. Both approaches will give you simple yet powerful possibilities for displaying your data and retrieving interesting facts from it.
Important Hints:
The second tab of this submodule is called "Event Tag Generator". Whenever you feel like creating a new event tag to track whatever happens on your website, you can do this easily within the application.
Important Note: Manual Event Tracking is not available for Wix websites (no custom tags can be created, as there is no control over the code for specific elements on the page), but only Auto-Tracking will work.
Please find instructions on how to add the event tag further below. In general, an event tag can be made of the following fields:
Once you have defined all the fields above and have chosen the action you want the event to fire upon, click the "Generate Event Tag" button. After the event tag is created, you'll see the next window wherein you can copy the generated event tag. You can also create another tag by tapping the "Generate Another Event Tag" button.
The create event tag needs to be integrated within your source code afterwards in order to track the event you created the tag for.
Here’s a list of the HTML events(actions) used and their description:
Once you have generated your new event tag, you need to integrate it within your website, so that the application can track the firing of this event. Each created tag must be added within each individual element that you want to track.
It is pretty simple and there are various ways on how to do this (depending on the website builder platform). Below we have an example for HTML:
Edit your HTML source-code and add the Event Tag to your desired elements.
You can add the tag our app creates for your event, either as a JS snippet or directly on the element, as per the tutorial below.
Here is an example for a button in HTML and how it should look like so that the click on that button is tracked as an event:
<button id="important-btn">Click me!</button>
Option A: JS snippet
<script>
document.getElementById("important-btn")
.addEventListener("click", function(){
va("send", "event", "example-category", "btn-click", "Important Button")
});
</script>Option B: directly on the element
<h2 onclick="va('send', 'event', 'example-category', 'btn-click', 'important', 123);">Important button</h2>
Both options are semantically correct and do the same thing in the ideal case.
However, Option A allows for more flexibility. For example you could add a "twipla-track" class to multiple elements and call the va method in a more dynamic manner by relying on JS capabilities.
The limitation with Option B is that it might be overridden by some other JS code that is loaded after the DOM is rendered ( element.onclick = function(){ ... } ), thus causing our code never to be called.
In comparison, Option A allows an unlimited number of event listeners to be added (as long as the memory on the user agent device can withstand it).
This section of the Module Settings allows you to select which type of event you want to be tracked by our platform: manually created event tags, default events being auto-tracked or both.
Once accessed, you will have two types of settings available:
Important Notes:
The Live Preview shows exactly what actions were triggered on which elements, viewing this directly within an image with your web page itself.
Within the main table of tracked events, there is a "Show event on website" button, for the auto-tracked elements.
Click that and a preview of the page itself will be open in a new tab with the possibility to see important details about your auto-tracked events, in a more human readable way, than only the table of the tracked events you've been previously looking at.
Live-Tracking Preview
Below is a sample of the screen that you will see once you click on the "Show event on website" button. There are three important parts here:
Live-Tracking Mode Settings
Tapping the Live-Tracking Mode Settings Icon, will open the settings view. Every row of this Settings Menu shows your defined settings and some of the auto tracked elements related information:
Important Notes:
