Tagged: event tracking, GA, google analytics, Tracking
-
AuthorPosts
-
November 9, 2014 at 11:21 pm #348509
Hi
I read this topic (closed) https://kriesi.at/support/topic/tracking-code-on-specific-button/#post-335355
Can someone bend this in neon for me
I only need tracking on one button…. :-( So where do I cut the script? and is it really just to add in the footer (Any chance I only could add it on that one page I need the tracking on?)
More examples would be helpfulPeter
November 9, 2014 at 11:39 pm #348525Hey Peter!
First make sure you are using the Universal Analytics tracking code (in Theme Options), it should be like this:
<!-- Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXX-Y', 'auto'); ga('send', 'pageview'); </script> <!-- End Google Analytics -->
Then to track a button click on a specific Page, add this to theme / child theme functions.php:
function add_custom_script(){ if(is_page(array(23)){ ?> <script> (function($){ $(window).load(function() { $('.button-1 a').on('click', function() { ga('send', 'event', 'button', 'click', 'button-1'); }); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'add_custom_script');
22 would be the page ID and “button-1” the custom class set to the button to track.
Regards,
JosueNovember 10, 2014 at 6:25 pm #348908Hi Josue!
You are so sweet – Thanks!
I do use Universal GA – Is it OK for me to use Yoast Analytics plugin? (I checked and it does generate the same code (When I log out (My settings is to ignore Admins))) :)The only part I’m still not 100% clear on is the button-1
This is what I want to add / track:
onClick=”ga(‘send’, ‘event’, { eventCategory: ‘Contact’, eventAction: ‘Support Request’, eventLabel: ‘Contact form’});”
How do I change this:
ga(‘send’, ‘event’, ‘button’, ‘click’, ‘button-1’);
To give me what I want?Peter
November 10, 2014 at 7:38 pm #348977Hey Peter!
It would be:
ga(‘send’, ‘event’, ‘ Contact’, ‘Support Request’, ‘Contact form′);
It can also be like this:
ga('send', { 'hitType': 'event', 'eventCategory': 'Contact', 'eventAction': 'Support Request', 'eventLabel': 'Contact form' });
Reference:
https://developers.google.com/analytics/devguides/collection/analyticsjs/eventsCheers!
JosueNovember 10, 2014 at 8:51 pm #349017Hi Josue,
You are the king!!
One final question…
I have a contact form in the footer…
So If I am on my contact page and the first form is CONTACT
and the second form is FOOTER-CONTACT
How do I assign a name to each button to track wish one was clicked?And If I use the scripts you made for function.php what happens when the footer-contact form is submitted from a page that are not in the array
I assume that the array can be a series like:
if(is_page(array(23,35,105,274)) {
Or would it be better to load the script on every page (if so.. what do I leave out?)Best regards
Peter
November 10, 2014 at 9:44 pm #349057Hey Peter!
Yes, it would be better to load the script on all pages, to do that simply remove the if conditional:
function add_custom_script(){ ?> <script> ..... </script> <?php } add_action('wp_footer', 'add_custom_script');
To differentiate two forms in the same page you can set a custom class to each one of them, then the JavaScript code would be:
(function($){ $(window).load(function() { $('.contact_form_1 input[type="submit"]').on('click', function() { if (!$('.contact_form_1 p').hasClass('error')) { ga('send’, 'event', 'Contact', 'Support Request', 'Contact form'); } }); $('.contact_form_2 input[type="submit"]').on('click', function() { if (!$('.contact_form_2 p').hasClass('error')) { ga('send’, 'event', 'Contact', 'Support Request', 'Contact form'); } }); }); })(jQuery);
Best regards,
Josue- This reply was modified 9 years, 10 months ago by Josue.
November 11, 2014 at 2:28 pm #349366Hi Josue,
Super… Just one last thing :)
How do I set that custom class on the button? (Is the class a css thing? – maybe I am thinking on ID’s?) But the css class actually sets the name of the button – Without changing the style? So the class don’t have to be defines in the style.css? is that it?Can you show me that? maybe the entire code
(Please use name on button a: SidepanelForm b:ContactForm c: FooterForm)Peter
November 11, 2014 at 8:16 pm #349646Hey Peter!
If you are using Forms, you’d need to set the custom class to the form element (.SidepanelForm) and target the button as its child (input[type=”submit”]):
(function($){ $(window).load(function() { $('.SidepanelForm input[type="submit"]').on('click', function() { ga('send’, 'event', 'Contact', 'Support Request', 'Contact form'); }); $('.ContactForm input[type="submit"]').on('click', function() { ga('send’, 'event', 'Contact', 'Support Request', 'Contact form'); }); $('.FooterForm input[type="submit"]').on('click', function() { ga('send’, 'event', 'Contact', 'Support Request', 'Contact form'); }); }); })(jQuery);
Best regards,
JosueFebruary 18, 2015 at 8:17 pm #398434Hey!
@ people using the Google Analytics by Yoast plugin and @ people looking to test the event / goal tracking code:
Please check the following post for some additional info: https://kriesi.at/support/topic/track-contact-form-conversions-with-google-analytics-goal/#post-398429
Best,
Ralph
-
AuthorPosts
- The topic ‘Please clear this up for em (GA Tracking)’ is closed to new replies.