How to Capture UTM Parameters and Populate Them in Wix Forms Using Velo For Free Forever

Tracking UTM (Urchin Tracking Module) parameters is crucial for understanding the effectiveness of online marketing campaigns. By capturing these parameters, marketers can determine where traffic is coming from, what campaign it is part of, and how each source contributes to their goals. This article will guide you through the process of capturing UTM parameters from URLs and automatically populating them into hidden fields in a Wix form using Velo, the powerful web development platform from Wix.

What You Will Need

To successfully capture UTM parameters and populate them in your Wix forms, you'll need:

• A Wix account with access to the Wix Editor.

• Basic knowledge of navigating the Wix Editor.

• Familiarity with Wix Velo (formerly known as Corvid by Wix).
  

Enable Wix Velo on Your Site

First, enable Velo in your Wix Editor:

• Navigate to 'Settings' in the Wix Editor.

• Select 'Velo Developer Tools'.

• Toggle the switch to enable Velo, allowing you to add custom code to your Wix site.
  

Add Hidden Fields to Your Form

To capture UTM parameters, add hidden fields to your form:

• Open or create a new form in the Wix Editor.

• Click on the form to edit.

• Add a new text field for each UTM parameter: utm_campaign, utm_content, utm_medium, utm_source, utm_term.

• Configure each field to be hidden, ensuring they do not disrupt the form's layout.
  

Set Up the Field IDs

Assign unique and descriptive IDs to each hidden field to ensure you can accurately populate them:

• For each hidden field, set a custom ID such as 'cf_utm_campaign' for the Campaign parameter.
  

Script to Capture and Populate UTM Parameters

Using Velo, add a script to capture the UTM parameters from the URL and populate them into the form:

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {
    const query = wixLocationFrontend.query;
    
    // Use direct element ID references to set values
    if (query.utm_campaign) {
        $w('#cf_utm_campaign').value = decodeURIComponent(query.utm_campaign);
    }
    if (query.utm_content) {
        $w('#cf_utm_content').value = decodeURIComponent(query.utm_content);
    }
    if (query.utm_medium) {
        $w('#cf_utm_medium').value = decodeURIComponent(query.utm_medium);
    }
    if (query.utm_source) {
        $w('#cf_utm_source').value = decodeURIComponent(query.utm_source);
    }
    if (query.utm_term) {
        $w('#cf_utm_term').value = decodeURIComponent(query.utm_term);
    }
    
    // Debugging: Check that the values are set
    console.log("Campaign:", $w('#cf_utm_campaign').value);
    console.log("Content:", $w('#cf_utm_content').value);
    console.log("Medium:", $w('#cf_utm_medium').value);
    console.log("Source:", $w('#cf_utm_source').value);
    console.log("Term:", $w('#cf_utm_term').value);
});

Debugging Your Script

If the fields are not being populated correctly:

• Check for JavaScript errors in your browser’s developer tools (F12).

• Ensure the script runs after the fields are fully rendered. Adjust the script to wait for form fields if they load asynchronously.
  

How Gnovelty Can Help

Gnovelty offers specialized services in patent drafting, particularly for app ideas. At just $1099, you receive a complete patent draft tailored to protect your innovative app concept.

• Expertise in App Patents: Specialized knowledge in app-related patents.

• Affordable and Transparent Pricing: Receive high-quality services at a competitive rate.

• User-Friendly Process: Enjoy a simple, streamlined online process from your home.
  

For those looking to harness the full potential of their digital marketing efforts, capturing and utilizing UTM parameters effectively is a game-changer. Implementing these steps in Wix using Velo will streamline your processes, improve your data collection, and enhance your marketing analysis.

Non Provisional patent drafting - 1690$