Skip to content

Support PostHog Session Replay 🔁  #7

Description

@mountainash

👍🏼 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requesthelp wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions