Trouble adding event tracking to shortcode buttons

[mrbme]

Hi!

I’m trying to add GA event tracking to my buttons – when I do, I get a mess of code instead of the button text.

I’m about 99% sure my GA is still the old asynch and not the newer universal code because I use Yoast GA and the plugin doesn’t support the universal code yet.

So, how would you recommend I add event tracking to my buttons?

Thanks!

[Kyle – SUPPORT]

Hi

Please follow this thread: http://support.swiftideas.net/forums/topic/event-tracking-on-buttons

They managed to do it I think

– Kyle

[mrbme]

Hi Kyle,

I actually went through this thread before reaching out.

She is using the new GA Universal Analytics format:

ga(‘send’, ‘event’, ‘categorie’, ‘actie’, ‘label’);”

I need to know the implementation for this type:

onClick="_gaq.push(['_trackEvent', 'category, action, opt_label, opt_value, opt_noninteraction)']);

[Kyle – SUPPORT]

I will forward this to Mohammad, he will be best helping you with this

– Kyle

[Mohammad – SUPPORT]

Hi,
Please add a extraclass to that link and use this code at Admin -> Theme Options -> Custom JS -:

<script>
jQuery(document).ready(function($){
  $("a.eventTrack").click(function(e){ 
   //e.preventDefault();
  _gaq.push(['_trackEvent', 'category, action, opt_label, opt_value, opt_noninteraction)']);
 });
});

</script>

Thanks 🙂
With Best Regards
Mohammad

[mrbme]

Hi Mohammad.

1) What do I name the extra class? Here is what the button code looks like currently:
[sf_button colour="green" type="sf-icon-reveal" size="large" link="/learn-more" target="_blank" icon="fa-thumbs-o-up" dropshadow="yes" extraclass=""]Tell me more[/sf_button]

2) Using your solution above, does that mean I will need to create a new class for every button I want to track? I ask this because ‘category, action, opt_label, opt_value, opt_noninteraction‘ are fields with variables dependent on where the button is and how the user interacts with the button. This way I can see more granularly my data in google analytics.

[Mohammad – SUPPORT]

Hi,
1- The class name is eventTrack so final code will be:-
[sf_button colour="green" type="sf-icon-reveal" size="large" link="/learn-more" target="_blank" icon="fa-thumbs-o-up" dropshadow="yes" extraclass="eventTrack"]Tell me more[/sf_button]

2- You dont need to create new class to every button.

Thanks 🙂
With Best Regards
Mohammad

[Swift Ideas – Ed]

1) The extra class is the last field in the shortcode:

[sf_button colour="green" type="sf-icon-reveal" size="large" link="/learn-more" target="_blank" icon="fa-thumbs-o-up" dropshadow="yes" extraclass="eventTrack"]Tell me more[/sf_button]

2) I’d recommend creating a class for each type, that way you can add the class for each type of tracking.

– Ed

[mrbme]

Hi Ed, Mohammad:

So, if I want unique event tracking for every button I should create unique JS codes?

Example:
Button on careers page

JS:

<script>
jQuery(document).ready(function($){
  $("a.eventTrackcareera").click(function(e){ 
   //e.preventDefault();
  _gaq.push(['_trackEvent', 'button, apply, senioraccountexecutive']);
 });
});

</script>

Button Code

[sf_button colour="green" type="sf-icon-reveal" size="large" link="/learn-more" target="_blank" icon="fa-thumbs-o-up" dropshadow="yes" extraclass="eventTrackcareera"]Apply[/sf_button]

Then, if for another job position i’d have to create a new iteration of JS code like the following:

<script>
jQuery(document).ready(function($){
  $("a.eventTrackcareerb").click(function(e){ 
   //e.preventDefault();
  _gaq.push(['_trackEvent', 'button, apply, semmanager']);
 });
});

</script>

With the associated class code:

Button Code

[sf_button colour="green" type="sf-icon-reveal" size="large" link="/learn-more" target="_blank" icon="fa-thumbs-o-up" dropshadow="yes" extraclass="eventTrackcareerb"]Apply[/sf_button]
<br>
Is this the correct implementation?

[Rui Guerreiro – SUPPORT]

Hi,

Yes is the correct implementation.
In this case the js will be something like the code bellow(add it to the theme custom js option):

jQuery(document).ready(function($){

  $("a.eventTrackcareera").click(function(e){ 
   //e.preventDefault();
  _gaq.push(['_trackEvent', 'button, apply, senioraccountexecutive']);
 });

$("a.eventTrackcareerb").click(function(e){ 
   //e.preventDefault();
  _gaq.push(['_trackEvent', 'button, apply, semmanager']);
 });

});

-Rui