Google conversion event tracking on contact forms

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

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

Friends, this request is now marked as ‘Planned’, which means we’re currently exploring possible development options, so it’s on our radar :muscle:t2:

Please note that we can’t provide any specifics at this stage, as we’re still in the process of estimating potential solutions. Let’s hope we’ll see it in the “In Progress” status, though! :blush:

1 Like

Update: the feature moved to development! :tada: