求助：Shopify应用中Microsoft Clarity页面切换会话断裂问题

问题背景 #

基于Remix模板开发Shopify应用时，使用Microsoft Clarity做用户行为录制，遇到跨页面导航时录制内容断裂——Clarity将同一用户识别为新用户。核心原因是Shopify限制Cookie使用，手动传入user_id、session_id、page_id参数仍无法关联用户会话。

解决方案 #

1. 用LocalStorage持久化用户标识 #

Shopify允许使用LocalStorage存储非敏感数据，我们可以用它来保存唯一用户ID，替代Cookie实现用户标识的持久化：

// 在Remix的root.tsx全局脚本中初始化Clarity
import { useEffect } from 'react';

export function Root() {
  useEffect(() => {
    // 生成或读取本地存储的用户ID
    let userId = localStorage.getItem('clarity_user_id');
    if (!userId) {
      userId = crypto.randomUUID();
      localStorage.setItem('clarity_user_id', userId);
    }

    // 初始化Clarity并传入自定义user_id
    window.clarity('init', '你的Clarity项目ID', {
      userId: userId,
      // 可选：持久化会话ID，避免页面刷新重置会话
      sessionId: localStorage.getItem('clarity_session_id') || crypto.randomUUID()
    });

    // 保存会话ID到LocalStorage
    if (!localStorage.getItem('clarity_session_id')) {
      localStorage.setItem('clarity_session_id', window.clarity('get', 'sessionId'));
    }
  }, []);

  // ... 其他组件代码
}

2. 路由切换时同步Clarity标识 #

在Remix路由切换完成后，手动更新Clarity的用户和页面信息，确保会话关联：

// 在root.tsx中添加路由监听
useEffect(() => {
  const handleRouteChange = () => {
    const userId = localStorage.getItem('clarity_user_id');
    const pageId = window.location.pathname;

    // 更新Clarity的用户和页面标识
    window.clarity('set', { userId, pageId });
    // 手动触发页面视图跟踪
    window.clarity('track', 'pageview');
  };

  window.addEventListener('remix:routeChangeComplete', handleRouteChange);
  return () => window.removeEventListener('remix:routeChangeComplete', handleRouteChange);
}, []);

3. 适配Shopify环境限制 #

• 如果应用嵌入在Shopify Admin的iframe中，若LocalStorage被限制，可改用sessionStorage（注意：sessionStorage在标签页关闭后会失效，仅能维持当前会话的用户关联）
• 确保存储的标识无敏感数据，符合Shopify应用安全规范

4. 验证效果 #

登录Microsoft Clarity后台，查看用户会话记录，确认同一用户的跨页面操作已被合并到同一会话中，录制内容不再断裂。

内容的提问来源于stack exchange，提问作者Alwin Antony