Semantic UI - Tabs / showing URL

Question

Hope somebody can help..

I am using SUI's tab component and all is working well, however when the tabs are clicked I want the URL to change to reflect each tab , so that they can be individually tracked in google analytics. Its a single page application, the main page structure loading as /dashboard, each tab loads from /dashboard/data-tab-name remotely on click, but the url is only showing /dashboard in the browser - google analytics is therefore only picking up one URL, whereas there are 5 separate tabs on the application.

How can the settings be changed to make the url reflect the tab being viewed?

HTML:

<div id="infotabs">
   <div class="ui tabular menu">   
        <div class="ui container backfill">
          <a class="item active tabby" data-tab="live"><i class="large home icon"></i><span class="mobile hidden">Live Power</span></a>
          <a class="item tabby"  data-tab="yesterday"><i class="large chart bar icon"></i><span class="mobile hidden">Yesterday</span></a>
          <a class="item tabby" data-tab="balance"><i class="large balance scale icon"></i><span class="mobile hidden">Balance</span></a>
          <a class="item tabby" data-tab="historic"><i class="large history icon"></i><span class="mobile hidden">Historic</span></a>
          <a class="item tabby community" data-tab="community"><i class="large users icon"></i><span class="mobile hidden">Community</span></a>
          <div class="right item prop-info hidden" id="prop-number">Prop Ref: <%=currentUser.number %></div>            
        </div>  
   </div>
</div>

<div class="ui tab basic active segment" data-tab="live"></div>
<div class="ui tab basic segment" data-tab="yesterday"></div>
<div class="ui tab basic segment" data-tab="balance"></div>
<div class="ui tab basic segment" data-tab="historic"></div>
<div class="ui tab basic segment" data-tab="community"></div> 

JS:

   $('#infotabs .menu .item')
     .tab({
       evaluateScripts : true,
       auto: true,
       path: '/dashboard/',
       ignoreFirstLoad: false,
       alwaysRefresh: false,
       onRequest: function(){
         var panel = document.getElementById('loading-panel');
         if(panel.innerHTML === '') {
           panel.innerHTML = '<h3 class=\"loader-message\">Loading data - may take a few seconds...</h3>'
         }
       },
       onLoad: function(){
        var panel = document.getElementById('loading-panel');
        panel.innerHTML = ''
       }
  });

  $('#infotabs .menu .item').tab('change tab', 'live');

Thanks in advance for your help.

Answer 1

I figured it out, using the Asual address library (V1.5) https://github.com/asual/jquery-address and downgrading jQuery version to 1.8.3 as 1.9 and later are not supported:

<script src="https://code.jquery.com/jquery-1.8.3.min.js" integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8=" crossorigin="anonymous"></script>
<script src="/js/jquery.address-1.5.js" type="text/javascript"></script> 

And in the JS setting history & historyType:

  $('#infotabs .menu a.item')
      .tab({
        evaluateScripts : true,
        auto: true,
        path: '/dashboard/',
        history: true,
        historyType: 'hash',
        ignoreFirstLoad: false,
        alwaysRefresh: true,
        onRequest: function(){
          var panel = document.getElementById('loading-panel');
            if(panel.innerHTML === '') {
            panel.innerHTML = '<h3 class=\"loader-message\">Loading data - may take a few seconds...</h3>'
            }
        },
        onLoad: function(){
          var panel = document.getElementById('loading-panel');
          panel.innerHTML = ''
        }
      });

Google analytics can then be configured to recognise the hash history urls e.g. /dashboard#/live, /dashboard#/yesterday etc