feat: add more plausible events

assets/js/graph.js

@@ -1,14 +1,14 @@
 async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
 
   let {
-  depth,
-  enableDrag,
-  enableLegend,
-  enableZoom,
-  opacityScale,
-  scale,
-  repelForce,
-  fontSize} = graphConfig;
+    depth,
+    enableDrag,
+    enableLegend,
+    enableZoom,
+    opacityScale,
+    scale,
+    repelForce,
+    fontSize } = graphConfig;
 
   const container = document.getElementById("graph-container")
   const { index, links, content } = await fetchData
@@ -85,7 +85,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
       d.fy = null
     }
 
-    const noop = () => {}
+    const noop = () => { }
     return d3
       .drag()
       .on("start", enableDrag ? dragstarted : noop)
@@ -168,9 +168,18 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
     .style("cursor", "pointer")
     .on("click", (_, d) => {
       // SPA navigation
-      window.Million.navigate(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`), ".singlePage")
+      const targ = `${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`
+      window.Million.navigate(new URL(targ), ".singlePage")
+      plausible("Link Click", {
+        props: {
+          href: targ,
+          broken: false,
+          internal: true,
+          graph: true,
+        }
+      })
     })
-    .on("mouseover", function (_, d) {
+    .on("mouseover", function(_, d) {
       d3.selectAll(".node").transition().duration(100).attr("fill", "var(--g-node-inactive)")
 
       const neighbours = parseIdsFromLinks([
@@ -190,7 +199,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
       // highlight links
       linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
 
-      const bigFont = fontSize*1.5
+      const bigFont = fontSize * 1.5
 
       // show text for self
       d3.select(this.parentNode)
@@ -200,10 +209,10 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
         .duration(200)
         .attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
         .style('opacity', 1)
-        .style('font-size', bigFont+'em')
+        .style('font-size', bigFont + 'em')
         .attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px
     })
-    .on("mouseleave", function (_, d) {
+    .on("mouseleave", function(_, d) {
       d3.selectAll(".node").transition().duration(200).attr("fill", color)
 
       const currentId = d.id
@@ -214,12 +223,12 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
       linkNodes.transition().duration(200).attr("stroke", "var(--g-link)")
 
       d3.select(this.parentNode)
-      .select("text")
-      .transition()
-      .duration(200)
-      .style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
-      .style('font-size', fontSize+'em')
-      .attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
+        .select("text")
+        .transition()
+        .duration(200)
+        .style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
+        .style('font-size', fontSize + 'em')
+        .attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
     })
     .call(drag(simulation))
 
@@ -232,7 +241,7 @@ async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
     .text((d) => content[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
     .style('opacity', (opacityScale - 1) / 3.75)
     .style("pointer-events", "none")
-    .style('font-size', fontSize+'em')
+    .style('font-size', fontSize + 'em')
     .raise()
     .call(drag(simulation))
 

assets/js/popover.js

@@ -64,6 +64,11 @@ function initPopover(baseURL, useContextualBacklinks) {
             })
 
             el.classList.add("visible")
+            plausible("Popover Hover", {
+              props: {
+                href: li.dataset.src 
+              }
+            })
           })
           li.addEventListener("mouseout", () => {
             el.classList.remove("visible")

assets/js/router.js

@@ -15,7 +15,6 @@ export const attachSPARouting = (init, rerender) => {
   }
 
   const render = () => requestAnimationFrame(rerender)
-
   window.addEventListener("DOMContentLoaded", () => {
     apply((doc) => init(doc))
     init()

assets/js/util.js

@@ -123,6 +123,11 @@ const redir = (id, term) => {
     ".singlePage",
   )
   closeSearch()
+  plausible("Search", {
+    props: {
+      term
+    }
+  })
 }
 
 function openSearch() {

layouts/partials/head.html

@@ -183,6 +183,28 @@
         throwOnError : false
       });
       {{end}}
+
+      // analytics
+      function clickHandler(evt) {
+        const target = evt.target 
+        const classNames = target.className.split(" ")
+        const broken = classNames.includes("broken")
+        const internal = classNames.includes("internal-link")
+        plausible("Link Click", {
+          props: {
+            href: target.href,
+            broken,
+            internal,
+            graph: false,
+          }
+        })
+      }
+
+      const links = document.querySelectorAll("a")
+      for (link of links) {
+        link.addEventListener('click', clickHandler)
+        link.addEventListener('auxclick', clickHandler)
+      }
     };
   </script>
   {{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
@@ -207,4 +229,5 @@
   {{end}}
   {{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }}
   <script defer data-domain="{{$trimmedURL}}" src="https://plausible.io/js/script.js"></script>
+  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 </head>