From cf4b9f3f39ff13f1b562012a71bc48f97ac1c294 Mon Sep 17 00:00:00 2001 From: Jacky Zhao 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 aba301ef..ce0c73b7 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 554291a0..101d1c0c 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 efaa10e8..c29ab773 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 dc549beb..530bd7dc 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 8efccb1c..5ea0aa32 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) + } }; {{if $data.enableSPA | default $.Site.Data.config.enableSPA}} @@ -207,4 +229,5 @@ {{end}} {{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }} +