We are moving to Discord!

Join us on the Countly Community Discord Server! Engage in discussions, share your feature ideas, and learn from fellow Countly users to build exceptional apps and experiences.

Scroll heatmaps in SPA

Hello, I am using "countly-sdk-web": "^22.2.2" in Single page react application. Application has 4 steps.

When step changes I am tracking it with:

trackStep(step: Steps) {
window.STEP = step;
Countly.getViewUrl = () => {
return `${Steps[window.STEP]}`;

Countly.q.push(['track_pageview', Steps[step]]);

From logs page view event looks like this:

countly.js:3365 [INFO] Successfully adding event: {"key":"[CLY]_view","segmentation":{"name":"LANDING_PAGE","visit":1,"view":"/LANDING_PAGE","domain":"localhost","start":1},"count":1}
On dashboard I am able to see page views correctly, but not scrolls. However if I close the browser tab for example on step 3. Then open the app again, only this time scrolls for step 3 is being tracked.
Thank you!


  • Official comment

    Hello, thank you for reaching out to us. You mentioned you can see the 'page views' correctly. You meant that page URL is recorded correctly or you were talking about the 'click heatmaps'?
    For 'scroll views', the behavior you have observed is the intended behavior of Web SDK. Currently the Web SDK records scroll events when a page unloads and in your case it is the last step (step 3) that was open before the browser tab is closed, so the scroll data is visible only for that step.

    Can you tell me about the layout of your app. How are those steps laid out. How do you move from one step to another? 

    Comment actions Permalink
  • Hello, Page URL is correct, but 'scroll' heatmaps were incorrect. If I understand it correctly there is no way to record 'scroll' heatmaps for SPA, because scrolls are recorded only when page unloads. So when URL is changed in Multi page application or when browser tab is closed.

    Thank you.

    Comment actions Permalink

Please sign in to leave a comment.