[Christoffer AParticipant]

I am trying to track event on my website with Google analytics. In order to do so I need to add the following code to a link-tag:
onclick="_gaq.push(['_trackEvent','category','action','label']);"

For example I need to change
<a href="www.example.com"></a>
to
<a href="www.example.com" onclick="_gaq.push(['_trackEvent','category','action','label']);"></a>
I need to do this for buttons, but are kind of stuck since the editor or shortcodes does not allow this parameter.
Please can you give me instructions on what I need to do to configure the theme to allow this parameter? Is child theme the way to go? If so, how?

Many thanks!

[ZeshanMember]

Hi Christoff,

If you want to add onclick="" attribute to your [button] shortcode, it will require some custom development.

Because of this, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add following code in your child theme’s functions.php file:

function x_shortcode_button2( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'               => '',
    'class'            => '',
    'style'            => '',
    'type'             => '',
    'shape'            => '',
    'size'             => '',
    'float'            => '',
    'block'            => '',
    'circle'           => '',
    'icon_only'        => '',
    'href'             => '',
    'title'            => '',
    'target'           => '',
    'info'             => '',
    'info_place'       => '',
    'info_trigger'     => '',
    'info_content'     => '',
    'lightbox_thumb'   => '',
    'lightbox_video'   => '',
    'lightbox_caption' => '',
    'onclick'          => ''
  ), $atts ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? ' ' . esc_attr( $class ) : '';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $type  = ( $type  != '' ) ? ' x-btn-' . $type : '';
  $shape = ( $shape != '' ) ? ' x-btn-' . $shape : '';
  $size  = ( $size  != '' ) ? ' x-btn-' . $size : '';
  switch ( $float ) {
    case 'left' :
      $float = ' alignleft';
      break;
    case 'right' :
      $float = ' alignright';
      break;
    default :
      $float = '';
  }
  $block            = ( $block            == 'true'  ) ? ' x-btn-block' : '';
  $icon_only        = ( $icon_only        == 'true'  ) ? ' x-btn-icon-only' : '';
  $href             = ( $href             != ''      ) ? $href : '#';
  $title            = ( $title            != ''      ) ? 'title="' . $title . '"' : '';
  $target           = ( $target           == 'blank' ) ? 'target="_blank"' : '';
  $info             = ( $info             != ''      ) ? 'data-toggle="' . $info . '"' : '';
  $info_place       = ( $info_place       != ''      ) ? 'data-placement="' . $info_place . '"' : '';
  $info_trigger     = ( $info_trigger     != ''      ) ? 'data-trigger="' . $info_trigger . '"' : '';
  $info_content     = ( $info_content     != ''      ) ? 'data-content="' . $info_content . '"' : '';
  $lightbox_thumb   = ( $lightbox_thumb   != ''      ) ? $lightbox_thumb : '';
  $lightbox_video   = ( $lightbox_video   == 'true'  ) ? ', width: 1080, height: 608' : '';
  $lightbox_caption = ( $lightbox_caption != ''      ) ? 'data-caption="' . $lightbox_caption . '"' : '';
  $onclick          = ( $onclick          != ''      ) ? $onclick : '';

  if ( is_numeric( $lightbox_thumb ) ) {
    $lightbox_thumb_info = wp_get_attachment_image_src( $lightbox_thumb, 'full' );
    $lightbox_thumb      = $lightbox_thumb_info[0];
  }

  if ( $lightbox_video != '' ) {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'{$lightbox_video}\"";
  } else {
    $lightbox_options = "data-options=\"thumbnail: '" . $lightbox_thumb . "'\"";
  }

  if ( $circle == 'true' ) {
    $output = "<div {$id} class=\"x-btn-circle-wrap{$size}{$block}{$float}\" {$style}><a class=\"x-btn{$class}{$type}{$shape}{$size}{$block}{$icon_only}\" onclick=\"{$onclick}\" href=\"{$href}\" {$title} {$target} {$info} {$info_place} {$info_trigger} {$info_content} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a></div>";
  } else {
    $output = "<a {$id} class=\"x-btn{$class}{$type}{$shape}{$size}{$block}{$float}{$icon_only}\" {$style} onclick=\"{$onclick}\" href=\"{$href}\" {$title} {$target} {$info} {$info_place} {$info_trigger} {$info_content} {$lightbox_caption} {$lightbox_options}>" . do_shortcode( $content ) . "</a>";
  }
  
  return $output;
}

add_filter('init', 'custom_shortcode_function');

function custom_shortcode_function() {
   remove_shortcode( 'button' );

   add_shortcode( 'button', 'x_shortcode_button2' );
}

