Show conversion rate in the top stats when filtered for goal

This commit is contained in:
Uku Taht 2019-11-25 17:17:18 +08:00
parent 3b533fae21
commit 5ee2d908f2
5 changed files with 103 additions and 74 deletions

View File

@ -238,9 +238,9 @@ class LineGraph extends React.Component {
} else if (query.period === '30d') {
return 'last month'
} else if (query.period === '3mo') {
return 'previous 3 months'
return 'prev 3 months'
} else if (query.period === '6mo') {
return 'previous 6 months'
return 'prev 6 months'
}
}
@ -256,41 +256,30 @@ class LineGraph extends React.Component {
}
}
renderConversionRate() {
if (typeof(this.props.graphData.conversion_rate) === "number") {
renderTopStats() {
const {graphData} = this.props
return this.props.graphData.top_stats.map((stat, index) => {
const border = index > 0 ? 'border-l border-grey-light' : ''
return (
<div className="border-l border-grey-light pl-8 w-60">
<div className="text-grey-dark text-xs font-bold tracking-wide uppercase">CONVERSION RATE</div>
<div className={`pl-8 w-52 ${border}`} key={stat.name}>
<div className="text-grey-dark text-xs font-bold tracking-wide uppercase">{stat.name}</div>
<div className="my-1 flex items-end justify-between">
<b className="text-2xl">{this.props.graphData.conversion_rate}%</b>
<b className="text-2xl">{ typeof(stat.count) == 'number' ? numberFormatter(stat.count) : stat.percentage + '%' }</b>
</div>
{this.renderComparison(stat.change)}
</div>
)
}
})
}
render() {
const {graphData} = this.props
const extraClass = graphData.interval === 'hour' ? '' : 'cursor-pointer'
const extraClass = this.props.graphData.interval === 'hour' ? '' : 'cursor-pointer'
return (
<React.Fragment>
<div className="border-b border-grey-light flex p-4">
<div className="pl-2 w-52">
<div className="text-grey-dark text-xs font-bold tracking-wide">UNIQUE VISITORS</div>
<div className="my-1 flex items-end justify-between">
<b className="text-2xl" title={graphData.unique_visitors.toLocaleString()}>{numberFormatter(graphData.unique_visitors)}</b>
</div>
{this.renderComparison(graphData.change_visitors)}
</div>
<div className="border-l border-grey-light pl-8 w-60">
<div className="text-grey-dark text-xs font-bold tracking-wide uppercase">TOTAL {eventName(this.props.query)}</div>
<div className="my-1 flex items-end justify-between">
<b className="text-2xl" title={graphData.pageviews.toLocaleString()}>{numberFormatter(graphData.pageviews)}</b>
</div>
{this.renderComparison(graphData.change_pageviews)}
</div>
{ this.renderConversionRate() }
{ this.renderTopStats() }
</div>
<div className="p-4">
<canvas id="main-graph-canvas" className={'mt-4 ' + extraClass} width="1054" height="342"></canvas>

View File

@ -117,6 +117,13 @@ defmodule Plausible.Stats do
))
end
def unique_visitors(site, query) do
Repo.one(from(
e in base_query(site, query),
select: count(e.user_id, :distinct)
))
end
def conversion_rate(site, query) do
{_, total_visitors} = pageviews_and_visitors(site, %{ query | filters: %{} })
{_, converted_visitors} = pageviews_and_visitors(site, query)

View File

@ -2,6 +2,7 @@ defmodule PlausibleWeb.Api.StatsController do
use PlausibleWeb, :controller
use Plausible.Repo
alias Plausible.Stats
alias Plausible.Stats.Query
plug :authorize
def main_graph(conn, params) do
@ -9,9 +10,7 @@ defmodule PlausibleWeb.Api.StatsController do
query = Stats.Query.from(site.timezone, params)
plot_task = Task.async(fn -> Stats.calculate_plot(site, query) end)
{pageviews, visitors} = Stats.pageviews_and_visitors(site, query)
{change_pageviews, change_visitors} = Stats.compare_pageviews_and_visitors(site, query, {pageviews, visitors})
conversion_rate = if query.filters["goal"], do: Stats.conversion_rate(site, query)
top_stats = fetch_top_stats(site, query)
{plot, compare_plot, labels, present_index} = Task.await(plot_task)
json(conn, %{
@ -19,15 +18,48 @@ defmodule PlausibleWeb.Api.StatsController do
compare_plot: compare_plot,
labels: labels,
present_index: present_index,
pageviews: pageviews,
unique_visitors: visitors,
change_pageviews: change_pageviews,
change_visitors: change_visitors,
conversion_rate: conversion_rate,
top_stats: top_stats,
interval: query.step_type,
})
end
defp fetch_top_stats(site, %Query{filters: %{"goal" => goal}} = query) when is_binary(goal) do
prev_query = Query.shift_back(query)
total_visitors = Stats.unique_visitors(site, %{query | filters: %{}})
prev_total_visitors = Stats.unique_visitors(site, %{prev_query | filters: %{}})
converted_visitors = Stats.unique_visitors(site, query)
prev_converted_visitors = Stats.unique_visitors(site, prev_query)
conversion_rate = if total_visitors > 0, do: Float.round(converted_visitors / total_visitors * 100, 1), else: 0.0
prev_conversion_rate = if prev_total_visitors > 0, do: Float.round(prev_converted_visitors / prev_total_visitors * 100, 1), else: 0.0
[
%{name: "Total visitors", count: total_visitors, change: percent_change(prev_total_visitors, total_visitors)},
%{name: "Converted visitors", count: converted_visitors, change: percent_change(prev_converted_visitors, converted_visitors)},
%{name: "Conversion rate", percentage: conversion_rate, change: percent_change(prev_conversion_rate, conversion_rate)},
]
end
defp fetch_top_stats(site, query) do
{pageviews, visitors} = Stats.pageviews_and_visitors(site, query)
{prev_pageviews, prev_visitors} = Stats.pageviews_and_visitors(site, Query.shift_back(query))
[
%{name: "Unique visitors", count: visitors, change: percent_change(prev_visitors, visitors)},
%{name: "Total pageviews", count: pageviews, change: percent_change(prev_pageviews, pageviews)},
]
end
defp percent_change(old_count, new_count) do
cond do
old_count == 0 and new_count > 0 ->
100
old_count == 0 and new_count == 0 ->
0
true ->
round((new_count - old_count) / old_count * 100)
end
end
def referrers(conn, params) do
site = conn.assigns[:site]
query = Stats.Query.from(site.timezone, params)

View File

@ -23,7 +23,7 @@ defmodule PlausibleWeb.Api.StatsController.AuthorizationTest do
site = insert(:site, public: true)
conn = get(conn, "/api/stats/#{site.domain}/main-graph")
assert %{"unique_visitors" => _any} = json_response(conn, 200)
assert %{"plot" => _any} = json_response(conn, 200)
end
end
@ -48,14 +48,14 @@ defmodule PlausibleWeb.Api.StatsController.AuthorizationTest do
site = insert(:site, public: true)
conn = get(conn, "/api/stats/#{site.domain}/main-graph")
assert %{"unique_visitors" => _any} = json_response(conn, 200)
assert %{"plot" => _any} = json_response(conn, 200)
end
test "returns stats for a private site that the user owns", %{conn: conn, user: user} do
site = insert(:site, public: false, members: [user])
conn = get(conn, "/api/stats/#{site.domain}/main-graph")
assert %{"unique_visitors" => _any} = json_response(conn, 200)
assert %{"plot" => _any} = json_response(conn, 200)
end
end
end

View File

@ -84,7 +84,7 @@ defmodule PlausibleWeb.Api.StatsController.MainGraphTest do
end
end
describe "GET /api/stats/main-graph - unique visitors" do
describe "GET /api/stats/main-graph - top stats" do
setup [:create_user, :log_in, :create_site]
test "counts distinct user ids", %{conn: conn, site: site} do
@ -93,21 +93,19 @@ defmodule PlausibleWeb.Api.StatsController.MainGraphTest do
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01")
assert %{"unique_visitors" => 1} = json_response(conn, 200)
res = json_response(conn, 200)
assert %{"name" => "Unique visitors", "count" => 1, "change" => 100} in res["top_stats"]
end
test "does not count custom events", %{conn: conn, site: site} do
test "does not count custom events in custom user ids", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-01 00:00:00])
insert(:event, name: "Custom", hostname: site.domain, timestamp: ~N[2019-01-01 00:00:00])
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01")
assert %{"unique_visitors" => 1} = json_response(conn, 200)
res = json_response(conn, 200)
assert %{"name" => "Unique visitors", "count" => 1, "change" => 100} in res["top_stats"]
end
end
describe "GET /api/stats/main-graph - pageviews" do
setup [:create_user, :log_in, :create_site]
test "counts total pageviews even from same user ids", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 00:00:00])
@ -115,32 +113,8 @@ defmodule PlausibleWeb.Api.StatsController.MainGraphTest do
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01")
assert %{"pageviews" => 2} = json_response(conn, 200)
end
test "does not count custom events", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-01 00:00:00])
insert(:event, name: "Custom", hostname: site.domain, timestamp: ~N[2019-01-01 00:00:00])
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01")
assert %{"unique_visitors" => 1} = json_response(conn, 200)
end
end
describe "GET /api/stats/main-graph - comparisons" do
setup [:create_user, :log_in, :create_site]
test "compares unique users with previous time period", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 01:00:00])
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 02:00:00])
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-02 01:00:00])
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-02 02:00:00])
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-02")
assert %{"change_visitors" => 100} = json_response(conn, 200)
res = json_response(conn, 200)
assert %{"name" => "Total pageviews", "count" => 2, "change" => 100} in res["top_stats"]
end
test "compares pageviews with previous time period", %{conn: conn, site: site} do
@ -151,14 +125,16 @@ defmodule PlausibleWeb.Api.StatsController.MainGraphTest do
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-02")
assert %{"change_pageviews" => -50} = json_response(conn, 200)
res = json_response(conn, 200)
assert %{"name" => "Total pageviews", "count" => 1, "change" => -50} in res["top_stats"]
end
end
describe "GET /api/stats/main-graph - conversion rate" do
describe "GET /api/stats/main-graph - filtered for goal" do
setup [:create_user, :log_in, :create_site]
test "returns conversion rate when filtering for a goal", %{conn: conn, site: site} do
test "returns total unique visitors", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-01 02:00:00])
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 01:00:00])
insert(:event, name: "Signup", hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 02:00:00])
@ -166,7 +142,32 @@ defmodule PlausibleWeb.Api.StatsController.MainGraphTest do
filters = Jason.encode!(%{goal: "Signup"})
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01&filters=#{filters}")
assert %{"conversion_rate" => 50} = json_response(conn, 200)
res = json_response(conn, 200)
assert %{"name" => "Total visitors", "count" => 2, "change" => 100} in res["top_stats"]
end
test "returns converted visitors", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-01 02:00:00])
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 01:00:00])
insert(:event, name: "Signup", hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 02:00:00])
filters = Jason.encode!(%{goal: "Signup"})
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01&filters=#{filters}")
res = json_response(conn, 200)
assert %{"name" => "Converted visitors", "count" => 1, "change" => 100} in res["top_stats"]
end
test "returns conversion rate", %{conn: conn, site: site} do
insert(:pageview, hostname: site.domain, timestamp: ~N[2019-01-01 02:00:00])
insert(:pageview, hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 01:00:00])
insert(:event, name: "Signup", hostname: site.domain, user_id: @user_id, timestamp: ~N[2019-01-01 02:00:00])
filters = Jason.encode!(%{goal: "Signup"})
conn = get(conn, "/api/stats/#{site.domain}/main-graph?period=day&date=2019-01-01&filters=#{filters}")
res = json_response(conn, 200)
assert %{"name" => "Conversion rate", "percentage" => 50.0, "change" => 100} in res["top_stats"]
end
end