2bd2e613c7
All checks were successful
deploy / deploy (push) Successful in 3m20s
Three-layer pipeline: Plug for all HTTP requests (no JS needed), LiveView hook for SPA navigations, JS hook for screen width. ETS-backed buffer batches writes to SQLite every 10s. Daily-rotating salt for visitor hashing. Includes admin dashboard with date ranges, visitor trends, top pages, sources, devices, and e-commerce conversion funnel. Oban cron for 12-month data retention. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
460 lines
14 KiB
Elixir
460 lines
14 KiB
Elixir
defmodule BerrypodWeb.Admin.Analytics do
|
|
use BerrypodWeb, :live_view
|
|
|
|
alias Berrypod.Analytics
|
|
alias Berrypod.Cart
|
|
|
|
@periods %{
|
|
"today" => 0,
|
|
"7d" => 6,
|
|
"30d" => 29,
|
|
"12m" => 364
|
|
}
|
|
|
|
@impl true
|
|
def mount(_params, _session, socket) do
|
|
{:ok,
|
|
socket
|
|
|> assign(:page_title, "Analytics")
|
|
|> assign(:period, "30d")
|
|
|> assign(:tab, "pages")
|
|
|> load_analytics("30d")}
|
|
end
|
|
|
|
@impl true
|
|
def handle_event("change_period", %{"period" => period}, socket)
|
|
when is_map_key(@periods, period) do
|
|
{:noreply,
|
|
socket
|
|
|> assign(:period, period)
|
|
|> load_analytics(period)}
|
|
end
|
|
|
|
def handle_event("change_tab", %{"tab" => tab}, socket)
|
|
when tab in ["pages", "sources", "countries", "devices", "funnel"] do
|
|
{:noreply, assign(socket, :tab, tab)}
|
|
end
|
|
|
|
# ── Data loading ──
|
|
|
|
defp load_analytics(socket, period) do
|
|
range = date_range(period)
|
|
|
|
socket
|
|
|> assign(:visitors, Analytics.count_visitors(range))
|
|
|> assign(:pageviews, Analytics.count_pageviews(range))
|
|
|> assign(:bounce_rate, Analytics.bounce_rate(range))
|
|
|> assign(:avg_duration, Analytics.avg_duration(range))
|
|
|> assign(:visitors_by_date, Analytics.visitors_by_date(range))
|
|
|> assign(:top_pages, Analytics.top_pages(range))
|
|
|> assign(:top_sources, Analytics.top_sources(range))
|
|
|> assign(:top_referrers, Analytics.top_referrers(range))
|
|
|> assign(:top_countries, Analytics.top_countries(range))
|
|
|> assign(:browsers, Analytics.device_breakdown(range, :browser))
|
|
|> assign(:oses, Analytics.device_breakdown(range, :os))
|
|
|> assign(:screen_sizes, Analytics.device_breakdown(range, :screen_size))
|
|
|> assign(:funnel, Analytics.funnel(range))
|
|
|> assign(:revenue, Analytics.total_revenue(range))
|
|
end
|
|
|
|
defp date_range(period) do
|
|
days = Map.fetch!(@periods, period)
|
|
today = Date.utc_today()
|
|
start_date = Date.add(today, -days)
|
|
end_date = Date.add(today, 1)
|
|
|
|
{DateTime.new!(start_date, ~T[00:00:00], "Etc/UTC"),
|
|
DateTime.new!(end_date, ~T[00:00:00], "Etc/UTC")}
|
|
end
|
|
|
|
# ── Render ──
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<.header>Analytics</.header>
|
|
|
|
<%!-- Period selector --%>
|
|
<div class="analytics-periods" style="display: flex; gap: 0.25rem; margin-top: 1rem;">
|
|
<button
|
|
:for={period <- ["today", "7d", "30d", "12m"]}
|
|
phx-click="change_period"
|
|
phx-value-period={period}
|
|
class={["admin-btn admin-btn-sm", @period == period && "admin-btn-primary"]}
|
|
>
|
|
{period_label(period)}
|
|
</button>
|
|
</div>
|
|
|
|
<%!-- Stat cards --%>
|
|
<div class="admin-stats-grid" style="margin-top: 1.5rem;">
|
|
<.stat_card label="Unique visitors" value={format_number(@visitors)} icon="hero-users" />
|
|
<.stat_card label="Total pageviews" value={format_number(@pageviews)} icon="hero-eye" />
|
|
<.stat_card label="Bounce rate" value={"#{@bounce_rate}%"} icon="hero-arrow-uturn-left" />
|
|
<.stat_card label="Visit duration" value={format_duration(@avg_duration)} icon="hero-clock" />
|
|
</div>
|
|
|
|
<%!-- Visitor trend chart --%>
|
|
<div class="admin-card" style="margin-top: 1.5rem; padding: 1rem;">
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">
|
|
Visitors over time
|
|
</h3>
|
|
<.bar_chart data={@visitors_by_date} />
|
|
</div>
|
|
|
|
<%!-- Detail tabs --%>
|
|
<div style="display: flex; gap: 0.25rem; margin-top: 1.5rem; flex-wrap: wrap;">
|
|
<button
|
|
:for={
|
|
tab <- [
|
|
{"pages", "Pages"},
|
|
{"sources", "Sources"},
|
|
{"countries", "Countries"},
|
|
{"devices", "Devices"},
|
|
{"funnel", "Funnel"}
|
|
]
|
|
}
|
|
phx-click="change_tab"
|
|
phx-value-tab={elem(tab, 0)}
|
|
class={["admin-btn admin-btn-sm", @tab == elem(tab, 0) && "admin-btn-primary"]}
|
|
>
|
|
{elem(tab, 1)}
|
|
</button>
|
|
</div>
|
|
|
|
<%!-- Tab content --%>
|
|
<div class="admin-card" style="margin-top: 0.75rem; padding: 1rem;">
|
|
<.tab_content tab={@tab} {assigns} />
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
# ── Stat card component ──
|
|
|
|
attr :label, :string, required: true
|
|
attr :value, :any, required: true
|
|
attr :icon, :string, required: true
|
|
|
|
defp stat_card(assigns) do
|
|
~H"""
|
|
<div class="admin-card">
|
|
<div style="display: flex; align-items: center; gap: 0.75rem; padding: 1rem;">
|
|
<div style="background: var(--color-base-200, #e5e5e5); border-radius: 0.5rem; padding: 0.5rem;">
|
|
<.icon name={@icon} class="size-5" />
|
|
</div>
|
|
<div>
|
|
<p style="font-size: 1.5rem; font-weight: 700;">{@value}</p>
|
|
<p style="font-size: 0.875rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);">
|
|
{@label}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
# ── Bar chart (server-rendered SVG) ──
|
|
|
|
attr :data, :list, required: true
|
|
|
|
defp bar_chart(assigns) do
|
|
data = assigns.data
|
|
max_val = data |> Enum.map(& &1.visitors) |> Enum.max(fn -> 1 end)
|
|
chart_height = 120
|
|
bar_count = max(length(data), 1)
|
|
|
|
bars =
|
|
data
|
|
|> Enum.with_index()
|
|
|> Enum.map(fn {%{date: date, visitors: visitors}, i} ->
|
|
bar_height = if max_val > 0, do: visitors / max_val * chart_height, else: 0
|
|
bar_width = max(800 / bar_count - 2, 1)
|
|
x = i * (800 / bar_count) + 1
|
|
|
|
%{
|
|
x: x,
|
|
y: chart_height - bar_height,
|
|
width: bar_width,
|
|
height: max(bar_height, 1),
|
|
date: date,
|
|
visitors: visitors
|
|
}
|
|
end)
|
|
|
|
assigns = assign(assigns, bars: bars, chart_height: chart_height)
|
|
|
|
~H"""
|
|
<div
|
|
:if={@data == []}
|
|
style="text-align: center; padding: 2rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
|
|
>
|
|
No data for this period
|
|
</div>
|
|
<svg
|
|
:if={@data != []}
|
|
viewBox={"0 0 800 #{@chart_height}"}
|
|
style="width: 100%; height: auto; max-height: 160px;"
|
|
aria-label="Visitor trend chart"
|
|
>
|
|
<rect
|
|
:for={bar <- @bars}
|
|
x={bar.x}
|
|
y={bar.y}
|
|
width={bar.width}
|
|
height={bar.height}
|
|
rx="2"
|
|
fill="var(--color-primary, #4f46e5)"
|
|
opacity="0.8"
|
|
>
|
|
<title>{bar.date}: {bar.visitors} visitors</title>
|
|
</rect>
|
|
</svg>
|
|
"""
|
|
end
|
|
|
|
# ── Tab content ──
|
|
|
|
defp tab_content(%{tab: "pages"} = assigns) do
|
|
~H"""
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Top pages</h3>
|
|
<.detail_table
|
|
rows={@top_pages}
|
|
empty_message="No page data yet"
|
|
columns={[
|
|
%{label: "Page", key: :pathname},
|
|
%{label: "Visitors", key: :visitors, align: :right},
|
|
%{label: "Pageviews", key: :pageviews, align: :right}
|
|
]}
|
|
/>
|
|
"""
|
|
end
|
|
|
|
defp tab_content(%{tab: "sources"} = assigns) do
|
|
~H"""
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Top sources</h3>
|
|
<.detail_table
|
|
rows={@top_sources}
|
|
empty_message="No referrer data yet"
|
|
columns={[
|
|
%{label: "Source", key: :source},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">Top referrers</h3>
|
|
<.detail_table
|
|
rows={@top_referrers}
|
|
empty_message="No referrer data yet"
|
|
columns={[
|
|
%{label: "Referrer", key: :referrer},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
"""
|
|
end
|
|
|
|
defp tab_content(%{tab: "countries"} = assigns) do
|
|
~H"""
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Countries</h3>
|
|
<.detail_table
|
|
rows={Enum.map(@top_countries, fn c -> %{c | country_code: country_name(c.country_code)} end)}
|
|
empty_message="No country data yet"
|
|
columns={[
|
|
%{label: "Country", key: :country_code},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
"""
|
|
end
|
|
|
|
defp tab_content(%{tab: "devices"} = assigns) do
|
|
~H"""
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Browsers</h3>
|
|
<.detail_table
|
|
rows={@browsers}
|
|
empty_message="No browser data yet"
|
|
columns={[
|
|
%{label: "Browser", key: :name},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">
|
|
Operating systems
|
|
</h3>
|
|
<.detail_table
|
|
rows={@oses}
|
|
empty_message="No OS data yet"
|
|
columns={[
|
|
%{label: "OS", key: :name},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin: 1.5rem 0 0.75rem;">Screen sizes</h3>
|
|
<.detail_table
|
|
rows={@screen_sizes}
|
|
empty_message="No screen data yet"
|
|
columns={[
|
|
%{label: "Size", key: :name},
|
|
%{label: "Visitors", key: :visitors, align: :right}
|
|
]}
|
|
/>
|
|
"""
|
|
end
|
|
|
|
defp tab_content(%{tab: "funnel"} = assigns) do
|
|
~H"""
|
|
<h3 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">
|
|
Conversion funnel
|
|
</h3>
|
|
<.funnel_chart funnel={@funnel} revenue={@revenue} />
|
|
"""
|
|
end
|
|
|
|
# ── Detail table ──
|
|
|
|
attr :rows, :list, required: true
|
|
attr :columns, :list, required: true
|
|
attr :empty_message, :string, default: "No data"
|
|
|
|
defp detail_table(assigns) do
|
|
~H"""
|
|
<div
|
|
:if={@rows == []}
|
|
style="text-align: center; padding: 1.5rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
|
|
>
|
|
{@empty_message}
|
|
</div>
|
|
<table :if={@rows != []} class="admin-table" style="width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
:for={col <- @columns}
|
|
style={col[:align] == :right && "text-align: right;"}
|
|
>
|
|
{col.label}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr :for={row <- @rows}>
|
|
<td
|
|
:for={col <- @columns}
|
|
style={col[:align] == :right && "text-align: right; font-variant-numeric: tabular-nums;"}
|
|
>
|
|
{Map.get(row, col.key)}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
"""
|
|
end
|
|
|
|
# ── Funnel chart ──
|
|
|
|
attr :funnel, :map, required: true
|
|
attr :revenue, :integer, required: true
|
|
|
|
defp funnel_chart(assigns) do
|
|
steps = [
|
|
{"Product views", assigns.funnel.product_views},
|
|
{"Add to cart", assigns.funnel.add_to_carts},
|
|
{"Checkout", assigns.funnel.checkouts},
|
|
{"Purchase", assigns.funnel.purchases}
|
|
]
|
|
|
|
max_val = steps |> Enum.map(&elem(&1, 1)) |> Enum.max(fn -> 1 end)
|
|
|
|
steps_with_rates =
|
|
steps
|
|
|> Enum.with_index()
|
|
|> Enum.map(fn {{label, count}, i} ->
|
|
prev_count = if i > 0, do: elem(Enum.at(steps, i - 1), 1), else: count
|
|
rate = if prev_count > 0, do: round(count / prev_count * 100), else: 0
|
|
width_pct = if max_val > 0, do: max(count / max_val * 100, 5), else: 5
|
|
|
|
%{label: label, count: count, rate: rate, width_pct: width_pct, index: i}
|
|
end)
|
|
|
|
assigns = assign(assigns, steps: steps_with_rates)
|
|
|
|
~H"""
|
|
<div
|
|
:if={@funnel.product_views == 0}
|
|
style="text-align: center; padding: 1.5rem; color: color-mix(in oklch, var(--color-base-content) 40%, transparent);"
|
|
>
|
|
No funnel data yet
|
|
</div>
|
|
<div :if={@funnel.product_views > 0} style="display: flex; flex-direction: column; gap: 0.5rem;">
|
|
<div :for={step <- @steps} style="display: flex; align-items: center; gap: 0.75rem;">
|
|
<div style="width: 7rem; font-size: 0.8125rem; text-align: right; flex-shrink: 0;">
|
|
{step.label}
|
|
</div>
|
|
<div style={"flex: 0 0 #{step.width_pct}%; height: 2rem; background: var(--color-primary, #4f46e5); border-radius: 0.25rem; opacity: #{1 - step.index * 0.15}; display: flex; align-items: center; padding-left: 0.5rem;"}>
|
|
<span style="font-size: 0.75rem; font-weight: 600; color: white;">
|
|
{step.count}
|
|
</span>
|
|
</div>
|
|
<span
|
|
:if={step.index > 0}
|
|
style="font-size: 0.75rem; color: color-mix(in oklch, var(--color-base-content) 60%, transparent);"
|
|
>
|
|
{step.rate}%
|
|
</span>
|
|
</div>
|
|
<div :if={@revenue > 0} style="margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600;">
|
|
Revenue: {Cart.format_price(@revenue)}
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
# ── Helpers ──
|
|
|
|
defp period_label("today"), do: "Today"
|
|
defp period_label("7d"), do: "7 days"
|
|
defp period_label("30d"), do: "30 days"
|
|
defp period_label("12m"), do: "12 months"
|
|
|
|
defp format_number(n) when n >= 1_000_000, do: "#{Float.round(n / 1_000_000, 1)}M"
|
|
defp format_number(n) when n >= 1_000, do: "#{Float.round(n / 1_000, 1)}k"
|
|
defp format_number(n), do: to_string(n)
|
|
|
|
defp format_duration(seconds) when seconds < 60, do: "#{seconds}s"
|
|
|
|
defp format_duration(seconds) do
|
|
mins = div(seconds, 60)
|
|
secs = rem(seconds, 60)
|
|
"#{mins}m #{secs}s"
|
|
end
|
|
|
|
@country_names %{
|
|
"GB" => "United Kingdom",
|
|
"US" => "United States",
|
|
"CA" => "Canada",
|
|
"AU" => "Australia",
|
|
"DE" => "Germany",
|
|
"FR" => "France",
|
|
"NL" => "Netherlands",
|
|
"IE" => "Ireland",
|
|
"AT" => "Austria",
|
|
"BE" => "Belgium",
|
|
"IT" => "Italy",
|
|
"ES" => "Spain",
|
|
"PT" => "Portugal",
|
|
"SE" => "Sweden",
|
|
"NO" => "Norway",
|
|
"DK" => "Denmark",
|
|
"FI" => "Finland",
|
|
"PL" => "Poland",
|
|
"CH" => "Switzerland",
|
|
"NZ" => "New Zealand",
|
|
"JP" => "Japan",
|
|
"IN" => "India",
|
|
"BR" => "Brazil",
|
|
"MX" => "Mexico"
|
|
}
|
|
|
|
defp country_name(code) do
|
|
Map.get(@country_names, code, code)
|
|
end
|
|
end
|