pulibrary / figgy

Valkyrie-based digital repository backend.
Other
35 stars 4 forks source link

Track interactive clicks within the viewer #6378

Closed tpendragon closed 1 week ago

tpendragon commented 2 months ago

We should consider interacting with the viewer as being an interaction, so that if someone sits on a record page for a long time and fiddles with the viewer that "visit duration" is tracked.

Acceptance Criteria

Notes

We might be able to use a tracker in Figgy that sends data to the DPUL plausible site. Maybe add some parameter to the viewer that says "this one came from DPUL", if necessary.

We might need to add a custom event to a click handler in the viewer javascript.

We might only want Figgy to send data to Plausible for the viewer pane.

First Step

Figure out what the data looks like when Figgy's view data is going into DPUL's plausible.

Seanwarren77 commented 1 month ago

This will be similar to https://github.com/pulibrary/figgy/pull/6388 Here is the universal viewer events https://github.com/UniversalViewer/universalviewer/blob/main/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Events.ts

sdellis commented 2 weeks ago

Example of an OpenSeaDragon click event that was fired when clicking the next page icon in the UV. The next step would be to do a proof of concept that we can capture this event and then send to plausible with any useful data.

click { target: canvas
, buttons: 0, clientX: 644, clientY: 275, layerX: 372, layerY: 196 }
​
altKey: false
​
bubbles: true
​
button: 0
​
buttons: 0
​
cancelBubble: false
​
cancelable: true
​
clientX: 644
​
clientY: 275
​
composed: true
​
ctrlKey: false
​
currentTarget: null
​
defaultPrevented: true
​
detail: 1
​
eventPhase: 0
​
explicitOriginalTarget: <canvas style="background: transparent;…th: 100%; height: 100%;" width="1072" height="716">
​
isTrusted: true
​
layerX: 372
​
layerY: 196
​
metaKey: false
​
movementX: 0
​
movementY: 0
​
offsetX: 0
​
offsetY: 0
​
originalTarget: <canvas style="background: transparent;…th: 100%; height: 100%;" width="1072" height="716">
​
pageX: 644
​
pageY: 275
​
rangeOffset: 0
​
rangeParent: null
​
relatedTarget: null
​
returnValue: false
​
screenX: 680
​
screenY: 569
​
shiftKey: false
​
srcElement: <canvas style="background: transparent;…th: 100%; height: 100%;" width="1072" height="716">​
target: <canvas style="background: transparent;…th: 100%; height: 100%;" width="1072" height="716">
​
timeStamp: 291966
​
type: "click"
​
view: Window http://localhost:3000/viewer#?manifest=http://localhost:3000/concern/scanned_resources/89e28e8f-2025-4ef6-bf10-a7be36cabfbe/manifest&c=&m=&s=&cv=&xywh=-115%2C-18%2C429%2C287
​
which: 1
​
x: 644
​
y: 275
​
<get isTrusted()>: function isTrusted()
​
<prototype>: MouseEventPrototype { initMouseEvent: initMouseEvent(), getModifierState: getModifierState(), initNSMouseEvent: initNSMouseEvent(), … }