mountainash / posthog-managed-component

A Managed Component for sending events to PostHog
Other
9 stars 2 forks source link

Support PostHog Session Replay πŸ” #7

Open mountainash opened 2 months ago

mountainash commented 2 months ago

πŸ‘πŸΌ this issue if you want Zaraz/Managed component support for PostHog Session replay


MC allows for mouse capture using events like (from the Demo MC), so it should be possible to capture and pass this to PostHog:

  manager.createEventListener('mousemove', async event => {
    const { payload } = event
    console.info('🐁 πŸͺ€ Mousemove:', JSON.stringify(payload, null, 2))
  })

  manager.createEventListener('mousedown', async event => {
    // Save mouse coordinates as a cookie
    const { client, payload } = event
    console.info('🐁 ⬇️ Mousedown payload:', payload)
    const [firstClick] = payload.mousedown
    client.set('lastClickX', firstClick.clientX)
    client.set('lastClickY', firstClick.clientY)
  })

  manager.createEventListener('scroll', async event => {
    console.info(
      'πŸ›žπŸ›žπŸ›ž They see me scrollin...they hatin...',
      JSON.stringify(event.payload, null, 2)
    )
  })

  manager.createEventListener('resize', async event => {
    console.info('πŸͺŸ New window size!', JSON.stringify(event.payload, null, 2))
  })
``

Which can give responses like:

```json
🐁 πŸͺ€ Mousemove: {
  "event": "mousemove",
  "mousemove": [
    {
      "target": "html",
      "relativeX": 1.9908,
      "relativeY": 33.5901,
      "timestamp": 1712358765951,
      "altKey": false,
      "clientX": 61,
      "clientY": 233,
      "pageX": 61,
      "pageY": 233,
      "button": 0
    }
  ]
}

🐁 ⬇️ Mousedown payload: {
  event: 'mousedown',
  mousedown: [
    {
      relativeX: 15.2415,
      relativeY: 61.2695,
      target: 'html',
      timestamp: 1712358772696,
      altKey: false,
      clientX: 467,
      clientY: 425,
      pageX: 467,
      pageY: 425,
      button: 0
    }
  ]
}

Will probably have to reverse engineer this (or include it somehow???) https://github.com/PostHog/posthog-js/blob/main/src/extensions/replay/sessionrecording.ts

agcty commented 1 month ago

Ideal i think would be to include it but how is the question indeed, maybe @bjesus has some insights on this.

bjesus commented 1 month ago

happy to help but not sure what the question is exactly