Velo Tutorial: Sending Tracking and Analytics Events
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:
| Type | ID | Usage |
|---|---|---|
| Text | docTitle | Display the document title |
| Button | downloadButton | Download the document |
| Repeater | docRepeater | Display a title and download button for each document |
| Dataset | docDataset | Connecting 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.
Then, we wire an event handler to the download button's click event.
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:
| Key | Value Type | Required | Usage |
|---|---|---|---|
| eventCategory | string | yes | Object that was interacted with |
| eventAction | string | yes | Type of interaction |
| eventLabel | string | no | Event category |
| eventValue | integer | no | Numeric value associated with the event |
Putting it all together, our code looks like this:
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.