Question

I am having some trouble implementing a JQuery star rating plugin. The plugin in question can be found at http://orkans-tmp.22web.net/star_rating/

The trouble I’m having is passing the score off to Google analytics. I have managed to implement the plugin but for some reason the code will not fire the analytics custom event. The correct current value is alerted when the stars are clicked, which is the value I want to pass to the Google analytics event tracking.

Any help would be much appreciated, my code is as follows:

<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>   
<script type="text/javascript" src="js/jquery.min.js></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.stars.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.stars.css"/>


<script type="text/javascript">
    var url = location.href;

    $(function ratingStars(){
        $("#ratings").stars({
            captionEl: $("#stars-cap"),
            oneVoteOnly: false,
        });
    });

    $(document).ready(function(){
        $('.ui-stars-star').click(function() {
            // Retrieve instance
            var ui = $("#ratings").data("stars");
            var currValue = ui.options.value;
            //alert the currValue to make sure it is in place.
            alert(currValue);
           //send data to track
          _gaq.push(['_trackEvent', 'UATRatingTest', 'UATRatingTest2', url, currValue]);
        });
    });
</script>

<div class="RatingStars">
    <form id="ratings">
        <input type="radio"  name="rate" value="1" title="Poor" id="rate1" />
        <input type="radio"  name="rate" value="2" title="Fair" id="rate2" /> 
        <input type="radio"  name="rate" value="3" title="Average" id="rate3" /> 
        <input type="radio"  name="rate" value="4" title="Good" id="rate4" /> 
        <input type="radio"  name="rate" value="5" title="Excellent" id="rate5" />
    </form>
<span style="margin-right:5px; margin-left:10px;"> Rating: </span> <span id="stars-cap"></span> <br/>

The plugin creates a

<div class="ui-stars-star"> 

for each star which is why I put a click function on it, to try and submit the score given.

If anyone has any previous experience with the plugin that would be great.

Thanks,

Simon

Answer 1

I found the answer to my problem. It appears the currValue was being parsed as a String, not an integer which is required by analytics to fire the script. I solved it by converting the value into an integer using the following code:

var myString = currValue;
var myConvertedInteger;
myConvertedInteger = parseInt(myString);
//Check string has been converted 
alert(myConvertedInteger);
_gaq.push(['_trackEvent', 'UATRatingTest', 'UATRatingTest2', url, myConvertedInteger]);

Thanks for your input Rory.