Heatmap support

[marandaneto]

Description

https://posthog.com/docs/toolbar/heatmaps

We'd need to create a Widget wrapper that tracks and captures every interaction such as clicks, etc.

You can manually do this though, by capturing events manually.

[th8m0z]

I love Posthog and this feature would be such a gamechanger. Can you share more details on your ideas for the implementation? I'd love to contribute.

[marandaneto]

To capture events manually, you have to capture an event called $autocapture with the following properties:

                      ElevatedButton(
                        onPressed: () {
                          Posthog()
                              .capture(eventName: '\$autocapture', properties: {
                            '\$event_type': 'touch',
                            '\$touch_x': 100, // read the position 
                            '\$touch_y': 100, // read the position 
                          });
                        },
                        child: const Text("Capture touch event"),
                      ),

The goal would be to do that automatically instead of calling capture manually in every single widget.

The problem is that heatmaps is only available via the toolbar (Web only), so you'd not be able to see the heatmaps for Mobile yet anyway, this would be a feature request, Heatmaps for Mobile in general.

The suggested approach would be useful anyway since more events would be captured automatically instead of manually.

We can achieve that by doing something similar to https://github.com/ueman/sentry-dart-tools/blob/main/sentry_flutter_plus/lib/src/widgets/click_tracker.dart which is a widget wrapper that then can "intercept" every click.