Forums

Hi, i'd like to add Google Analytics Event tracking to submit button.
Such as https://developers.google.com/analytics/devguides/collection/analyticsjs/events

How can i add the onclick event?
Thanks

Hi eleo_,

You actually want to run this script after the validation checks are successful, not when the submit button is clicked as this might happen more than once.

Please see this FAQ

Bob

hi, it doesn't work...
can you do an example?
thanks

i put:
on load

// Using jQuery Event API v1.3
$('#button2').on('click', function() {
  ga('send', 'event', 'button', 'click', 'test');
});

on submit

// Using jQuery Event API v1.3
$('#button2').on('click', function() {
  ga('send', 'event', 'button', 'click', 'test2');
});

Hi eleo_,

But your code is nothing like the example in the FAQ?

Bob

it's the code of the guide https://developers.google.com/analytics/devguides/collection/analyticsjs/events
i'm not understand your faq code, i'm beginner.

i've tryed to Open the HTML action settings and write the following string in the "Form tag attachment"

onsubmit="ga('send', 'event', 'contatti', 'click');"

But it works every time i click the button, even if the field is empty, but mandatory

Hi eleo_,

That looks good to me, well done. Sorry not to have replied earlier. I have added your example to a new FAQ for other users.

Bob

Thanks Bob!

Hello,

I've tried to follow this and the FAQ to make this work for my site but unfortunately its not, can someone please help me?

I've put this code on HTML Render Form in the Form tag attachment: "data-gvalidate_success='ga_track'"

Then right after that block I added a Load Javascript block with this JS code:
function ga_track(event, form){
ga('send', 'event', 'enquiry-form', 'submit', '{tour_name}');
}

Then in google analytics I added the configuration for event:
Category equals enqiry-form
Action equals submit
(the other ones empty, see pictures attached)

I can't figure out what its going on and why its not working.
Thanks for the help
Martin

Hi nanom,

Please try moving the Load JavaScript action up before the HTML (Render Form) action. That may be all that is needed.

Bob

Hi Bob,

Thanks for the quick reply. I moved the load JS block and tested it. I need to wait until tomorrow to see if it worked and will keep you posted.

Thanks,
Martin

Hi Bob,

That didn't work and I still didn't receive any goal completion in my google analytics. Can you help me fix it?

Thanks,
Martin

Hi eleo_,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

Attached are a few pictures, let me know if you need any more. You can see the form in this website: http://www.meacruises.com/excursions-list/item/36-rome-in-a-day

Best,
Martin

Hi nanom,

I can see a couple of problems here:

a. You have a couple of Javascript errors from other scripts on the page. They need to be fixed so that the CF scripts run OK. I tested the form without the template and the ga_track function runs from there.

b. The value of {tour_name} isn't being replaced. Please try

function ga_track(event, form){
  ga('send', 'event', 'enquiry-form', 'submit', '<?php echo $form->data['tour_name']; ?>');
}

Bob

Hi Bob,

Thanks for the information. I will check if the event gets to the google analytics tomorrow (just run it). Can you tell me which javascripts are causing the problems? I'm quite new to joomla and all this, so I'm trying to figure things out and solve it.

Thanks,
Martin

Hi nanom,

Uncaught ReferenceError: Invalid left-hand side expression in postfix operation : c41957477e61d92313f6a6cbcbd8089e.js:19

Uncaught ReferenceError: jQuery is not defined : jquery.js:3

Bob

Hi Bob,

You said you run the form without the template and I did that too following your link. However I checked my google analytics and I didn't receive any goal completions as you can see in the attached picture. There's something else that its not working. Can you help me solve it?

Thanks,
Martin

Hi nanom,

As far as I can see you are not loading the Google ga.js file or configuring it with your Google ID (https://developers.google.com/analytics/devguides/collection/gajs/). But note that the ga.js library is out of date and you may want to use the current analytics.js see here

The FAQ is only showing you how to run the code when the form submits.

Bob

Hi Bob,

Looking at the source code of one of the pages I see the ga.js as pasted below and set correctly with my google ID:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-65822177-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

If you check the source code you will find it there. Is there anything else that need to be loaded before or is it enough with this code?

thanks,
Martin

Hi Martin,

That looks OK, I ,must have missed it on the page I looked at :-(

Bob

Hi Bob,

Thanks, that's great. Now we are back to square 1, can you help me figure out why this is not working?

Thanks!
Martin

Hi Martin,

It's not being loaded here without the template where I checked. It is being loaded here with the template but there are still JavaScript errors on that page.

Please try loading it through the form so that you can see if that part is working OK.

Bob

Hi Bob,

I re-did the whole website from scratch to remove all javascript errors (and all errors). However I tried again the form and I don' get anything on my analytics. Any more ideas why this might not be working?

thanks,
Martin

Hi Bob,

Any idea on this? Why it still doesn't work for me?

Your help is much appreciated.

Thanks!!
Martin