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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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