How to Track GCLID/Wbraid in Shopify Contact Forms for Offline Conversions

[asandeep]

Hello everyone,

I'm looking for help integrating a hidden form field in Shopify's native contact forms to track a customer's GCLID/Wbraid. The goal is to use this information to upload offline conversions to our Google Ads account.

Here's the customer journey: A customer clicks on an ad, interacts with our website, and fills out a basic contact form. Shopify then emails these form submissions to our company email. We continue interacting with the customer through this email thread until the sale is completed offline.

To track conversions accurately, I need a way to include a hidden form field that captures the customer's click ID and ensures it is sent to us via email when the form is submitted. However, I'm having trouble implementing this.

Has anyone managed to successfully add such a hidden field and have it included in the email notification? Any advice or solutions would be greatly appreciated!

Thank you!

[DaisyVo]

Hi @asandeep 

To integrate a hidden form field in Shopify's native contact forms for tracking GCLID/Wbraid, follow these steps:

1-Add Hidden Field to Contact Form:

• Go to Online Store > Themes in Shopify Admin.
• Click Actions > Edit Code.
• Locate the contact form template file (contact-form.liquid or similar).
• Add the hidden field for GCLID/Wbraid:

<input type="hidden" id="gclid_field" name="gclid_field" value="">

2-Capture GCLID Using Javascript&colon;

• In the theme's JavaScript file (theme.js or a custom script):

document.addEventListener("DOMContentLoaded", function() {

  let gclid = new URLSearchParams(window.location.search).get('gclid');

  if (gclid) {

    document.getElementById('gclid_field').value = gclid;

    localStorage.setItem('gclid', gclid); // Store GCLID for later

  } else {

    let storedGclid = localStorage.getItem('gclid');

    if (storedGclid) {

      document.getElementById('gclid_field').value = storedGclid;

    }

  }

});

• This script captures GCLID from the URL and stores it in localStorage to retain it across pages.

3-Email Notification:

• Shopify's contact forms automatically email all submitted fields, including hidden ones. Ensure the hidden field's name attribute (gclid_field) matches the one you want to receive in the email.

Note: Test thoroughly to verify GCLID appears in form submissions and email notifications.

This approach allows tracking customer clicks accurately and sending the GCLID to your company email for offline conversion uploads.

I hope my answer is helpful 🙂

Best regards,

Daisy