We’re using PostHog for analytics in our Shopify app, but we’ve noticed that session recordings do not capture anything happening inside Shopify App Bridge modals (including user actions such as button clicks).
We even tried wrapping the modal component with posthogInitWrapper, but that didn’t help.
- Has anyone else run into this issue where App Bridge modals are invisible to PostHog session recordings?
- Is there a workaround or recommended approach to track user actions inside these modals?
- Do we need to use a different strategy (like custom event tracking) instead of relying on session recordings?
Any insights or examples would be really helpful!
this is the function we are using:
function PostHogInitWrapper({ children }) {
const [userEmail, setUserEmail] = useState(null);
useEffect(() => {
api.shopifyShop
.findFirst()
.then((shop) => {
setUserEmail(shop.email || "");
})
.catch(() => {
setUserEmail("");
});
}, []);
if (userEmail === null) {
return null;
}
const disableRecording = noSessionEmails.includes(userEmail);
return (
<PostHogProvider
apiKey={process.env.GADGET_PUBLIC_REACT_APP_PUBLIC_POSTHOG_KEY}
options={{
api_host: process.env.GADGET_PUBLIC_REACT_APP_PUBLIC_POSTHOG_HOST,
session_recording: {
blockClass: "ph-no-capture",
maskAllText: false,
},
capture_pageview: false,
enable_recording: true,
disable_session_recording: disableRecording,
}}
>
{children}
</PostHogProvider>
);
}