feat: add more plausible events
This commit is contained in:
		
							parent
							
								
									a73aca8ed9
								
							
						
					
					
						commit
						11959de11c
					
				
					 5 changed files with 63 additions and 22 deletions
				
			
		| 
						 | 
					@ -168,7 +168,16 @@ 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)")
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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")
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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()
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -123,6 +123,11 @@ const redir = (id, term) => {
 | 
				
			||||||
    ".singlePage",
 | 
					    ".singlePage",
 | 
				
			||||||
  )
 | 
					  )
 | 
				
			||||||
  closeSearch()
 | 
					  closeSearch()
 | 
				
			||||||
 | 
					  plausible("Search", {
 | 
				
			||||||
 | 
					    props: {
 | 
				
			||||||
 | 
					      term
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function openSearch() {
 | 
					function openSearch() {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue