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.