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'});">
Related
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.
I have dadded Universal Analytics to Google Tag Manager with it's default settings. Currently I have below code in the user registration page:
_gaq.push(['_trackEvent', 'Account Events', 'Create Account', 'Create new account ']);
How can I convert this to 'DataLayer.push' ? Is there any configuration changes needed in GTM side? Please let me know.
Thank You.
You could do something like this which happens when the account creation form is successfully submitted:
dataLayer.push({
'event': 'account created',
'cat': 'Account Events',
'act': 'Create Account',
'lab': 'Create new account'
})
and then in GTM, you would need to create the event tag with the respective macros for the category, action, and label.
The event tag would fire on this rule:
{{event}} equals "account created"
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 am adding Google Analytics code in my website, it displays active users but not but displaying the event list empty.
I tried both below codes
1)
jQuery('.btn-cart').click(function() {
ga('send', 'event', 'add-to-cart', 'add','product-added-to-cart');
});
2)
onclick("_gaq.push(['_trackEvent', 'whitepaper', 'add', 'product-added-to-cart']);")
Please let me know where i am doing wrong.
I found the solution.
jQuery('.btn-cart').on('click',function() {
_gaq.push(['_trackEvent', 'Add to Cart', 'Add To Cart Clickthrough', '<?php echo $currentUrl = Mage::helper('core/url')->getCurrentUrl();?>']);
});
I would like to know how many visitors clicked on a specific e-mail button. I have added the following to the button link:
[button size="large" link="mailto:mailadress" button onclick="ga('send', 'event', 'button', 'click', 'name button', 'mailto:mailadress'] Text[/button]
And in my analytics panel I go to Admin>>Goals>>New Goal>> give it a name and chose Event option and then added category: button, action: click, and Saved.
It is still not working. Is something wrong with my code? It is a WordPress website. Do I need to add anything extra?
First, there is a syntax error with your button. The onclick event and ga function is not closed. It should look like this:
[button size="large" link="mailto:mailadress" button onclick="ga('send', 'event', 'button', 'click', 'name button', 'mailto:mailadress')"] Text[/button]
As Eike Pierstorff mentioned, it looks like you're using a shortcode to output the button. If the shortcode does not support an onclick attribute, it will not print it in the final HTML code even if you fix the syntax.
You can check the output in Chrome by right-clicking on the link on your site (the front-end, not the admin area) and clicking Inspect Element. If you don't see the onclick attribute in the HTML code, the shortcode is not printing it.
You can check if your shortcode supports a class or id attribute, then use that attribute as a selector in your own Javascript.
jQuery(document).ready(function ($) {
if ( typeof( ga ) != 'undefined' ) {
$('#your-id').on('click', function() {
ga('send', 'event', 'button', 'click', 'name button', 'mailto:mailadress');
});
}
}
To implement this, you'll need to know how to write and enqueue JavaScript.