Tracking Contact Form 7 (CF7) with Google Tag Manager (GTM)

1. Create a new TAG, with the following preferences:
Name: Form submission event listener
Tag Type: Custom HTML
HTML: 
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({
          'event' : 'wpcf7successfulsubmit',
          'CF7formID' : event.detail.contactFormId
        });
    	}, false );
</script>
Firing Triggers: All Pages

2. Create a new TRIGGER, with the following preferences:
Name: Datalayer push trigger for CF7 mail sent
Trigger Type: Custom Event
Event Name: wpcf7successfulsubmit (the same as the event in the Tag above)
This trigger fires on: All Custom Events

3. Create a new TAG, with the following preferences:
Name: GA event on CF7 mail sent
Tag Type: Google Analytics - Universal Analytics
Track Type: Event
Category: Forms
Action: Mail Sent
Label: {{CF7 Form ID}}
Google Analytics Settings: {{GA Settings}} (or something else, depends on what the name is when GA was created)
Firing Triggers: Datalayer push trigger for CF7 mail sent

4. Create a new VARIABLE, with the following preferences:
Name: CF7 Form ID
Variable Type: Data Layer Variable
Data Layer Variable Name: CF7formID
Data Layer Version: Version 2

5. Create a new FOLDER, and name it to CF7 and move the triggers, tag and variable to it.

6. SUBMIT & PUBLISH the changes

7. Test to see if its working. Submit a CF7, then go to Google Analytics -> Real-Time -> Events. Check the Event Label to be the same as the CF7 ID form. 

Leave a Reply

Your email address will not be published. Required fields are marked *