In T329333, we identified an issue with the click tracking for pinnable elements in the desktopWebUIActions schema.
In summary, the ToC and associated elements produce the following event.name values in the following configurations:
| ToC placement | Section click | Dropdown button click | [hide]/[move to sidebar] toggle click |
| page title | ❌toc-{{section ID}}.unknown.unpinned | ✅ui.dropdown-vector-page-titlebar-toc | ✅pinnable-header.vector-toc.pin |
| sticky header | ❌toc-{{section ID}}.unknown.unpinned | ✅ui.dropdown-vector-sticky-header-toc | ✅pinnable-header.vector-toc.pin |
| sidebar | ✅ui.sidebar-toc | N/A | ✅pinnable-header.vector-toc.unpin |
| floaty hamburger TOC | ❌toc-{{section ID]].unknown.pinned | ❓ui.dropdown-vector-page-titlebar-toc | N/A |
The Dropdown button and [hide]/[move to sidebar] events are largely fine, other than the floaty ToC button having the same event name as the header ToC.
The main issue is the ToC section clicks in when they are a pinned state. There are a few reasons for this:
#1 The sidebar ToC has a parent element with an event-name attribute:
<nav id="mw-panel-toc" role="navigation" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
Whereas the ToC in a pinned state does not:
<nav role="navigation" aria-label="Contents" class="vector-toc-landmark">
However, simply adding this attribute to the nav elements leads to two events firing for one section click.
#2 There also seem to be issue with the WikimediaEvent/desktopWebUIAction.js getMenuLinkEventName() code which formats the event.name value. The pinnableElementHeader.dataset.name returns unknown and the ID is drawn from the section ID of the list item. This leads to the incorrect toc-{{section ID}}.unknown.unpinned values.
