How To Find Out Which Individual Form Submissions Came From Paid Ads

Who is our client and what problem did they want to solve?

Our client owns a seamless gutter installation business. For this client, we run both Google Ads and Facebook Ads. They wanted to track which traffic source was converting more leads so we implemented code in Wix to do just that.

What solution did we provide?

Whenever a visitor comes to a website from a Google Ad or a Facebook Ad, the URL that they will arrive at is formed something like this: https://websitetheyclickedtheadfor.com?gclid=XXXXXXX or https://websitetheyclickedtheadfor.com?fbclid=XXXXXXX. The part after the "?" is referred to as the query string of a URL and the gclid=XXXX or fbclid=XXXX means Google click ID equals XXXX or Facebook click ID equals XXXX.

Knowing this, we implemented code using the 'wixLocation' API to analyze the query whenever a visitor arrived on the site. If a Facebook or Google Click ID was present in the query string, we would use the 'wix-storage' API to record the value of their click ID in the browser's Local Storage and see whether it was a Google Click ID or Facebook Click ID.

What were the next steps?

Next, we added two fields to the forms that visitors would use and set them to 'collapsed' in the Elements panel of the Wix Editor so that they wouldn't take up space and would appear hidden but could still be accessed in the code.

After that, we wrote code to check the visitor's local storage to see if there was an entry for Google Click ID or Facebook Click ID, and if so, retrieved those entries and set the values of the form fields to the value of the entries.

This allowed us to see in the Form Submission tables which traffic source was converting more leads.

Check out the code we used below:

import { local } from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {

    const query = wixLocation.query;
    console.log("Query is ", query);
    if (typeof query.gclid !== 'undefined') {
        console.log(`Query gclid is ${query.gclid}`);
        local.setItem("GCLID", `${query.gclid}`);
    }

    if (typeof query.fbclid !== 'undefined') {
        console.log(`Query fbid is ${query.fbclid}`);
        local.setItem("FBCLID", `${query.fbclid}`);
    }

    const gclid = local.getItem("GCLID");
    const fbclid = local.getItem("FBCLID");

    if (gclid) {
        $w("#gclid").value = gclid;
    }

    if (fbclid) {
        $w("#fbclid").value = fbclid;
    }

});

import { local } from 'wix-storage';

$w.onReady(function () {
    const gclid = local.getItem("GCLID");
    const fbclid = local.getItem("FBCLID");

    if (gclid) {
        $w("#contactGclid").value = gclid;
    }

    if (fbclid) {
        $w("#contactFbclid").value = fbclid;
    }
});

Interested in setting up something like this for your ads? Contact us at 225-250-1888 or email robert@roberthebertmedia.com.

About our company

RHM specializes in helping businesses of all sizes and across all industries achieve their digital and web marketing needs. Whether it's designing a new website, building an app, performing custom development, or running Google Ads, our goal is to showcase how you are the best at what you do and help people connect with you. Contact us at 225-250-1888 to get started!