From 11959de11ce76f0f47284b946a577481c0ffaeaa Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 5 Feb 2023 11:34:39 -0800
Subject: [PATCH] feat: add more plausible events
---
assets/js/graph.js | 51 ++++++++++++++++++++++----------------
assets/js/popover.js | 5 ++++
assets/js/router.js | 1 -
assets/js/util.js | 5 ++++
layouts/partials/head.html | 23 +++++++++++++++++
5 files changed, 63 insertions(+), 22 deletions(-)
diff --git a/assets/js/graph.js b/assets/js/graph.js
index aba301e..ce0c73b 100644
--- a/assets/js/graph.js
+++ b/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))
diff --git a/assets/js/popover.js b/assets/js/popover.js
index 554291a..101d1c0 100644
--- a/assets/js/popover.js
+++ b/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")
diff --git a/assets/js/router.js b/assets/js/router.js
index efaa10e..c29ab77 100644
--- a/assets/js/router.js
+++ b/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()
diff --git a/assets/js/util.js b/assets/js/util.js
index dc549be..530bd7d 100644
--- a/assets/js/util.js
+++ b/assets/js/util.js
@@ -123,6 +123,11 @@ const redir = (id, term) => {
".singlePage",
)
closeSearch()
+ plausible("Search", {
+ props: {
+ term
+ }
+ })
}
function openSearch() {
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 8efccb1..5ea0aa3 100644
--- a/layouts/partials/head.html
+++ b/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>