In the last post, you had seen How to add event tracking in gravity form via Google Tag Manager. Now in this blog, you will see how to add tracking in WordPress Contact Form 7 via Google Tag Manager (GTM).
Contact Form 7 is a free and reliable plug-in for wordpress. it is easy to install, form creation and customisation also predefined method is there for event tracking. for more click here.
Still it is quite complicated and tricky to implement event tracking code or conversion code on Contact Form 7 via GTM. Therefore I have developed some code which might help you to track Contact Form 7, only you have to configure some tags, variables and triggers in GTM as per below instructions/steps.
1) Create Trigger:
Trigger Name: DOM Ready
Choose Event: Page View
Trigger Type: DOM Ready
Fire On: All Pages
Note: if there is existing DOM Ready Trigger, No need to create another; just use the previous one.
2) Create Trigger For Success Form Submission:
Tigger Name: wpcf7form.submit.success
Event Name: wpcf7form.submit.success
3) Create new custom HTML tag to push Contact Form 7 states.
Tag Name: Contact form 7 custom code
Choose Product: Custom HTML Tag
Configure Tag:Fire On: DOM Ready
<script>
/*for Non AJAX form submission */
var cformsuccess=jQuery('form.wpcf7-form.sent');
if(cformsuccess.is(":visible"))
{
var wpcf7id=cformsuccess.parents('.wpcf7').attr('id').split('-f')[1].split('-')[0];
dataLayer.push({'event':'wpcf7form.submit.success','wpcf7id':wpcf7id});
}
var cformerror=jQuery('form.wpcf7-form.invalid');
if(cformerror.is(":visible"))
{
var wpcf7id=cformerror.parents('.wpcf7').attr('id').split('-f')[1].split('-')[0];
dataLayer.push({'event':'wpcf7form.submit.error','wpcf7id':wpcf7id});
}
/* for AJAX form submission */
jQuery(document).on('submit','form.wpcf7-form',function(){
clearInterval(window.wpcf7setInt);
var cform=jQuery(this);
var wpcf7id=cform.parents('.wpcf7').attr('id').split('-f')[1].split('-')[0];
cform.removeClass('invalid').removeClass('sent');
window.wpcf7setInt=setInterval(function(){
if(cform.hasClass('sent'))
{
dataLayer.push({'event':'wpcf7form.submit.success','wpcf7id':wpcf7id});
clearInterval(window.wpcf7setInt);
}
if(cform.hasClass('invalid'))
{
dataLayer.push({'event':'wpcf7form.submit.error','wpcf7id':wpcf7id});
clearInterval(window.wpcf7setInt);
}
},300);
})
</script>4) Create Variable to get form ID:
Variable Name: wpcf7id
Choose Type: Data Layer Variable
Data Layer Variable Name: wpcf7id
5) Create Lookup table variable to get Custom Label for Contact Form 7:
Variable Name: Custom Label for Contact Form 7
Choose Type: Lookup Table
Input Variable: {{wpcf7id}}
Lookup Table: As per Below Image
6) Create Tag For Google Analytics Event Tracking:
Tag Name: Contact Form 7 Event Tracking
Choose Product: Google Analytics
Track Type: Event
Category: Contact Form 7
Action : Submit
Label: {{Custom Label for Contact Form 7}}
Fire on: wpcf7form.submit.success
Result Sample:
Likewise you can add Conversion Tracking Code and Change Conversion Label by using Lookup table Variable
Note: As I have tested, this code is working fine in almost all cases. Still you can modify the custom code, if it is not matching your requirement.
You can go for some of other my blogs, which might be useful for you. Also I would love to hear from you about some suggestions and help . You can contact me via contact us form or use blog comment form
In this blog, you will see how to add Adwords Conversion Tracking and Remarkeing Code in BigCommerce.BigCommerce is one of…
Around 6 months back, I had published an article on “How to add GA e-commerce tracking in Opencart“. I am really thankful…
If you have gone through our previous blog about Google Analytics, you might have sound understanding about Google Analytics and how it…
Do you want to know more about your visitors and how your content is performing? Whether you run a website…
In this blog, you will see how to add Google Analytics and E-commerce Tracking Code in BigCommerce. BigCommerce is one of the…
If you have gone through some of previous blog, you might have seen how to install google analytics, e-commerce tracking…