Google conversion event tracking on contact forms

Wishlist Contact Form
1

In order for me to run ads that are focused on lead generation through Google, I need to integrate a script from Google to track the “submit” button.

This will enable me to see the success of my ad campaigns, and help me to optimise the campaigns.

I can imagine having this integration would also benefit other functionalities that Elfsight offer too.

2 Likes
2

Hi there, @Rebecca_Lloyd and welcome to the Community :waving_hand:

If I got you right, you just need to track clicks on the Submit button in your Contact Form widget. In this case, our devs prepared a Google Analytics code for this.

Please add this part of the code to your website <head>:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>

In the code above, you need to replace G-ID with your actual website ID for Google Analytics. This article will help you find your ID - Find your Google tag ID.

And then just add the rest of the script to the Custom JS field on the Settings tab of your widget’s settings:

function sendEvent(config) {
  if (typeof ga !== "undefined") {
    ga('send', 'event', {
      eventAction: config.action,
      eventCategory: config.category,
      eventLabel: config.label
    });
  }
  if (typeof gtag !== "undefined") {
    gtag('event', config.action, {
      'event_category':  config.category,
      'event_label':  config.label
    });
  }
}

document.addEventListener('click', function (event) {
  function isHitClass(e, selector) {
    return e.target && e.target.closest(selector);
  }

  if (isHitClass(event, '[class*="ButtonBase__ButtonContainer"][aria-label="Submit"]')) {
    const requiredFields = document.querySelectorAll('[class*="FormLayout__Container-sc"] input[aria-required="true"]');
    const isFieldsFilled = [...requiredFields].every(field => field.value);

    if (isFieldsFilled) {
      sendEvent({
        action: 'click',
        category: 'Elfsight Form Submit Button',
        label: 'Submit Button Click'
      });
    }
  }
}, true
);

Here is an article explaining where to find the info about clicks - Google Analytics 4 (GA4): Where to find my events - Elfsight Help Center

Please let me know if it works for you and if you have any other questions :slightly_smiling_face:

1 Like