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.
Related
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.
just want to check to make sure I have the correct syntax with the event tracking...
ga('send', {
'hitType' : 'event',
'eventCategory' : 'links',
'eventAction' : 'click',
'eventLabel' : 'sidebar-link',
'nonInteraction' : 1
});
This is used for links that open in a new tag. Also I've found that for links that do not open in a new tag, you can add the member:
'hitCallback': function() { document.location = 'http://link-to.com'; }
Is this all looking correct? Because I'm not receiving any tracking events on my pages. I checked in debugger, and the code is being called for sure, but nothing is coming up in GA. What's up?
I dont believe you have the correct syntax. Try this syntax
ga('send', 'event', 'button', 'click', 'nav buttons', 4); //USE THIS
ga(send, event, eventCategory, eventSction, eventLabel, eventValue) // VARIABLE NAMES
**** You do not need to include the event value parameter. All other event parameters are recommended.
Gonna answer my own question here as I got it working - also I want to provide an example for the alternate syntax, for those who might be confused about it like I was. **Edited for clarity
First off, it was a matter of waiting for a day for the results to show up, even in "Real Time" mode.
Second, this is what I went with:
For links that open in new tab:
//HTML
<a class='newtab' data-type='label-name' href='http://blah.com' target='_blank'>Link to blah</a>
//JS
$('.newtab').click(function(){
var label = $(this).attr('data-type');
ga('send', 'event', 'category-name', 'click', {
'eventLabel' : label,
'nonInteraction' : 1
});
});
For links that open in same tab:
//HTML
<a class='sametab' data-type='label-name' href='http://blah.com'>Link to blah</a>
//JS
$('.sametab').click(function(){
var linkTo = $(this).attr('href');
var label = $(this).attr('data-type');
ga('send', 'event', 'category-name', 'click', {
'eventLabel' : label,
'nonInteraction' : 1,
'hitCallback' : function() { document.location = linkTo; }
});
return false;
});
The part that threw me was in the example where it showed how to add either all attributes in an object or some attributes in the object, and which attributes were available. Anyway, voila :)
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.