Google Ads Enhanced Conversions Tracking

  • Resolved ste9890

    (@ste9890)


    7 months ago

    Hi there,

    This article describes how to set up Google Ads Enhanced Conversion Tracking with Google Tag Manager + Contact Form 7: https://www.linkedin.com/pulse/google-ads-enhanced-conversions-tracking-contact-form-ryan-parkes

    Can the same be done with HTML Forms?

    I guess more specifically, my question is, can we add the form data to the GTM dataLayer like this:

    <script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    window.dataLayer.push({
        "event" : "cf7submission",
        "formId" : event.detail.contactFormId,
        "response" : event.detail.inputs })
    });
</script>

    So with CF7 you can use event.detail.inputs which contains all the form data. Is there an equivalent with HTML Forms?

    Any help would be much appreciated.

    Thanks

    Ste

    • This topic was modified 7 months ago by ste9890.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Link Software LLC

    (@linksoftware)

    @ste9890 I’m so sorry for the late response. I recently took over development of the plugin, but the transfer process was delayed and overlapped with the timing of your post.

    HTML Forms does support JavaScript events. You can learn more about that here:

    https://www.htmlformsplugin.com/kb/javascript-events/

    This might not get you all the way to what you want, but it’s a good place to start. Please let me know if you have any more questions. And, again, thank you for your patience.

    Thread Starter ste9890

    (@ste9890)

    Hi there,

    Thanks for your response – I’m just revisiting this now.

    Does HTML Forms’s JavaScript success event contain the form data at all like CF7?

    I’ve logged the event to my console but can’t see the form data in there anywhere.

    If not, how can I populate this response property with the form submission data? Would I need to use AJAX?

    contactForm.addEventListener('hf-success', function(e) {

        window.dataLayer.push({
            "event" : "contact_form_submission",
            "formId" : contactForm.getAttribute('data-id'),
            "response" : e.detail.inputs // This is where CF7 stores the form data
        });

    });

    Any help much appreciated.

    Thanks

    Ste

    Plugin Author Link Software LLC

    (@linksoftware)

    The success event gets the full HTML of the form. So you could take that string and pull out individual inputs by their name attribute, for example:

    document.addEventListener("DOMContentLoaded", function() {
        html_forms.on('success', function(formElement) {
            const name = formElement.querySelector('input[name="NAME"]').value;

            console.log('name:', name);
        });
    });
Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.