Event tracking on buttons

[Kirsten]

Hi is it possible to apply event tracking on buttons that are generated with the shortcodes?

Normally event tracking for Google Analytics look something like this:
href=”LINK” onClick=”ga(‘send’, ‘event’, ‘categorie’, ‘actie’, ‘label’);”>LINK TEXT< (If I add these between a html tags its not visible ofcourse :-))

Does it work to add the event tracking code to the shortcodes like this?:
[sf_button colour=”orange” type=”standard” size=”large” link=”LINK” onClick=”ga(‘send’, ‘event’, ‘categorie’, ‘actie’, ‘label’);” target=”_self” icon=”” dropshadow=”yes” extraclass=””]BUTTON TEXT[/sf_button]

Would love to know!

[Mohammad – SUPPORT]

Hi,
Please follow given below steps:
1-Create button with extra class named.
[sf_button colour="orange" type="standard" size="large" link="LINK" target="_self" icon="" dropshadow="yes" extraclass="eventTrack"]BUTTON TEXT[/sf_button]

2- Please go to Admin -> Theme Options -> Custom CSS/JS -> JS -> Here put given below code:

<script>
jQuery(document).ready(function($){
  $("a.eventTrack").click(function(e){ 
   //e.preventDefault();
  ga('send', 'event', 'categorie', 'actie', 'label');
 });
});

</script>

Thanks 🙂
With Best Regards
Swift Ideas

[Kirsten]

Hi Mohammed,

Thank you for your reply, does this mean that I have to create a javascript item for each button I want to track? How can I do this as easy as possible?

Best,
Kirsten

[Mohammad – SUPPORT]

Hi,
It will track each button with eventTrack extra class. So you dont need to create javascript to each button.

Thanks 🙂
With Best Regards
Swift Ideas

[Kirsten]

Yeah I get that, but they will all then all be marked with the same categorie, action and label. From a marketing point of view I would like to have it separated in different events. Like this:

Button 1 homepage:
ga(‘send’, ‘event’, ‘button’, ‘homepage’, ‘start now’);

Button 2 homepage:
ga(‘send’, ‘event’, ‘button’, ‘homepage’, ‘get it now’);

[Mohammad – SUPPORT]

Hi,
Now you have to create a javascript item for each type event. How many event do you have ?
Thanks

[Kirsten]

I want to track a lot, but I will create it by hand then.

Do you have any clue what wordpress did to the plain text editor? When I try to place an event tracking in a url it strips the html code when switched back to wysiwyg or after saving. So no even tracking code is possible on plain links.

[Mohammad – SUPPORT]

Hi,
Please try to put this code at functions.php of child theme:

remove_shortcode('sf_button');
function sf_button_new($atts, $content = null) {
		extract(shortcode_atts(array(
			"size"			=> "standard",
			"colour"		=> "",
			"type"			=> "",
			"link" 			=> "#",
			"target"		=> '_self',
			"dropshadow"    => '',
			"icon"			=> '',
			"extraclass"   => '',
			"onclick"     => '' 
		), $atts));
		
		$button_output = "";
		$button_class = 'sf-button '.$size.' '. $colour .' '. $type .' '. $extraclass;
				
		if ($dropshadow == "yes") {
		$button_class .= " dropshadow";
		}
		
		if ($type == "sf-icon-reveal" || $type == "sf-icon-stroke") {
			$button_output .= '<a class="'.$button_class.'" href="'.$link.'" target="'.$target.'">';
			$button_output .= '<i class="'.$icon.'"></i>';
			$button_output .= '<span class="text">'. do_shortcode($content) .'</span>';
			$button_output .= '</a>';
		} else {
			$button_output .= '<a onclick="'.$onclick.'" class="'.$button_class.'" href="'.$link.'" target="'.$target.'"><span class="text">' . do_shortcode($content) . '</span></a>';
		}
		
		return $button_output;
	}
	add_shortcode('sf_button', 'sf_button_new');

Now you can add code as you want.

[sf_button colour="orange" type="standard" size="large" link="LINK" onClick=”ga(‘send’, ‘event’, ‘categorie’, ‘actie’, ‘label’);” target="_self" icon="" dropshadow="yes" extraclass=""]BUTTON TEXT[/sf_button]

Thanks

[Kirsten]

I’ve placed the code. No results in realtime analytics.
Do I still need a code to place in custom JS?

[Mohammad – SUPPORT]

Hi,
No you dont need code in custom js. It will work so please wait. Please provide specific page url with this button .
Thanks

[Kirsten]

The first solution you gave worked right away and popped up in real time event tracking.

The button I’m testing is on this page http://luciddream.nl halfway a red button called “Check het hier”.

[Mohammad – SUPPORT]

Hi,
If you provide wordpress admin login detail so i can debug to fix the issue very soon .
Thanks 🙂
With Best Regards
Swift Ideas

[Kirsten]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use code like that :

<script>
jQuery(document).ready(function($){
  $(".eventTrack").click(function(e){ 
   //e.preventDefault();
  ga('send', 'event', 'categorie', 'actie', 'label');
 });
});

</script>

Thanks

[Kirsten]

That works great!