Google JqueryUI 范围滑块上的分析事件跟踪

Question

所以我有一个简单的 JQuery UI 带有两个手柄的范围滑块，如图 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]);
        }
    });
});

实际上，此滑块充当我们的仪表板应用程序的过滤器，根据日期值的范围确定显示的有关用户结果的数据范围。

通过 Google 分析，我们希望跟踪句柄位置的不同排列。为了清楚起见，当我说排列时，这就是我的意思：

“0 到 30 天”是一种排列。
“-5 到 15 天”是另一种排列。
“-40 到 0 天”是另一种排列。

因此有大量的排列。

我的想法是有两个事件，每个滑块手柄一个，手柄的当前步长位置作为传递的值：

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

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

但是，这里有一个问题。虽然这种方法确实会 单独报告每个句柄的平均值， 我们希望同时看到这两个值。如上所述，这对我们很重要了解最流行的 "permutations"，具有由左手柄位置值和右手柄位置值组成的单个排列。

如果有人对如何设置此逻辑有建议，那就太好了。谢谢。

Answer 1

您可以将这两个值填充到逗号分隔的字符串中

您可以消除滑块事件的抖动，以仅记录用户保留超过一两秒的值。

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);
}

Google JqueryUI 范围滑块上的分析事件跟踪

Google Analytics Event Tracking on JqueryUI Range Slider

javascript

events

google-analytics

event-tracking