Widget event tracking with Google Analytics

Question

First of all, understand that I know just basic programming. I don't program myself. Thanks in advance for understanding my situation and maybe you can help me out.

I want to track how many times people click my Call to action side-widget. Problem is someone has made it for me and I don't know where to place the tracking code .

The widget code is in the theme functions.php. Here is the code :

    // Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your widget
'wpb_widget',

// Widget name will appear in UI
__('Call to action', 'wpb_widget_domain'),

// Widget description
array( 'description' => __( 'This is a call to action widget', 'wpb_widget_domain' ), )
);
}

// Creating widget front-end

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
$wtext = apply_filters( 'widget_title', $instance['wtext'] );
$link = $instance['link'];
$btnTxt = $instance['btnTxt'];

// before and after widget arguments are defined by themes
echo $args['before_widget'];
echo '<div class="widgetbody">';
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
echo '<img src="'.get_template_directory_uri().'/img/imagewidget.jpg">';

echo $args['before_title'] .''. $args['after_title'];
echo '<center><h5 style="text-transform: none;">'. $wtext .'</h5></center>';
echo '<center><a class="btn btn-primary" href="'.$link.'">'.$btnTxt.'</a></center>';
echo '</div>';
echo $args['after_widget'];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}

if ( isset( $instance[ 'wtext' ] ) ) {
$wtext = $instance[ 'wtext' ];
}

if ( isset( $instance[ 'link' ] ) ) {
$link = $instance[ 'link' ];
}

if ( isset( $instance[ 'btnTxt' ] ) ) {
$btnTxt = $instance[ 'btnTxt' ];
}
else {
    $btnTxt = "Click Here";
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id( 'wtext' ); ?>"><?php _e( 'Text:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'wtext' ); ?>" name="<?php echo $this->get_field_name( 'wtext' ); ?>" type="text" value="<?php echo esc_attr( $wtext ); ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id( 'link' ); ?>"><?php _e( 'Button Link:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" type="text" value="<?php echo esc_attr( $link ); ?>" />
</p>

<p>
<label for="<?php echo $this->get_field_id( 'btnTxt' ); ?>"><?php _e( 'Button Text:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'btnTxt' ); ?>" name="<?php echo $this->get_field_name( 'btnTxt' ); ?>" type="text" value="<?php echo esc_attr( $btnTxt ); ?>" />
</p>
<?php
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['wtext'] = ( ! empty( $new_instance['wtext'] ) ) ? strip_tags( $new_instance['wtext'] ) : '';
$instance['link'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['link'] ) : '';
$instance['btnTxt'] = ( ! empty( $new_instance['btnTxt'] ) ) ? strip_tags( $new_instance['btnTxt'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

I attached a picture with how the widget looks on the back-end and on the front-end Link to picture

Now don't laugh at me, but what I tried to do, is change the line

echo '<center><a class="btn btn-primary" href="'.$link.'">'.$btnTxt.'</a></center>';

into

echo '<center><a class="btn btn-primary" href="'.$link.'" onclick="ga('send', 'event', 'Video course', 'Click', 'Side banner');">'.$btnTxt.'</a></center>';

When I do that, I get error 500 when I log into wp-admin. Site doesn't crash though. I had to go into c-panel file manager to revert the file into original form.

Please help

Answer 1

In order to track the events, just replace this line in your code:

echo '<center><a class="btn btn-primary" href="'.$link.'">'.$btnTxt.'</a></center>';

with this one:

echo '<center><a onclick="ga(\'send\', \'event\', \'Call-To-Action\');" class="btn btn-primary" href="'.$link.'">'.$btnTxt.'</a></center>';

Any time the btn will be clicked, it will fire an event to Google Analystics, named "Call-To-Action". I am using this with success on my site.

Answer 2

Ok, finally someone made it work. The correct line was :

echo '<center><a class="btn btn-primary" href="'.$link.'" target="_blank"'; ?> onclick="ga('send', 'event', 'Video course', 'Click', 'Side banner');" <?php echo '>'.$btnTxt.'</a></center>';