After that, whenever you want to add onclick="" attribute, just add it in your shortcode as follows:

[button shape="square" onclick="your-code-here"]onclick button[/button]

Please note that you cannot use square brackets (“[” & “]”) inside shortcodes, so make sure to replace them with HTML special characters: http://www.degraeve.com/reference/specialcharacters.php

Hope this helps. 🙂

Thank you.

[Christoffer AParticipant]

Thank you! Very useful guide. I’ve followed every step. I realized I am on Universal Analytics so the onclick-attribute I should use is
ga('send', 'event', 'guides', 'download-seo', 'seo-beginners-guide.pdf', 10);
I added this to x-button and when I inspect element it all looks good. However nothing shows up on my Google Analytic end. I wanted to rule out the short-code, so I made this test page (http://www.rav.no/google-analytics-testing-page/)and added a plain text link:
<a href="http://www.startsiden.no/" onClick="ga('send', 'event', 'guides', 'download-seo', 'seo-beginners-guide.pdf', 10);">Download SEO Beginners Guide</a>
In my Google analytic I set up a new Goal, event type, and add category Begins with guides (see image below), but nothing shows up. Not in real time analytics either, even when I click on the link. Is this a theme issue? Any ideas why it is not working for me? I really appreciate your help!

[Christoffer AParticipant]

Image didn’t show up in my previous comment. Here is the url to the image: http://www.screencast.com/t/HlwQN0mT6t

[ChristianModerator]

Hey Chris,

Please check the source of your button if the onClick value is being outputted. If it is, then it is not a problem with the previously given code. Also, please wait for the data to populate in your analytics report. It may take some time. We recommend that you hire an expert on analytics for this as this falls beyond the scope of our support.

Thanks.

[Christoffer AParticipant]

So buttons work great! And it is flowing into my Google analytics. I am a happy chap. Now, I want to enable onclick=”” for more shortcodes. Is there a resource you can point me to that explains how to do this? Or do you have a code snippet I can add to my functions.php that would enable onclick=”” for all my shortcodes that have a url-linking capabibility attached to it?

Thx!

[ZeshanMember]

Hi Christoff!

Glad to hear about the buttons! 🙂

Regarding your second query, this will require custom development as it involves changes in shortcodes code. We’d love to help but this customization will fall beyond the scope of support we can provide. You may need to investigate it on your own or look to a service such as WerkPress or Elto for assistance should you not feel comfortable making these changes yourself. X is quite extensible with child themes, so there are plenty of possibilities

Thank you for your understanding. Take care!

[grossmanjeParticipant]

Will this work for other types of links? I have a graphic I want to make a link and need an onclick function on it?

[LelyModerator]

Hello There,

Above code will work on button shortcode. On image button it will depend on how you will structure it. If you could give us the link and which image you want to add GA function code we would gladly help.

Thank you.

[p4rdParticipant]

Great feedback, but can you also advise how to add unique GA event tracking to each of the x-social-global icons?

Thank you.

Peter

[LelyModerator]

Hello Peter,

For x-social-global, please copy the following code on your child theme functions.php.
It’s different html markup from above. You have to set it one by one.

// Social Output
// =============================================================================

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook', '' );
    $twitter     = x_get_option( 'x_social_twitter', '' );
    $google_plus = x_get_option( 'x_social_googleplus', '' );
    $linkedin    = x_get_option( 'x_social_linkedin', '' );
    $xing        = x_get_option( 'x_social_xing', '' );
    $foursquare  = x_get_option( 'x_social_foursquare', '' );
    $youtube     = x_get_option( 'x_social_youtube', '' );
    $vimeo       = x_get_option( 'x_social_vimeo', '' );
    $instagram   = x_get_option( 'x_social_instagram', '' );
    $pinterest   = x_get_option( 'x_social_pinterest', '' );
    $dribbble    = x_get_option( 'x_social_dribbble', '' );
    $flickr      = x_get_option( 'x_social_flickr', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $whatsapp    = x_get_option( 'x_social_whatsapp', '' );
    $soundcloud  = x_get_option( 'x_social_soundcloud', '' );
    $rss         = x_get_option( 'x_social_rss', '' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" onclick="your-code-here" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter"  title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus"  title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" onclick="your-code-here" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon=""></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon=""></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon=""></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

As you can see above I’ve only added it for facebook icon — on this line:
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" onclick="your-code-here" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;

I’ve added this part onclick="your-code-here" . You have to update your-code-here with the GA function. And then for other icons as well please add the onclick=”your-code-here” part.

Hope this helps.

[Author]

Posts