@tinytapanalytics/sdk/dist/features/heatmap.min.js

Behavioral psychology platform that detects visitor frustration, predicts abandonment, and helps you save at-risk conversions in real-time

var t={d:function(i,s){for(var e in s)t.o(s,e)&&!t.o(i,e)&&Object.defineProperty(i,e,{enumerable:!0,get:s[e]})},o:function(t,i){return Object.prototype.hasOwnProperty.call(t,i)}},i={};t.d(i,{R:function(){return s}});class s{constructor(t,i){this.clickPoints=[],this.movePoints=[],this.scrollPoints=[],this.isActive=!1,this.samplingRate=.1,this.maxPoints=1e3,this.config=t,this.sdk=i,void 0!==t.heatmapSamplingRate&&(this.samplingRate=t.heatmapSamplingRate)}start(){!this.isActive&&this.shouldTrackHeatmap()&&(this.isActive=!0,this.setupClickTracking(),this.setupMoveTracking(),this.setupScrollTracking(),this.setupPageUnloadTracking(),this.config.debug)}stop(){this.isActive&&(this.isActive=!1,this.sendHeatmapData(),this.config.debug)}setupClickTracking(){document.addEventListener("click",t=>{if(!this.isActive)return;const i={x:t.clientX+window.scrollX,y:t.clientY+window.scrollY,intensity:1,timestamp:Date.now(),type:"click"};this.addClickPoint(i)},!0)}setupMoveTracking(){let t=0;document.addEventListener("mousemove",i=>{if(!this.isActive)return;const s=Date.now();if(s-t<100)return;t=s;const e={x:i.clientX+window.scrollX,y:i.clientY+window.scrollY,intensity:.1,timestamp:s,type:"move"};this.addMovePoint(e)},{passive:!0})}setupScrollTracking(){let t=0;window.addEventListener("scroll",()=>{if(!this.isActive)return;const i=Date.now();if(i-t<250)return;t=i;const s=this.getScrollDepth(),e={x:window.innerWidth/2,y:window.scrollY+window.innerHeight/2,intensity:s/100,timestamp:i,type:"scroll"};this.addScrollPoint(e)},{passive:!0})}setupPageUnloadTracking(){window.addEventListener("beforeunload",()=>{this.sendHeatmapData()}),document.addEventListener("visibilitychange",()=>{document.hidden&&this.sendHeatmapData()})}addClickPoint(t){const i=this.findNearbyPoint(this.clickPoints,t,20);i?(i.intensity+=1,i.timestamp=t.timestamp):this.clickPoints.push(t),this.trimPointsArray(this.clickPoints),this.debouncedSend()}addMovePoint(t){Math.random()>.1||(this.movePoints.push(t),this.trimPointsArray(this.movePoints))}addScrollPoint(t){this.scrollPoints.push(t),this.trimPointsArray(this.scrollPoints)}findNearbyPoint(t,i,s){return t.find(t=>Math.sqrt(Math.pow(t.x-i.x,2)+Math.pow(t.y-i.y,2))<=s)||null}trimPointsArray(t){t.length>this.maxPoints&&t.splice(0,t.length-this.maxPoints)}debouncedSend(){this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=window.setTimeout(()=>{this.sendHeatmapData()},5e3)}sendHeatmapData(){if(0===this.clickPoints.length&&0===this.movePoints.length&&0===this.scrollPoints.length)return;const t={url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},points:[...this.clickPoints,...this.movePoints,...this.scrollPoints],sessionId:this.sdk.sessionId,userId:this.sdk.userId};this.sdk.track("heatmap_data",t),this.clickPoints=[],this.movePoints=[],this.scrollPoints=[],this.config.debug}generateHeatmapVisualization(t){if(!this.isActive)return;const i=document.getElementById(t);if(!i)return;const s=document.createElement("canvas");s.width=window.innerWidth,s.height=document.documentElement.scrollHeight,s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.pointerEvents="none",s.style.zIndex="999999";const e=s.getContext("2d");e&&(this.drawHeatmapPoints(e,this.clickPoints,"rgba(255, 0, 0, 0.6)"),this.drawHeatmapPoints(e,this.movePoints,"rgba(0, 255, 0, 0.3)"),this.drawHeatmapPoints(e,this.scrollPoints,"rgba(0, 0, 255, 0.4)"),i.appendChild(s))}drawHeatmapPoints(t,i,s){i.forEach(i=>{const e=Math.max(5,20*i.intensity);t.beginPath(),t.arc(i.x,i.y,e,0,2*Math.PI),t.fillStyle=s,t.fill()})}getScrollDepth(){const t=window.innerHeight,i=document.documentElement.scrollHeight,s=window.pageYOffset||document.documentElement.scrollTop;return Math.round(s/(i-t)*100)}shouldTrackHeatmap(){return Math.random()<this.samplingRate}getStats(){return{isActive:this.isActive,clickPoints:this.clickPoints.length,movePoints:this.movePoints.length,scrollPoints:this.scrollPoints.length,totalPoints:this.clickPoints.length+this.movePoints.length+this.scrollPoints.length}}clearData(){this.clickPoints=[],this.movePoints=[],this.scrollPoints=[],this.config.debug}setSamplingRate(t){this.samplingRate=Math.max(0,Math.min(1,t)),this.config.debug}exportData(){return{url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},points:[...this.clickPoints,...this.movePoints,...this.scrollPoints],sessionId:this.sdk.sessionId,userId:this.sdk.userId}}}var e=i.R;export{e as Heatmap};