add temporary ahoy stats for tag sidebar clicks (#14688)

app/javascript/leftSidebar/TagsFollowed.jsx

@@ -1,7 +1,13 @@
 import { h, Fragment } from 'preact';
+import ahoy from 'ahoy.js';
 import PropTypes from 'prop-types';
 
 export const TagsFollowed = ({ tags = [] }) => {
+  const trackSidebarTagClick = (event) => {
+    // Temporary Ahoy Stats for usage reports
+    ahoy.track('Tag sidebar click', { option: event.target.href });
+  };
+
   return (
     <Fragment>
       {tags.map((tag) => (
@@ -12,6 +18,7 @@ export const TagsFollowed = ({ tags = [] }) => {
         >
           <a
             title={`${tag.name} tag`}
+            onClick={trackSidebarTagClick}
             className="crayons-link crayons-link--block"
             href={`/t/${tag.name}`}
           >

app/javascript/packs/homePage.jsx

@@ -1,4 +1,5 @@
 import { h, render } from 'preact';
+import ahoy from 'ahoy.js';
 import { TagsFollowed } from '../leftSidebar/TagsFollowed';
 
 /* global userData */
@@ -43,6 +44,16 @@ function renderTagsFollowed(user = userData()) {
   });
 
   render(<TagsFollowed tags={followedTags} />, tagsFollowedContainer);
+  trackTagCogIconClicks();
+}
+
+// Temporary Ahoy Stats for usage reports
+function trackTagCogIconClicks() {
+  document
+    .getElementById('tag-priority-link')
+    ?.addEventListener('click', () => {
+      ahoy.track('Tag settings cog icon click');
+    });
 }
 
 function renderSidebar() {

app/views/layouts/_sidebar_tags.html.erb

@@ -2,7 +2,7 @@
   <% if user_signed_in? %>
     <header class="p-2 pr-0 flex items-center justify-between">
       <h3 class="crayons-subtitle-3">My Tags</h3>
-      <a href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
+      <a id="tag-priority-link" href="/dashboard/following_tags" class="crayons-btn crayons-btn--icon crayons-btn--ghost-dimmed" aria-label="Customize tag priority" title="Customize tag priority">
         <%= inline_svg_tag("cog.svg", class: "crayons-icon") %>
       </a>
     </header>