From bd889f2b2f58822667ff553749a7fffec93ae3af Mon Sep 17 00:00:00 2001
From: Gavin Mogan <git@gavinmogan.com>
Date: Sat, 23 Oct 2021 14:46:36 -0700
Subject: [PATCH 1/2] [Matomo] Record hash changes so we know which tab was
 clicked on

Easiest solution for recording it, other methods would be custom events,
        but custom i'd like to think of these as different urls/pages
---
 gatsby-browser.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 95d82da62..8dbc82b79 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,3 +1,14 @@
+const gatsbyMatomo = require('gatsby-plugin-matomo/gatsby-browser');
+
+exports.onInitialClientRender = function () {
+    let prevLocation = {...location};
+    // Make sure we record anchor changes so we know when tabs are selected
+    window.addEventListener('hashchange', () => {
+        gatsbyMatomo.onRouteUpdate({location, prevLocation});
+        prevLocation = {...location};
+    });
+};
+
 exports.onClientEntry = function () {
     require.ensure(['@sentry/browser'], (require) => {
         const Sentry = require('@sentry/browser');

From 2b3b9441b35afd28f61a22f84cc22aabd32db88c Mon Sep 17 00:00:00 2001
From: Gavin Mogan <git@gavinmogan.com>
Date: Sat, 23 Oct 2021 15:44:30 -0700
Subject: [PATCH 2/2] Track as events as well. Also make tabs pills for more
 visiblility

---
 gatsby-browser.js        | 2 +-
 src/templates/plugin.jsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index 8dbc82b79..5e672e949 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -4,7 +4,7 @@ exports.onInitialClientRender = function () {
     let prevLocation = {...location};
     // Make sure we record anchor changes so we know when tabs are selected
     window.addEventListener('hashchange', () => {
-        gatsbyMatomo.onRouteUpdate({location, prevLocation});
+        gatsbyMatomo.onRouteUpdate({location, prevLocation}, {});
         prevLocation = {...location};
     });
 };
diff --git a/src/templates/plugin.jsx b/src/templates/plugin.jsx
index dd6d766ad..404d999f2 100644
--- a/src/templates/plugin.jsx
+++ b/src/templates/plugin.jsx
@@ -43,6 +43,11 @@ function getDefaultTab() {
 
 function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseDependencies, versions}}) {
     const [state, setState] = useState({selectedTab: getDefaultTab()});
+    const switchTab = (tab) => {
+        const _paq = window._paq || [];
+        _paq.push(['trackEvent', 'Plugin Page', 'Click Tab', tab]);
+        setState({selectedTab: tab});
+    };
     const pluginPage = 'templates/plugin.jsx';
 
     return (
@@ -62,10 +67,10 @@ function PluginPage({data: {jenkinsPlugin: plugin, reverseDependencies: reverseD
                 <div className="col-md-9 main">
                     <PluginActiveWarnings securityWarnings={plugin.securityWarnings} />
                     <PluginGovernanceStatus plugin={plugin} />
-                    <ul className="nav nav-tabs">
+                    <ul className="nav nav-pills">
                         {tabs.map(tab => (
                             <li className="nav-item" key={tab.id}>
-                                <a className={`nav-link ${state.selectedTab === tab.id ? 'active' : ''}`} href={`#${tab.id}`} onClick={() => setState({selectedTab: tab.id})}>{tab.label}</a>
+                                <a className={`nav-link ${state.selectedTab === tab.id ? 'active' : ''}`} href={`#${tab.id}`} onClick={() => switchTab(tab.id)}>{tab.label}</a>
                             </li>
                         ))}
                     </ul>