SPA : session restarted on every page change

[mquandalle]

Hello,

I'm using Clarity with a single page application build with Svelte Kit, and every time the user navigate to a new page, the clarity session is stopped and a new one is re-created. This makes it difficult to follow navigation patterns.

Since this is a SPA, there is not a full HTTP GET call that reload of the application, but the URL is still updated on the client, which seems to be detected by Clarity. By introspecting the network tab I see a reload, HTTP 1.1 event being send to the server, but I don't understand how to prevent it.

This seems similar to others issues around SPA such as #135, #57, #95, or #169.

Edit : This behavior seems to be related to the pushState / replaceState functions of core/history : https://github.com/microsoft/clarity/blob/master/packages/clarity-js/src/core/history.ts#L21, what is the reasoning for completely restarting clarity when pushState is called?

https://github.com/microsoft/clarity/blob/master/packages/clarity-js/src/core/history.ts#L43-L48

[yousefalaqra]

Are you using the source code to record/replay the sessions? or are you using Microsoft Clarity?

[mquandalle]

Microsoft Clarity

[tsirakis]

I have the same problem.

[Shuky]

Following

[TheLogan]

Hoping for an update soon, seems silly to make a new tool like this and not support SPA's .. :O

[TheLogan]

I seem to have fixed it by forcing the use of cookies.

[mquandalle]

Indeed it works better with the use of cookies, but it seems that clarity still "reset" the whole app on every page change which takes a few seconds in the replay instead of relying on in-app navigation of SPA to keep the current session. (See clarity.stop() clarity.start in the source code linked in OP).

Also for SPA cookies are not technically needed to follow in-app page navigation.

[ClaritySupport]

@mquandalle , We are Clarity support team. Could you please share project ID and link to recordings having the issue to investigate further. Clarity stopping and restarting shouldn’t cause a new session to be generated – it’s meant to only create a new page within a session.

[ClaritySupport]

Hi Maxime,

Yes, Clarity uses cookies to gather session data. Recordings will not be linked together into multi-page sessions if this cookies turned off. Learn how to customize the use of cookieshttps://docs.microsoft.com/en-us/clarity/cookie-consent

Thanks, Clarity Support Team Visit our docs!: https://docs.microsoft.com/en-us/clarityhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fclarity&data=05%7C01%7Cv-vidasa%40microsoft.com%7C343fe08f40a94e184c6408da28fedd21%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637867372409365494%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Q1zklwmipOGmVmg01HjPFwTVAwft75whSRoB8fFF%2BoY%3D&reserved=0 @.@.> @.***

Confidentiality note: This e-mail, and any attachment to it, contains privileged and confidential information intended only for the use of the individual(s) or entity named in the e-mail. If the reader of the e-mail is not the intended recipient, or the employee or agent responsible for delivering it to the intended recipient, you are hereby notified that reading it is strictly prohibited. If you have received this e-mail in error, please immediately return it to the sender and delete it from your system.

From: Maxime Quandalle @.> Sent: Thursday, October 20, 2022 10:37 AM To: microsoft/clarity @.> Cc: Microsoft Clarity Support @.>; Comment @.> Subject: Re: [microsoft/clarity] SPA : session restarted on every page change (#175)

If I remember correctly it was only if cookies where disabled in Clarity settings - they shouldn't be necessary to track page navigations in a SPA?

Reply to this email directly, view it on GitHubhttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fclarity%2Fissues%2F175%23issuecomment-1285915786&data=05%7C01%7Cv-vikasd%40microsoft.com%7C7e87f53ffe324893a0ab08dab2c1a8fd%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638018842121791267%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=8i8s5tMdtalqi1UlMT8T4Y1fVAfEw1lxlWGmwABHN%2BE%3D&reserved=0, or unsubscribehttps://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAW5BXQ6CLBMZ5OTOOK3XEM3WEF7K3ANCNFSM5FGRZI4A&data=05%7C01%7Cv-vikasd%40microsoft.com%7C7e87f53ffe324893a0ab08dab2c1a8fd%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638018842121791267%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=9L0wBcTa9PYG8YzBQ%2BpjcyXs1UWk4T2RFPerLDcfdJ0%3D&reserved=0. You are receiving this because you commented.Message ID: @.@.>>

[gpopovic]

Any news on this? It does not properly work for SPA

[ClaritySupport]

@gpopovic ,Could you please share project ID and link to recordings having the issue to investigate further. Clarity stopping and restarting shouldn’t cause a new session to be generated – it’s meant to only create a new page within a session.

[gpopovic]

Sorry, it turns out that it works properly

[mquandalle]

@ClaritySupport I reinstalled Clarity to check if this issue was fixed, but I still have it. You can see a recording here: https://clarity.microsoft.com/shared/recording/4993c8dd-aa99-4646-818e-954a20787093 When the user move the slider on https://bonforfait.fr/forfait-mobile/forfait-pas-cher, the URL is updated with the selected value. This caused Clarity to stop the recording and start a new one, which makes it almost impossible to follow what's happening in a session.

This issue only happen if cookies are disabled in Clarity, but I don't see why they would be necessary to track a URL navigation in a SPA.

[ClaritySupport]

@mquandalle ,You need to enable cookies if you want session stitching.Without cookies we treat every page view as a separate session. And with SPA we treat every url change as a new page view.

[mquandalle]

Thank for the quick response. So if this is working as intended, this issue is indeed a feature request to support session stitching in a SPA without cookies (I avoid cookies because I don't want to put a cookie banner).

This is technically doable because in a SPA, a page view doesn't reload the whole app including clarity script. It only update the DOM and URL, which mean the tracking script could detect a new page view in the current session.

[temuycro]

Hello! @ClaritySupport.

I'm having a couple of issues recording my SPA, and have some questions:

Issues:

• SPA's URL doesn't change whenever a user advances in the process, so I'm using a custom tag fired via GTM to get the "funnel step"
• CSS, images and heatmaps are looking pretty weird. Is this a common thing to happen within a Clarity's recording session on SPA?

Questions:

• Is there any official documentation on how to record a SPA properly?
• How can I focus recordings on specific stages of websites? i.e.: "I want to view the recordings of /step-1/ only"
• Should I make the URL to change whenever a user changes the page?

This is how my SPA's recordings and heatmaps look like. They're kind of misleading. Its mixing up the next step, and the previous, also, styles are kind of dead too:

This is how i get to the recording of specific steps:

Can you help me with this?

[ClaritySupport]

@temuycro , Could you please your Clarity project id to check further.

There shouldn’t be anything necessary for the customer to do for SPA. Clarity.microsoft.com is a SPA and we run Clarity there without any extra wireup.

We find it most helpful to change the url within SPA when you are changing routes. You don’t need to reload the page, Clarity can pick up the URL change and trigger page views for the separate routes.

[mquandalle]

For me the issue described in the original message (a Clarity session reset when the URL change on a SPA) is still present if and only if cookies are disabled in Clarity.

[temuycro]

@temuycro , Could you please your Clarity project id to check further.

There shouldn’t be anything necessary for the customer to do for SPA. Clarity.microsoft.com is a SPA and we run Clarity there without any extra wireup.

We find it most helpful to change the url within SPA when you are changing routes. You don’t need to reload the page, Clarity can pick up the URL change and trigger page views for the separate routes.

Sure, Clarity project ID is g5y79g80by @ClaritySupport

[LanderBeeuwsaert]

Yes @ClaritySupport , we have this issue as well. We update the URL in our angular SPA a lot with queryParams and every time clarity is understanding this as a reload it seems. The project id: ldo3wie5r7