Merge pull request #831 from jenkins-infra/record-ancor-change

[Matomo] Record which tab on plugin page was clicked
jenkins-infra · Oct 23, 2021 · 3b158e7 · 3b158e7
2 parents 13067fa + 2b3b944
commit 3b158e7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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');

diff --git 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>