Microsoft Clarity creates new sessions on navigation in Shopify application

I’m working on a Shopify app and facing problems with Microsoft Clarity integration. Every time users move between pages, Clarity starts a fresh session instead of continuing the existing one. This breaks user recordings into separate fragments for each page visit.

The core problem seems to be Shopify’s cookie restrictions. I attempted to solve this by manually setting custom_user_id, tracking_session_id, and view_id parameters in the Clarity initialization, but none of these approaches helped Clarity maintain user continuity.

Our project uses the remix framework. Has anyone encountered this issue before and found a working solution? The session fragmentation makes it really hard to analyze user behavior properly.

make sure your remix routing is set up right. clarity can freak out with SPA nav and think each change is a new page. keep your clarity script mounted at all times, otherwise it resets and you’ll struggle with sessions.

Shopify’s app bridge and iframe restrictions break tracking no matter what you try. I’ve watched this destroy analytics for months.

Stop fighting Clarity’s session management. I built a data layer between Shopify and my analytics tools. It captures everything before Shopify’s security fragments it.

Latenode monitors page transitions and user events in real time. Grabs session data, interactions, and navigation patterns before hitting Shopify’s restrictions. Then reconstructs the complete user journey and feeds clean session data to Clarity.

The workflow handles session persistence automatically. No more custom user IDs or trying to outsmart Shopify’s cookie blocking. You get perfect recordings that flow across pages.

Works great with Remix - Latenode catches route changes and keeps sessions intact: https://latenode.com

Had this exact same issue last month on Shopify Plus with Remix. It’s not just initialization - Shopify’s app bridge messes with how Clarity tracks sessions. Here’s what fixed it for me: I built a custom session bridge using localStorage. First page load, I grab Clarity’s session ID and store it locally. Then I intercept Clarity’s init and force it to use that stored session ID on every navigation. You’ve got to hook into Remix’s route transitions and pass the session data before Clarity reinitializes. The trick is catching it before Shopify’s security wipes everything on navigation.

same headache here with Clarity on Shopify! I fixed it by moving the Clarity script to theme.liquid instead of putting it in app components. this keeps it running across page changes without reloading every time. also check if your app’s doing full page reloads instead of SPA navigation - that’ll mess it up too.

Yeah, this is a known issue with Shopify’s iframe setup messing with third-party tracking. The problem happens because Shopify apps run in isolated iframes that reset tracking context every time you navigate. I fixed it by setting up communication between the iframe and main window. Store your Clarity session state in the parent window’s sessionStorage, then grab it back when your Remix loader runs. You’ll need to update your root component to check for existing session data and call clarity(‘set’, ‘session_id’, existingId) before initializing normally. Just watch out for Shopify’s app bridge auth being async - it can delay when your tracking script actually loads. This method keeps sessions intact without cookies that Shopify blocks anyway.

Been there with tracking nightmares on Shopify apps. Cookie restrictions and session breaks kill analytics.

I ditched manual parameters completely. Built a workflow that grabs all user journey data before it reaches Clarity and stores it in proper session management.

I use Latenode for a tracking pipeline that pulls page visits, user actions, and session data from Shopify. It rebuilds the complete user journey and pushes consolidated session data to multiple analytics tools including Clarity. You get unbroken user recordings no matter how weird Shopify’s cookies get.

The automation handles session persistence, user ID, and data formatting. Way better than wrestling with Clarity’s initialization scripts every page change.

Quick setup and completely fixes fragmentation: https://latenode.com

I encountered a similar issue with Microsoft Clarity on a Shopify application that uses a single-page architecture. The segmentation of sessions stems from the reinitialization of Clarity’s tracking script with each route change. To resolve this, I recommended placing the Clarity initialization script in a higher-level component and ensuring it only executes once. Additionally, implementing a conditional check to see if Clarity is already initialized before reinvoking the setup can help prevent issues with session data being fragmented. Lastly, verify that your Content Security Policy settings on Shopify allow Clarity to function correctly and store session data without interruptions.