Skip to main content

Adding Event Tracking to Components

Learn how to use Vev's Interactions feature to track user engagement on your website without any coding.

Written by Iselin Ekornes

Understanding user behavior on your site is crucial for creating engaging experiences and achieving your business goals. By tracking how visitors interact with specific elements or components, you can gather valuable data to inform design decisions, optimize content, and improve overall user engagement. Vev's Interactions feature allows you to seamlessly add tracking events to your site elements without any coding required. This guide will walk you through the process of setting up tracking using interactions.

Setting up Analytics Integrations

Before adding tracking events, ensure that an analytics integration is installed and enabled in your project settings. This integration connects your Vev project to your preferred analytics platform (e.g., Google Analytics, Hotjar) to capture and analyze the events you set up. Without this integration, tracking events will not be recorded.

Install and Enable Integration

Option 1: Install analytics integration on hosting level

Install the analytics integration from the Hosting Settings of the hosting you want to publish to. This will ensure that the analytics is available to all projects that use this hosting. Read more here.

  1. Navigate to Account Settings, and go to Hosting.

  2. Choose the hosting where you want to add the analytics integration.

  3. Inside the Hosting Settings, click on Integrations from the sidebar.

  4. Search for and select your preferred analytics integration (e.g., Google Analytics).

  5. Follow the prompts to configure and enable the integration.

Note: This integration will apply to all projects published to this hosting.

Option 2: Install analytics integration on project level

If you prefer to add analytics only at the project level, you can do so by:

  1. Inside the Editor, open the Publish Menu.

  2. Add the Publish Destination you want to add the analytics integration to. This will take you into the area to manage your publish destinations. If you don't end up here, you can get there by clicking Manage Destinations from the publish menu.

  3. On the publish destination you want to add the integration to, click Show Integrations to expand the integration list.

  4. Click Add Integration, search for your preferred analytics integration, and follow the prompts to ensure the settings are added correctly.

Note: This integration will be added only to this publish destination. Any other destinations on this project will not be affected.

For more information on setting up integrations and how they work, read Understanding Integrations in Vev.

Adding Event Tracking Using Interactions

  1. From the Editor, select the element or component you want to track user engagement for.

  2. Navigate to the right sidebar. Click on the Interactions tab to open the interactions panel.

  3. Click the "+" icon to add a new interaction to the selected element.

  4. From the Trigger dropdown menu, select the event that will initiate the tracking.

    • Common triggers include Click or Hover.

  5. In the Action section, choose Track Event from the list of available actions.

    • Vev supports standard events that align with common analytics practices, making it easier to integrate and analyze data across different platforms. Utilizing standard events helps maintain consistency and improves the reliability of your tracking data. See the list of standard events.

  6. In the Target dropdown, select Tracking to specify that this action will send a tracking event.

Custom Events

You can also define custom events if you need to track interactions that are specific to your site.

  1. In the Event field, enter a descriptive name for the event.

    • For example: NewsletterSignUpClick or ProductImageHover

    • Tip: Avoid using spaces in event names; use camelCase or underscores instead.

  2. Add data parameters (optional)

    • To add data with the event:

      • Click the "+" icon next to Data.

      • Enter a Key and a corresponding Value for each data point. For example:

        • Key: planType

        • Value: Premium

      • You can add multiple data parameters by repeating this step.

Publish to Test

Publish your project to the appropriate Publish Destination. Test the interaction on the live site to ensure the tracking event triggers correctly.

For more detailed information on setting up tracking and analytics and how to implement them, check out our Developer Documentation on Tracking.

Related Articles
Did this answer your question?