我正在尝试跟踪使用MATOMO的R-Shiny应用程序的选项卡视图。选项卡是使用TabPanel（）创建的。我还没有找到有效的解决方案。到目前为止，我已经尝试了提到的解决方案。 我试图将其插入服务器：

Question

ui <- fluidPage(

...

    tags$script(
      HTML(
        "$(document).on('click', '>tabPanelid<', function(e) {
        ga('send', 'event', 'TabsetPanel', 'Tab Viewed', $(this).attr('data-value'));
        });"
      )
    ),

...

)

我不知道什么是matomo，但这是如何跟踪活动选项卡。 当您做

tabsetPanel(tabPanel("THE TAB ID", tags$span(2)))

时，这会产生此HTML代码：

<div class="tabbable">
  <ul class="nav nav-tabs" data-tabsetid="2677">
    <li class="active">
      <a href="#tab-2677-1" data-toggle="tab" data-bs-toggle="tab" data-value="THE TAB ID">THE TAB ID</a>
    </li>
  </ul>
  <div class="tab-content" data-tabsetid="2677">
    <div class="tab-pane active" data-value="THE TAB ID" id="tab-2677-1">
      <span>2</span>
    </div>
  </div>
</div>

这是一些bootstrap3

东西。您必须在带有属性

shown.bs.tab

元素上收听事件

Answer 1

，并且选项卡ID在

data-toggle="tab"

属性中。所以这是：

data-value

还有其他选项卡事件：

$("a[data-toggle='tab']").on("shown.bs.tab", function(e) {
  var tabId = $(e.target).data("value");
  alert(tabId);
});