Google Analytics Event Tracking on JqueryUI Range Slider

Question

So I have a simple JQuery UI range slider with two handles, as shown in this JSFiddle.

HTML

<p class="results-val">
    <span class="min-val">0 </span>to
    <span class="max-val"> 30</span> days
</p>
<div id="slider"></div>

JS

$(function(){
    $( "#slider" ).slider({
        range: true,
        min: -60,
        max: 60,
        step: 5,
        values: [ 0, 30 ],
        slide: function(event, ui) {
            $(".min-val").text(ui.values[0] + " ");
            $(".max-val").text(" " + ui.values[1]);
        }
    });
});

In practice, this slider acts as a filter for our Dashboard application, scoping data shown regarding the user's results based on the range of day values.

Via Google Analytics, we want to track different permutations of handle positions. For clarity, when I say permutations, this is what I mean:

• "0 to 30 days" is one permutation.

• "-5 to 15 days" is another permutation.

• "-40 to 0 days" is another permutation.

And so there are tons of permutations.

My idea for this is to have two events, one for each slider handle, with the handle's current step position as the value being passed:

Category: Filtering,
Action: Adjustment,
Label: leftHandle,
Value: stepPos

Category: Filtering,
Action: Adjustment,
Label: rightHandle,
Value: stepPos

However, there's a problem here. While this approach will indeed report an Average Value for each handle individually, we want to see both values together. As stated above, it's important for us to know the most popular "permutations", with a single permutation consisting of both a left handle position value and a right handle position value.

If anyone has suggestions on how to set this logic, that would be wonderful. Thank you.

Answer 1

You can stuff both values into a comma separated string

You can debounce the slider event to only record values that the user keeps for more than a second or two.

var globalLeft, globalRight;

$(function(){

    $( "#slider" ).slider({
        range: true,
        min: -60,
        max: 60,
        step: 5,
        values: [ 0, 30 ],
        slide: function(event, ui) {
            $(".min-val").text(ui.values[0] + " ");
            $(".max-val").text(" " + ui.values[1]);

            globalLeft  = ui.values[0];
            globalRight = ui.values[1];

            $.debounce(1300, doPingGa)
        }
    });
});
function doPingGa() {
    ga('send', 'event', 'Filtering', 'RangeAdjust', globalLeft+','+globalRight);
}