I currently have tabs() working on a page with 4 tabs.
I am trying to use event tracking to track tab clicks which works fine EXCEPT on initial page load. I want the page to identify which tab is loaded on page load but it is not registering
My Code:
$( "#tabs" ).tabs({
//activate to pass the active tab on click to the hidden field
activate: function( event, ui ) {
$('#activeTab').val($("#tabs").tabs('option', 'active'));
trackEvent('DeptPerformance', 'Tabs', $("#tabs .ui-tabs-active").text());
},
disabled: [<?=($isGroup?0:'')?>],
active: <?=($isGroup?1:0)?>
});
I tried adding:
create: function( event, ui ) {
trackEvent('DeptPerformance', 'Tabs', $("#tabs .ui-tabs-active").text());
},
But this does not track the event.
Is there another method or event I should be using to track the event once the page is loaded?
Further testing identified that the analytics code was not loaded when the tab is created - added a timeout to wait 1 second for analytics to catch up.
to fix:
$( "#tabs" ).tabs({
//activate to pass the active tab on click to the hidden field
activate: function( event, ui ) {
$('#activeTab').val($("#tabs").tabs('option', 'active'));
trackEvent('DeptPerformance', 'Tabs', $("#tabs .ui-tabs-active").text());
},
create: function( event, ui ) {
setTimeout(function(){
trackEvent('DeptPerformance', 'Tabs', $("#tabs .ui-tabs-active").text());
}, 1000);
},
disabled: [<?=($isGroup?0:'')?>],
active: <?=($isGroup?1:0)?>
});