Custom Event Tracking

Detect any action or event taking place on your website! 

What it is all about

With this new submodule, you are 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 (i.e. form inputs, buttons, images, checkboxes etc.) 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), but only the Auto-Tracking will work.

This support article is structured into the following sections:

  1. Getting Started
    1. Re-using event tags from Google Analytics
    2. Create a new event tag manually
    3. Auto-track default events on your website
  2. Main Events Table
    1. Overview
    2. Filtering & Grouping
    3. Filter templates
  3. Line-Diagram

 

 

Set the time

Just right above the table you see a bar which enables you to choose a certain time range or even a day for which the data below should correspond to. It is important to constrain the displayment of data to certain dates or periods in which you ran potential campaigns or took other measures in order to measure how successful these actions were for future planning. 

Some general hints 

  • Please make sure you have updated your tracking code with the most recent version (replace the current tracking code with the fresh one recently released), so you can benefit from this feature.
  • The limit for the events included is on a monthly basis. Resetting your data will not reset the counter of the fired events. It will start tracking again next month, or from the moment an upgrade takes place and the limit is lifted.
  • A lot of elements contain options to hover information or further actions. Just let your cursor run over various elements and discover how much data is actually packed into a tile.
  • Almost all views and some single elements have a little "i-icon" in the upper right corner, giving you yet more information about the view/element. Just move your cursor there and you will see more information.

Getting Started

Re-using event tags from Google Analytics

Tracking events in Visitor Analytics which have already been added using Google Analytics

In order to make a switch from Google Analytics to Visitor Analytics as easy as possible, we decided to structure our own event tags ideantically to the ones from Google Analytics. This will enable you – WITHOUT having to do ANY UPDATES  on your website – to track all your already added events within Visitor Analytics. Unfortunately, up until now, you are not able to import any past event data from Google Analytics to Visitor Analytics – this will be fixed soon.

Create a new event tag manually

 

Whenever you feel like creating a new event tag in order to track whatever happens on your website, you can do this easily within Visitor Analytics. You can crate new tags from the More options button, right by the title of the feature.  

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), but only the Auto-Tracking will work.

The event tag needs to be integrated within your source code afterwards in order to track the event you created the tag for. Please find instructions on how to add the event tag further below.

In general an event tag can be made of the following fields:

  1. Event Category: typically the object that was interacted with, i.e. image or button (mandatory field)
  2. Event Action: define on which action the event should be fired, i.e. play, click, pause, etc. (mandatory field)
  3. Event Label: can be a name or a word used to describe the characteristics or qualities of the specific event, to easily distinquish between similar events, i.e. product video, support image, etc. (optional field)
  4. Event Value: a numeric value associated with the event, i.e. 1, 2, 3, etc. (optional field)
  5. fields Object: any additional parameters you might want to add yourself to identify the event (optional field)

After you have defined the fields above, you can bind this new event tag to a certain action. They are shown to you in a dropdown. Choose the action you want the event to fire upon & click on the button "generate event tag" in the lower right corner within the modal afterwards.

 

The modal appearing will show you the generated event tag, which you can easily copy to your clipboard and then integrate it in your website wherever you want to. Every instance of this event firing will be automatically tracked by Visitor Analytics and presented to you within this module.

Integrating an event tag within your website

Once you have generated your new event tag, you need to integrate it within your website, so that Visitor Analytics 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):

 

 

HTML Instructions

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 inHTML 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 "visa-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).

Auto-track default events on your website

The first version of this functionality allows you to get a basic overview of the fired events for some default static elements on your site.

Here you can see what elements (input, select, textarea, button, radio, checkbox)  on the site could be automatically identified with the current version, and the actions (onmouseover, onclick, keyup, onchange) that can be tracked on each:

Important Notes:

  • This feature acts 100% complementary to any manual event tags, so without the need to add any manually created tag snippets to your source code. Just Turn the Auto-Tracking ON to get it started.
  • For Wix websites, only Auto-Tracking is possible (at least for the moment), so there will be no possibility to choose whether to enable Manual and/or Auto Tracking, but just the Auto one.
  • The Labels of the elements, are automatically procured from your HTML page, so directly from the code, as they were called when the site was built. If you want the label of a tracked element to have a different name, that needs to be changed within the HTML of the page directly.
    Both the Category and the Action labels of these auto-tracked elements are standard (as per the list presented above) and cannot be edited.
  • Elements that are part of a pop-up, or something dynamic that appear on your page as a result of certain actions taken by the user, they may not be properly treated by our system (e.g. Hovering an image of a product that will make a "Buy now" button to appear, might be one of the cases when we cannot track fired events on that newly appeared element, since it's not something static that was on the page from the beginning).
  • Very soon, we will also add other elements for which these fired events can be tracked, such as images, links, videos etc. for the next version(s).

   Turn The Event Tracking ON

Auto-Tracking Previewer

A Live Preview will also be available soon, so you can know exaclty what actions were triggered on which elements, viewing this directly within an image with your webpage 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:

Preview Auto-Tracked Elements

The Preview Settings

Every row of this Settings Menu shows your defined settings and some of the auto tracked elements related information:

  1. Results Based on Period: Selected period for which the number of fired events is being displayed. If you wish to see the data for a different interval, go back to the app, change the period and re-open the previewer.
  2. Sum of tracked auto-event triggers: The number of all event triggers that were tracked for all your auto-identified elements in the selected period of time.
  3. Sum of auto-tracked events on page: The number of all elements that could be auto-identified as trackable on the current page. This does not mean that there are actions tracked on all of them, it is just a count of elements that can be auto-tracked on this URL.
  4. Highlight All Auto-Tracked Events: Enabling this option, will highlight all the elements that could be auto-tracked and hovering each of them, will emerge more details about what actions were tracked, how many times they were fired and from which device. The detailed information tooltip can only be displayed for one element at a time, as you hover it.
  5. Show Sum of Triggers for each Auto-Tracked Events: This will switch the info tooltip from the detailed one presented above, to one that only displays the total amount of events fired for all elements on the page that is hovered, in the selected period.

Important Notes:

  • In order to ensure a flawless user experience, please deactivate all AdBlockers not to encounter any technical issues when using this.
  • The displayed amount of triggers always refer to the time period previously selected within the app.
  • During the event preview mode your visit is NOT counted nor do your actions cause any event trigger count.

Main Events Table

Overview

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:

  1. Category: Representing the value you have added yourself for this event tag’s field (manually added tags). This field will never be empty, as the field is mandatory for an event tag.
  2. Action: Representing the value you have added yourself for this event tag’s field (manually added tags). This field will never be empty, as the field is mandatory for an event tag.
  3. Event Label: Representing the value you have added yourself for this event tag’s field (manually added tags). This field can be empty, as the field is non-mandatory for an event tag.
  4. Event Value: Representing the value you have added yourself for this event tag’s field (manually added tags).. This field can be empty, as the field is non-mandatory for an event tag.
  5. Fields Object: Representing the value you have added yourself for this event tag’s field (manually added tags). This field can be empty, as the field is non-mandatory for an event tag.
  6. Location: On which page (page title/URL) the event has fired. Clicking on it will open up the corresponding page in a new tab.
  7. Event Firing Time: Giving time & date of when the event was fired.
  8. Type: Here you see whether the fired event is either a manually added event by yourself or if it has been identified by our auto-event-tracking. 

Filtering & Grouping

The table allows various filter and grouping options. The main difference between filtering and grouping is relatively simple. By filtering you are reducing the amount of events shown within the table. Grouping does not reduce the number of events shown in the table but rather connects events by the field you are grouping them by. Play with it in the table and you will easily understand the difference. Both approaches give you simple yet powerful possibilities to display your data and retrieve interesting facts from it.

Filter Templates

You can easily create filter templates for your set filter combinations. Once you have added a filter combination to the main table which you will probably re-use more often in the future, just click on the button 

Line Diagram

Overview

The line diagram basically reflects the data which presented to you in the table above. You will notice that you will only see one line – referring to the entire amount of events shown or filtered in the table above – by default.

 

The more filter you activate for the table above, the less events will be shown in the table. This will also reduce the amount of events reflected in the line diagram above.

Important to note is the behavior of the line diagram, once you group data within the table above. You will see that if the user wants to see the line diagram of a specific group, he/she then needs to filter it upfront…