Velo Tutorial: Sending Tracking and Analytics Events

Visit the Velo by Wix website to onboard and continue learning.

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:

TypeIDUsage
TextdocTitleDisplay the document title
ButtondownloadButtonDownload the document
RepeaterdocRepeaterDisplay a title and download button for each document
DatasetdocDatasetConnecting elements to document data stored in a collection

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 wixWindowFrontend at the top of our page code.

Copy
1
import wixWindowFrontend from 'wix-window-frontend';

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

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

Finally, we call the trackEvent() function. Here, we send a custom event that indicates a download has occurred. We also grab the title of the document that was downloaded and add it to the event.

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

KeyValue TypeRequiredUsage
eventCategorystringyesObject that was interacted with
eventActionstringyesType of interaction
eventLabelstringnoEvent category
eventValueintegernoNumeric value associated with the event
Copy
1
wixWindowFrontend.trackEvent("CustomEvent", {
2
  "event": "Document Download",
3
  "eventCategory": "Downloads",
4
  "eventAction": "Download",
5
  "eventLabel": $w('#docDataset').getCurrentItem().title
6
} );

Putting it all together, our code looks like this:

Copy
1
import wixWindowFrontend from 'wix-window-frontend';
2


3
export function downloadButton_click(event) {
4
  wixWindowFrontend.trackEvent("CustomEvent", {
5
    "event": "Document Download",
6
    "eventCategory": "Downloads",
7
    "eventAction": "Download",
8
    "eventLabel": $w('#dataset1').getCurrentItem().title
9
  } );
10
}

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.

Was this helpful?
Yes
No