feat: add more plausible events

This commit is contained in:
Jacky Zhao 2023-02-05 11:34:39 -08:00
parent a73aca8ed9
commit 11959de11c
5 changed files with 63 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -183,6 +183,28 @@
throwOnError : false throwOnError : false
}); });
{{end}} {{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> </script>
{{if $data.enableSPA | default $.Site.Data.config.enableSPA}} {{if $data.enableSPA | default $.Site.Data.config.enableSPA}}
@ -207,4 +229,5 @@
{{end}} {{end}}
{{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }} {{ $trimmedURL := trim (index (split .Site.BaseURL "://") 1) "/" }}
<script defer data-domain="{{$trimmedURL}}" src="https://plausible.io/js/script.js"></script> <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> </head>