Simple pageview analytics with Phoenix LiveView

Slides from a meetup talk in which I explained how I could leverage Phoenix LiveView's unique architecture to build a simple solution to track time spent by users visiting pages in the application.

Transcript

1. Elixir Milano Meetup • 23/01/2024 • @simonedavico SIMPLE PAGEVIEW ANALYTICS WITH PHOENIX LIVEVIEW 1
2. WHAT WE ARE BUILDING Business wants to understand better how customers use our platform and analyze their behaviour. As a LiveView evangelist, you told them we could do this natively and don't need any 3rd party services. 2
3. WHAT WE ARE BUILDING For every new visitor, you create a session and store page view details in the database. Track how many seconds the page content may be at least partially visible. This means that the page is in a foreground tab of a non-minimized window. 3
4. HOW IT’S DONE IN A CLASSIC WEBAPP 4
5. HOW IT’S DONE IN A CLASSIC WEBAPP 5
6. A LIVEVIEW IS A PROCESS A LiveView is a process that receives events, updates its state, and render updates to a page as diffs. 6 LiveView Process Client State (assigns) Events Diffs
7. A LIVEVIEW IS A PROCESS A LiveView is a process that receives events, updates its state, and render updates to a page as diffs. 7 initial assigns updated assigns send html/diff event updated assigns new url msg updated assigns mount handle_params render wait handle_event handle_info
8. A LIVEVIEW IS A PROCESS A LiveView is a process that receives events, updates its state, and render updates to a page as diffs. 8 initial assigns updated assigns send html/diff event updated assigns new url msg updated assigns mount handle_params render wait handle_event handle_info
9. A LIVEVIEW IS A PROCESS A LiveView is a process that receives events, updates its state, and render updates to a page as diffs. 9 initial assigns updated assigns send html/diff event updated assigns new url msg updated assigns mount handle_params render wait handle_event handle_info When do we stop?
10. 10 Tracking Client Pageview Tracker pageviews pageviews_web Pageview Session MonitorEntry LiveView Session plug start / pause / resume Process.monitor SOLUTION ARCHITECTURE DOWN LiveView PID MonitorEntry
11. REFERENCES • Source code: https://github.com/simonedavico/ pageviews_meetup • fl y.io “A LiveView is a Process”: https:// fl y.io/phoenix- fi les/a- liveview-is-a-process/ • Docs for live_session: https://hexdocs.pm/phoenix_live_view/ Phoenix.LiveView.Router.html#live_session/3 • Docs for attach_hook: https://hexdocs.pm/phoenix_live_view/ Phoenix.LiveView.Router.html#live_session/3 • autotrack: https://github.com/googleanalytics/autotrack 11