使用 Matomo 跟踪用户在 R Shiny 应用程序中点击 tabPanel()

Question

我正在尝试使用 Matomo 跟踪 R-Shiny 应用程序的选项卡查看。选项卡是使用 tabPanel() 创建的。我还没有找到可行的解决方案。到目前为止，我已经尝试了here和here提到的解决方案。

我试图将其插入服务器：

server <- function(input, output, session) { 

...

  observe({ 
    if(input$>tabsetPanelid< == ">tabPanelid<") {
      HTML("<script>
           _paq.push(['trackPageView']);
           _paq.push(['setDocumentTitle', '>test<']);
           </script>")
    }
  })

...

}

我试着在用户界面中插入这个：

ui <- fluidPage(

...

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

...

)

Answer 1

我不知道什么是 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>

这是一些引导程序 3东西。您必须在具有属性data-toggle="tab" 的<a> 元素上监听事件shown.bs.tab，并且选项卡ID 在data-value 属性中。所以这里是如何：

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

还有其他选项卡事件：

$("a[data-toggle='tab']")
  .on("show.bs.tab", function() {
  alert("New tab will be visible now");
}).on("shown.bs.tab", function() {
  alert("New tab is visible now");
}).on("hide.bs.tab", function() {
  alert("Previous tab will be hidden now");
}).on("hidden.bs.tab", function() {
  alert("Previous tab is hidden now");
});