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) {
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))

View File

@ -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")

View File

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

View File

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

View File

@ -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>