I have a WordPress website and use Google Analytics to track submission of a CF7 form via goals. I have recently added a second form and would like to track this as a separate goal. I've tried altering the event create using this following script:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (event.detail.contactFormId == '770' {
ga('send', 'event', 'Consultation Request', 'submit');
}
else {
ga('send', 'event', 'Contact Form', 'submit');
}
}, false );
</script>
This still don't seem to separate the forms when I track the events created. Is there something else I can do?
Instead of adding this custom script, I ended up using a plugin called Contact Form 7 Submission DOM tracking This plug added the code needed to create separate goals. Also has a few extra features such as the ability to hind the form after submission.
Related
I need to prevent Contact Form 7 WordPress plugin from clearing form on successful submission. I want user to be able to keep editing the form (and possibly to resubmit it again).
Thanks.
I actually found a solution. You can just attach an event handler to reset event and then do e.preventDefault().
setTimeout( function(){
$( '.my-form form' ).on( 'reset', function(e) {
e.preventDefault();
});
},500)
It didn't work without the timeout, but this should be safe enough. Not many users can fill a form in under 0.5 second :-)
Maybe not a perfect solution but it works for my case.
EDIT: Here is a new version without the setTimeout (thanks to #Jan Myszkier)
$(document).on('reset', '.my-form form', function(e) {
e.preventDefault();
});
In JS wp-content/plugins/contact-form-7/includes/js/scripts.js around line 300 there's ajaxSuccess function described with the following piece:
if ( 'mail_sent' == data.status ) {
$form.each( function() {
this.reset();
} );
wpcf7.toggleSubmit( $form );
}
which might be just what you're looking for because this.reset(); resets the field one by one within the form after successful status.
EDIT: Following your information you want to modify the behaviour but not change the plugin, you can use the events that come with CF7.
https://contactform7.com/dom-events/
add wpcf7submit watcher to store the data in the localstorage and add another watcher (wpcf7mailsent this time ) to write the data back to the form.
I want to track "Submit Form" event for contact form of a website in Google Analytics. I don't want to use Google Tag Manager.
Is my code correct to track Form submit event that will trigger on "Submit" button of contact form? Is the function "onSubmit" correct or should I use "onClick" function?
I have Universal Google Analytics code with gtag function embedded in the website.
I have also created the Goal in Google Analytics and set the respective parameters for onSubmit event.
OnClick Event
onClick="gtag('event', 'submit', {'event_category': form', 'event_label': 'form submission'});"
OnSubmit Event
onSubmit="gtag('event', 'submit', {'event_category': form', 'event_label': 'form submission'});"
If you are using contact form 7, if your theme has an admin theme option for adding script to the <head></head> section of your site, add the following code snippet
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'submit', {'event_category': form', 'event_label': 'form submission'});
}, false );
</script>
If your theme does not offer an admin option for adding script to your sites, use a plugin such as Insert Header Footer Scripts from wordpress.org
or alternatively, create a function using wp_head and add it to your active theme's function.php file (not recommended, goes against WP best practices of not editing core theme files - unless you are using a child theme in which case add the function to your child theme functions.php file)
ref: https://contactform7.com/tracking-form-submissions-with-google-analytics/
It will be onclick as like mention below:
<input id=”contact-submit” class=”button” type=”submit” value=”Submit” onClick="ga('send', 'event', { eventCategory: 'Form', eventAction: 'Submit', eventLabel: 'Contact'});">
I have a Tag set up in GTM, custom html like this;
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'CF7formID' : event.detail.contactFormId
});
}, false );
</script>
Doesn't work. Not at all. So I put a script on the page.
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
dataLayer.push({
'event' : 'wpcf7successfulsubmit',
'CF7formID' : event.detail.contactFormId
});
}, false );
from a basic example on contactform7.com. This, in GTM preview, triggers fine. The first time it triggers the tag once, the 2nd and subsequent times it triggers twice (implying that both my script and the GTM tag are firing). Guessing at a problem with the event bubbling up. I put the specific selector wpcf7Elm into the tag's custom html but this doesn't work - like the first example.
I have no problem with running from a script but the problem is firing the tag twice so that the analytics shows two events. I would like to use GTM but at the moment the only solution I can see is to go back to on page scripts.
Can anyone suggest what I might be doing wrong? Just to note that I have disabled all plugins and that I am using, on a different page, a wpcf7 event listener successfully (from a script on the page) to perform a presentation function.
I am trying to track when a user clicks on the submit form button and they send contact information. I have this code on the contact page:
<input type="submit" value="Send" class="btn big btn_submit_form" onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'Information Request', eventLabel: 'Contact Form'});">
I am using Universal Analytics.
In my Google Analytics account, I have the goal description Name as Contact Form Submit, and the Goal Type is Event. The event conditions are as follows:
Category -Equals to- Contact
Action -Equals to- Information Request
Label -Equals to- Contact Form
with the Value field being left empty.
I have "Use the Event value as the Goal value for the conversion" set to yes.
However, Google Analytics doesn't seem to be tracking the event. Any idea how to fix this?
Thanks.
The most likely problem here is that your page is being unloaded before the event hit has time to send. When you submit a form on a web page, most browsers will stop executing JavaScript and start loading whatever new page the form's action attribute is pointing to.
The general workaround for this is to call preventDefault on the form's submit event, wait for the hit to successfully send to Google Analytics, and then manually re-trigger the form submit.
Here's how that might look (note: I'm using jQuery for simplicity):
$('#my-form').on('submit', function(event) {
// Prevent the browser's default form submission action.
event.preventDefault();
ga('send', 'event', {
eventCategory: 'Contact',
eventAction: 'Information Request',
eventLabel: 'Contact Form',
hitCallback: function() {
$('my-form').trigger('submit');
}
});
});
The key part in the above code is the hitCallback function, which gets invoked when GA returns success from the event hit beacon.
Maybe try changing the event to the form submit, instead of the button click:
<form onSubmit="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'Information Request', eventLabel: 'Contact Form'});">
The form can be submitted in ways other than the clicking the submit button (for instance pressing enter in an input field)
Also, in my experience, the tracking will post correctly almost every time, even when you do not call preventDefault on the event.
I want to integrate GA Tracking Event on buttons in WordPress. Currently my theme is using ShortCodes and I can add specific .Class to it.
[vc_button text="Order Now" type="blue" align="left" url="#" size="big" class="ordernow"]
Google Analytic code is added on the site which is on Local Host and it's working. I found an article on this but don;t know what I'm missing.
http://www.gravitatedesign.com/blog/event-tracking-google-analytics-wordpress-edition/
There will be around 4 buttons of "Order Now" on a single page and I want to track their conversion rate with Google Analytic so I will know on which button visitors are getting engage. Hope this will deliver the exact thing that I want to achieve..
please provide your result html of that buttons.
I usually use something like this
$('.ordernow').on('click', function(e) {
ga('send', 'event', 'order', document.URL);
});
you can add additional classes to track each button, example:
$('.ordernow button1').on('click', function(e) {
ga('send', 'event', 'order1', document.URL);
});
$('.ordernow button2').on('click', function(e) {
ga('send', 'event', 'order2', document.URL);
});
hope this will help you.