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 Analytics，我们希望跟踪句柄位置的不同排列。为清楚起见，当我说排列时，这就是我的意思：

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

因此有大量的排列。

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

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

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

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

如果有人对如何设置此逻辑提出建议，那将是非常好的。谢谢。

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

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

1 个答案: