How to track UTM parameters in the wix form?

Ask the community
,
5

Hi there, I went throught the same scenario. This is how i’m able to capture UTM parameters from the landing page, store them in session, and autofill the hidden fields in a lightbox.

Note: My code can be optimised further. gclid, wbraid, gbraid, and msclkid can be saved into one Gclid field instead of having a hidden field for each one.

Step 1: Create a custom form using this article. There will be a Collection, a dataset of the collection on the page where the form is put, and a custom form to collect leads to save them to the collection.

Step 2: Collect UTM parameters from the landing page and store them in the session.

import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
import { session } from ‘wix-storage’;
import * as wixSiteWindow from ‘@wix/site-window’;

$w.onReady(function () {
// Use standard browser API to read the full URL
const queryString = wixLocation.query;
const urlParams = new URLSearchParams(queryString);

// Store UTM and ad tracking parameters
session.setItem('utm_campaign', urlParams.get('utm_campaign') || '');
session.setItem('gclid', urlParams.get('gclid') || '');
session.setItem('adset', urlParams.get('adset') || '');
session.setItem('adid', urlParams.get('adid') || '');

});

Step 3: Put the collected parameters into the hidden fields of the form as soon as the form loads.

import {session} from ‘wix-storage’;

$w.onReady(function () {
// Set primary hidden fields
$w(‘#input3’).value = session.getItem(‘utm_campaign’) || ‘’;
$w(‘#input4’).value = session.getItem(‘gclid’) || ‘’;
$w(‘#input5’).value = session.getItem(‘adset’) || ‘’;
$w(‘#input6’).value = session.getItem(‘adid’) || ‘’;

// Set extra hidden fields for tracking alternatives
$w('#input7').value = session.getItem('wbraid') || '';
$w('#input8').value = session.getItem('gbraid') || '';
$w('#input9').value = session.getItem('msclkid') || '';

});

import {session} from ‘wix-storage’;

$w.onReady(function () {
// Set primary hidden fields
$w(‘#input3’).value = session.getItem(‘utm_campaign’) || ‘’;
$w(‘#input4’).value = session.getItem(‘gclid’) || ‘’;
$w(‘#input5’).value = session.getItem(‘adset’) || ‘’;
$w(‘#input6’).value = session.getItem(‘adid’) || ‘’;

// Set extra hidden fields for tracking alternatives
$w('#input7').value = session.getItem('wbraid') || '';
$w('#input8').value = session.getItem('gbraid') || '';
$w('#input9').value = session.getItem('msclkid') || '';

});