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.
Related
I collect video tracking data to data layer and I would like send all the data as a part of the same event.
dataLayer.push({
'event': 'video',
'EventCategory': 'HTML5 Video',
'EventAction': VideoProgressWatched,
'EventLabel': videoLink,
'EventContributor': videoContributor,
'EventVideoCategory': videoCategory,
'EventVideoDuration': videoDuration
});
I tried splitting this into few different Tags that are triggered by the same triggers.
Tag 1:
Event Category: {{EventCategory}},
Event Action: {{EventAction}},
Event Label: {{EventLabel}}
Tag 2:
Event Category: {{EventCategory}},
Event Action: {{EventAction}},
Event Label: {{EventContributor}}
Tag 3:
Event Category: {{EventCategory}},
Event Action: {{EventAction}},
Event Label: {{EventVideoCategory}}
But I somehow doubt this is the right way to do it. What would be the correct way of doing this?
Consider sending the additional data as hit-scoped custom dimensions, then on the GA side defining those Custom dimensions as things like "Event Contributor" etc.
I am trying to use Google Event Tracking to record when a certain user action is taken. I have a JS method called runGABanner that fires the Google Analytics code when conditions are met, but I'm not seeing anything update in GA Admin page.
In my code, I set up the GA code as such:
const runGABanner = () =>{
ga('send', {
hitType: 'event',
eventCategory: 'AdBlocker',
eventAction: 'Ad Blocker Displayed',
eventLabel: 'Ad Blocker'
});
}
I was expecting to see "Banner Displayed" under "Event Action", but as the screenshot shows, nothing is appearing there.
Any thoughts as to why this is happening?
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 need to send an event using ga(), then immediately redirect to another page. If the ga() send isn't complete it is cancelled by the redirect. Is there any mechanism (such as a callback) that I can use to detect when the event has been delivered to GA (or errored out)? I am currently just delaying for a small period of time, but that is non deterministic.
There is (and it is even called callback): Hit Callback. Redirecting after the tracking call indeed the major usecase. E.g the documentation from the example deals with intercepting a form submit, and resubmitting after the form has been sent:
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: function() {
form.submit();
}
});
});
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.