nextlevelshit
/
dailysh.it
1
0
Fork 0
Code

add visit duration to tracking events

This commit is contained in:
Michael Czechowski 2024-10-18 11:01:43 +02:00
parent 69c8875309
commit 64e1b0dd55
Signed by: nextlevelshit
GPG Key ID: 3DB96851AACDE749
7 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.pug
View File

@ -15,8 +15,8 @@ html.scroll-smooth(lang=lang)
const footerObserver = new IntersectionObserver((payload) => {
const hasScrolltedTo = payload.pop().isIntersecting;
if (hasScrolltedTo && window.hasOwnProperty("umami")) {
umami.track("scrolled to", {position: "footer", id: "footer"});
console.debug("scrolled to footer");
umami.track("scrolled to", {position: "footer", id: "footer", visitDuration: getVisitDuration()});
console.debug("scrolled to footer", {visitDuration: getVisitDuration()});
}
});
footerObserver.observe(footerEl);
@ -26,8 +26,8 @@ html.scroll-smooth(lang=lang)
new IntersectionObserver((payload) => {
const hasScrolltedTo = payload.pop().isIntersecting;
if (hasScrolltedTo && window.hasOwnProperty("umami")) {
umami.track("scrolled to", {position: "section", id});
console.debug("scrolled to section with id", id);
umami.track("scrolled to", {position: "section", id, visitDuration: getVisitDuration()});
console.debug("scrolled to section with id", {id, visitDuation: getVisitDuration()});
}
});
sections.forEach((section) => sectionObserver(section.id).observe(section));

4
src/components/Academia.pug
View File

@ -17,7 +17,7 @@ section#academia.bg-nls-black.text-white
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses dhbw' })"
onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.dhbw
ul.list-disc.list-inside
li= academia.courses.dhbw[0]
@ -25,7 +25,7 @@ section#academia.bg-nls-black.text-white
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh' })"
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.lfh
ul.list-disc.list-inside
each course in academia.courses.lfh

4
src/components/Collapsable.pug
View File

@ -16,7 +16,7 @@ mixin Collapsable(data, open)
details.mb-4(open=isExpanded)
summary.rounded-sm.transition.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
class=`sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
onclick=`umami.track('collapsable clicked', { category: '${category}' })`
onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
)= data.summary
ul.list-disc.list-inside.text-gray-400
each item in data.items
@ -32,7 +32,7 @@ mixin Collapsable(data, open)
target="_blank",
aria-label=link.description,
rel="noopener noreferrer",
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}' })`
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
)= link.text
if index < item.links.length - 1
| ,&nbsp;

6
src/components/Footer.pug
View File

@ -1,7 +1,7 @@
mixin Link(href, label, target, rel)
- const eventName = "external link clicked";
- const eventCategory = "footer";
- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}' })`;
- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}', visitDuration: getVisitDuration() })`;
a.transition-colors.text-white(href=href, class="hover:text-amber-300", target=target, rel=rel, onclick=onclick)
block
@ -43,7 +43,7 @@ footer#footer.bg-nls-black.text-white
href=footer.emailLink,
class="hover:text-amber-300",
rel="noopener noreferrer",
onclick="umami.track('email clicked', { position: 'footer' })"
onclick="umami.track('email clicked', { position: 'footer', visitDuration: getVisitDuration() })"
) #{footer.emailText}
+Link("https://git.dailysh.it/nextlevelshit/dailysh.it", "gitea", "_blank", "noopener noreferrer")
| #{footer.gitea}
@ -52,6 +52,6 @@ footer#footer.bg-nls-black.text-white
href=footer.riskUrl,
aria-label=footer.riskAriaLabel,
title=footer.riskTitle,
onclick="umami.track('easter egg clicked', { category: 'footer', position: 'footer' })"
onclick="umami.track('easter egg clicked', { category: 'footer', position: 'footer', visitDuration: getVisitDuration() })"
)
img.w-12.ml-auto(src=footer.riskImgSrc, alt=footer.riskImgAlt, class="mt-[1000vh]")

7
src/components/Head.pug
View File

@ -107,3 +107,10 @@ head
)
script(async, defer, data-website-id=head.umamiId, src=head.umamiSrc)
script.
window.visitDuration = Date.now();
const getVisitDuration = () => {
return Math.floor((Date.now() - window.visitDuration) / 1000);
};

2
src/components/Professional.pug
View File

@ -14,7 +14,7 @@ section#professional.bg-nls-black.text-white
title=item.link.title,
target="_blank",
rel="noopener noreferrer",
onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}' })`,
onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}', visitDuration: getVisitDuration() })`,
aria-label=item.link.ariaLabel
) #{item.link.text}
| #{item.text}

4
src/components/Title.pug
View File

@ -10,8 +10,8 @@ header.bg-nls-black.text-white
| &amp; #{title.jobTitle[1]}
h2.text-2xl.mt-8.opacity-90.group(class="sm:text-5xl sm:mt-16", itemprop="email")
a(
onclick="umami.track('email clicked', { position: 'title' })",
onmouseover="umami.track('email hovered', { position: 'title' })",
onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
href=footer.emailLink,
rel="noopener noreferrer",
itemprop="email"