How can I enable google analytics tracking on Contact Form 7 when I have one or more checked checkbuttons?

user_17520104 0
Viewed 73

My contact form has this Format:

<div class="col-md-12">[text* text-813 placeholder "Name:"]</div>
<div class="col-md-12">[email* email-597 placeholder "EMail:"]</div>
<div class="col-md-12">[tel* tel-345 placeholder "Tel:"]</div>
</p>
[checkbox checkbox-770 id:Personal use_label_element "Personal"]
[checkbox checkbox-771 id:Buisness use_label_element "My Buisness"]
</div>
[textarea textarea-552 placeholder "Ask about anything!"]</div>
[submit "Submit"]</div>

And I want to enable GA tracking for their respective fields when one or more of the checkbox inputs are checked.

Here is the code I have tried so far:

document.addEventListener( 'wpcf7submit', function( event ) {
    jQuery(function($) {
        if ($('input').is(':checked')) {
            dataLayer.push({
            'event': 'Form_Submission' 
            'Interest': 'Business'
            });
        } 

        if ($('input').is(':checked')) {
            dataLayer.push({
            'event': 'Form_Submission' 
            'Interest': 'Personal'
            });
        }
    });

}, false );

But it doesn't work, I get no errors as a result. Can anyone help me figure this out? Thanks in Advance.

contact-form-7 google-analytics jquery javascript
1 Answers

You need to use the event.detail.inputs that is passed by wpcf7submit

document.addEventListener( 'wpcf7submit', function( event ) {
    let inputs = event.detail.inputs;
    for ( let i = 0; i < inputs.length; i++ ) {
        if ( 'checkbox-770[]' == inputs[i].name ) {
            dataLayer.push({
                'event': 'Form_Submission',
                'Interest': 'Personal'
            });
        } else if ('checkbox-771[]' === inputs[i].name ){
            dataLayer.push({
                'event': 'Form_Submission',
                'Interest': 'Business'
            });
        }
    }
}, false );
user_38214670
Related