Google Analytics Tracking in shinydashboard app

[danwwilson]

I am currently attempting to implement Google Analytics tracking within a shinydashboard created app.
I am basing my implementation on this guide (http://shiny.rstudio.com/articles/google-analytics.html)

There are a few issues that I'm encountering in the implementation of this.

Firstly the menuItem objects in the sidebarMenu don't have IDs associated with them to be able to call from JavaScript to identify whether one of them has been clicked. The same issues exist for the tabPanel not having IDs either.

The menuItem looks to have been addressed in item #128 although it would be great if it included some code to address the tabPanel too.

Further to this I have noticed that when I have a select widget in the sidebar (called 'my_input') for some reason a JavaScript function that looks like the below code will be called twice.

    $(document).on('change', 'select#my_input.selectized.shiny-bound-input', function(e) {
      ga('send', 'event','filter', 'myItem', $(e.currentTarget).val());
    }); 

I believe this is to do with the way the HTML code gets built and for some reason it appears that after the select a div gets created that is created to reflect the value that was selected from the drop down widget.

    <div>
      <select id="my_input" tabindex="-1" class="selectized shiny-bound-input" style="display: none;">
        <option value="Trend" selected="selected">Trend</option>
      </select>
      <div class="selectize-control single">
        <div class="selectize-input items full has-options has-items">
          <div data-value="Trend" class="item">Trend</div>
          <input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">
        </div>
        <div class="selectize-dropdown single" style="display: none; visibility: visible; width: 203px; top: 34px; left: 0px;">
          <div class="selectize-dropdown-content">
            <div data-value="Trend" data-selectable="" class="option selected">Trend</div>
            <div data-value="Item1" data-selectable="" class="option">Item1</div>
            <div data-value="Item2" data-selectable="" class="option">Item2</div>
          </div>
        </div>
      </div>
      <script type="application/json" data-for="my_input" data-nonempty="">{}</script>
    </div>

Thoughts on how to ensure only one execution of the JavaScript above occurs would be great, and consideration to pull request #128 would be greatly appreciated.