How to add utm tags to a wix form?

Question

I am currently attempting to include UTM tags in a webhook that I am sending from a wix form. However, upon sending the webhook, I am either receiving an empty response or receiving "google.co.il" source. I am expecting specifically Google Ads or email sources. I have added the code that I am using in an attempt to make this function properly. Any assistance or guidance would be greatly appreciated..

 

export function wixForms1_wixFormSubmitted(event) {
    var obj = {};
    var i = 0;
    for (i=0;i<event.fields.length;i++){
        obj[event.fields[i].id] = event.fields[i].fieldValue;
    }
    //console.log(obj);
    fetch( "https://hook.eu1.make.com/62tsltjotop6iwboufggguuxhhqrjaen", {
    "method": "post",
    "headers": {
        "Content-Type": "application/json"
    },
    "body": JSON.stringify(obj)
    } )
    .then( (httpResponse) => {
        if (httpResponse.ok) {
        return httpResponse.json();
        } else {
        return Promise.reject("Fetch did not succeed");
        }
    } )
    .then( (json) => console.log(json) )
    .catch(err => console.log(err));
}

$w.onReady(function () {
    const query = wixLocation.query;
        if (query) {
            $w('#refbox').value = JSON.stringify(query);
        }
 let params = wixLocation.query
    console.log(params)
    $w('#campaign').value = params.campaign_name
    $w('#source').value = params.utm_source
    });
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
 
});
import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
import {local, session, memory} from 'wix-storage';
 
let referrer = wixWindow.referrer;
let previousPageURL;
 
$w.onReady(function () {
 previousPageURL = session.getItem("page");
 session.setItem("page", wixLocation.url);
});
 
 
$w.onReady(function () {
    // Write your JavaScript here
    const prvurl = wixLocation.url;
        if (prvurl) {
            $w('#prvurl').value = JSON.stringify(prvurl);
    
        }
 
 
    // To select an element by ID use: $w("#elementID")
 
    // Click "Preview" to run your code
        const query = wixWindow.referrer;
        if (query) {
            $w('#refbox').value = JSON.stringify(query);
    
        }
    
 
 
}
);

Answer 1

You must create the fields on the form, like cf_utm_campaign, cf_utm_medium and so, and make it hidden (using styles).

After that, add this custom script:

    <script>
    
        // Get the current URL
        var currentUrl = window.location.href;
    
        // Define an object with mappings of variables to corresponding text fields
        var fieldMappings = {
            utm_campaign: 'cf_utm_campaign',
            utm_content: 'cf_utm_content',
            utm_medium: 'cf_utm_medium',
            utm_source: 'cf_utm_source',
            utm_term: 'cf_utm_term'
        };
    
        // Loop through the mappings and insert the values into the corresponding text fields
        for (var param in fieldMappings) {
            var fieldName = fieldMappings[param];
            var match = currentUrl.match(new RegExp('[?&]' + param + '=([^&]+)'));
    
            if (match) {
                var paramValue = match[1];
                var textField = document.querySelector('input[name="' + fieldName + '"]');
    
                if (textField) {
                    textField.value = paramValue;
                }
            }
        }
        
    </script>

This will "hydrate" your fields with the values received by the location url.