Please clear this up for em (GA Tracking)

Hey 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,
Josue

Hey 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/events

Cheers!
Josue

Hey 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, 9 months ago by Josue.

Hey 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,
Josue