Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/capevace/pan-analytics-viewer
A tiny package to view your panphp/pan analytics right in the UI where they are triggered!
https://github.com/capevace/pan-analytics-viewer
analytics developer-tools laravel laravel-package panphp php user-interface
Last synced: 5 days ago
JSON representation
A tiny package to view your panphp/pan analytics right in the UI where they are triggered!
- Host: GitHub
- URL: https://github.com/capevace/pan-analytics-viewer
- Owner: Capevace
- License: mit
- Created: 2024-10-17T23:28:51.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2024-10-18T01:54:50.000Z (26 days ago)
- Last Synced: 2024-10-18T03:24:23.075Z (26 days ago)
- Topics: analytics, developer-tools, laravel, laravel-package, panphp, php, user-interface
- Language: Blade
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `mateffy/pan-analytics-viewer`
### A tiny Laravel package to view your [panphp/pan](https://github.com/panphp/pan) analytics directly in the UI where they are triggered!
Video Example
[Video Example](https://github.com/user-attachments/assets/69aeac75-91b7-4005-a5f1-5923f3018964)
## Installation
```bash
composer require mateffy/pan-analytics-viewer
```
## Usage
To add the popups to your app, all you have to do is include the `pan-analytics::viewer` component in your blade template:
```blade
{{-- Make sure to verify who has access!
Including this component will expose your analytics data! --}}
@if (auth()->user()?->email === '[email protected]')
@endif
```
The popups should now be appearing when hovering over elements that have a `[data-pan]` attribute.
### Options
You can pass options to the component to change the default behavior:
```blade
```
| Option | Description | Default |
|-------------|----------------------------------------------------------------------------------------------|---------|
| `toggle` | Whether to show a toggle button to show/hide the popups | `false` |
| `events` | Specify the events that should be fetched. | `null` |
| `force‑all` | Force all events to get fetched, may be required when dynamically creating tracked elements. | `false` |
### Events
The package will automatically detect what events are being tracked on the current page by querying for `data-pan` attributes. If you are dynamically creating tracked elements after initial render, these may be missed and no popup will be shown.
To fix this, you can either specify the specific `events` you want to show on the page or use the `force-all` option to disable filtering and fetch all events.
## Security
The package registers a route for the client to be able to access the data. This route required a valid URL signature to be able to access it, which the `pan-analytics::viewer` component will automatically generate (signed URLs are valid for 1h). **If you include this component on a page that is publicly accessible and don't check the user before including the component, anyone can access the analytics data!**
So, make sure to only render this component for users with the necessary permissions.
```blade
@if (auth()->user()?->email === '[email protected]')
@endif
{{-- or --}}
@if (auth()->user()?->can('view-analytics'))
@endif
```
### Tippy.js
This package uses [Tippy.js](https://github.com/atomiks/tippyjs) to create the popups. `tippy.js` is included via `unpkg.com` like this, but only when the component is rendered:
```html
```
## Configuration
You can publish the config file with:
```bash
php artisan vendor:publish --provider="Mateffy\PanAnalyticsViewer\PanAnalyticsViewerServiceProvider" --tag="config"
```
This is the default configuration:
```php
return [
'endpoint' => env('PAN_ANALYTICS_ENDPOINT', '/pan/viewer')
];
```
### Endpoint
You can change the URL that the analytics are being exposed on by changing the `PAN_ANALYTICS_ENDPOINT` environment variable or customizing the `endpoint` config key. The default URL is `example.com/pan/viewer`.
## Changelog
- 1.0.2
- Feature: added Livewire support, the `[data-pan]` search will now be re-run after Livewire `morph.updated` events are fired, to show the popups for newly created elements
- 1.0.1
- Fix: removed livewire specific script inclusion
- 1.0.0
- Initial release