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
);