How To Setup Event Tracking with Velo by Wix

Adding tracking code to your site allows you to monitor how users interact with your site. Collecting tracking data gives you insight into their online behavior and helps you to optimize your online marketing strategies.

In this article, we demonstrate how to send a tracking event from your page code. We start by connecting our site to an analytics tool. Then, we setting up a simple page. Finally, we add code so that a tracking event is sent when a user performs a specific interaction.

Tracking & Analytics Tools

We begin by connecting the desired tracking and analytics tools to our site. Currently, you can send events through code to Google Analytics and Facebook Pixel.

Note
Tracking & Analytics requires you to have an account with an external analytics tool and only works with premium sites.

In our example, we've connected our site to Google Analytics.

Page Setup

You set up your page as you normally would. However, you'll need to decide when you want to send tracking events.

In our example, we send an event when a user clicks a button to download a document. On our page we have a repeater that displays a list of documents stored in a collection. When one of the Download buttons is clicked, we send a custom Document Download event that contains the name of the document that was downloaded.

On our page we have the following elements:

The repeater, button, and text elements are connected to the dataset so that the repeater displays the title of each document and a button to download the document. 

Tracking Code

You can add the code to send a tracking event wherever it suits your needs. Most often, you will add it in an event handler that responds to a user interaction, such as a button click.

In our example we want to track each time a user clicks the download button. So, we add the tracking code to an event handler wired to the download button.

First, we import 

wixWindow

import wixWindow from 'wix-window';

Then, we wire an event handler to the download button's click event.

export function downloadButton_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}

Finally, we call the 

trackEvent()

When sending a custom event to Google Analytics, use the following parameters:

Key: eventCategory
Value Type: string
Required: Yes
Usage: Object that was interacted with

Key: eventAction
Value Type: string
Required: Yes
Usage: Type of interaction

Key: eventLabel
Value Type: string
Required: No
Usage: Event category

Key: eventValue
Value Type: integer
Required: No
Usage: Numeric value associated with the event

wixWindow.trackEvent("CustomEvent", {
  "event": "Document Download",
  "eventCategory": "Downloads",
  "eventAction": "Download",
  "eventLabel": $w('#docDataset').getCurrentItem().title
} );

Putting it all together, our code looks like this:

import wixWindow from 'wix-window';

export function downloadButton_click(event) {
  wixWindow.trackEvent("CustomEvent", {
    "event": "Document Download",
    "eventCategory": "Downloads",
    "eventAction": "Download",
    "eventLabel": $w('#dataset1').getCurrentItem().title
  } );
}

When a user clicks the download button, we'll see an event registered in our analytics tool. 

Learn More

To learn more about the types of events you can send and their corresponding parameters, see trackEvent( ) in the API Reference.

Previously published at https://support.wix.com/en/article/velo-tutorial-sending-tracking-and-analytics-events