Skip to content

Show pages in page analytics #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thebuilder merged 2 commits into from
Aug 14, 2026
Merged

Show pages in page analytics #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7dbf3d4
Show pages in page analytics
thebuilder Aug 13, 2026
3263fcc
Remove obsolete document scope parameter
thebuilder Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions src/TheBuilder.WebAnalytics/Client/src/analytics/analytics-components.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ describe("analytics presentation components", () => {

it("keeps previous breakdown, event, and flag rows visible while filters refresh", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "Country");
element.cards = dashboardCards("unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "Country");
element.breakdowns = {
Country: loadingState(successState({ dimension: "Country", rows: [{ value: "DK", visitors: 12, pageViews: 18 }] })),
};
Expand Down Expand Up @@ -251,7 +251,7 @@ describe("analytics presentation components", () => {

it("emits audience changes from the breakdown tabs", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable").filter((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
element.cards = dashboardCards("unavailable").filter((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
element.audienceDimension = "DeviceType";
element.breakdowns = {
DeviceType: successState({ dimension: "DeviceType", rows: [] }),
Expand All @@ -276,7 +276,7 @@ describe("analytics presentation components", () => {

it("keeps audience cards as percentages of the selected metric", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable").filter((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
element.cards = dashboardCards("unavailable").filter((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
element.audienceDimension = "DeviceType";
element.metric = "visitors";
element.breakdowns = {
Expand Down Expand Up @@ -306,7 +306,7 @@ describe("analytics presentation components", () => {

it("keeps standard cards focused on the selected metric", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "RequestPath");
element.cards = dashboardCards("unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "RequestPath");
element.metric = "pageViews";
element.breakdowns = {
RequestPath: successState({ dimension: "RequestPath", rows: [{ value: "/", visitors: 8_525, pageViews: 15_119 }] }),
Expand Down Expand Up @@ -397,27 +397,28 @@ describe("analytics presentation components", () => {
expect(icons.map((icon) => icon.getAttribute("name"))).toEqual(["icon-desktop", "icon-mobile", "icon-ipad"]);
});

it("keeps document traffic breakdowns ahead of optional reports", async () => {
it("keeps document pages and traffic breakdowns ahead of optional reports", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(true, "unavailable");
element.cards = dashboardCards("unavailable");
element.events = successState({ rows: [{ eventName: "Signup", visitors: 12, count: 18 }] });
document.body.append(element);
await element.updateComplete;

const cards = [...element.shadowRoot?.querySelectorAll("uui-box") ?? []];
expect(cards.slice(0, 4).map((card) => card.querySelector<HTMLElement & { headline: string }>("web-analytics-breakdown-table")?.headline)).toEqual([
expect(cards.slice(0, 5).map((card) => card.querySelector<HTMLElement & { headline: string }>("web-analytics-breakdown-table")?.headline)).toEqual([
"Pages",
"Referrers",
"Countries",
"Devices",
"Operating systems",
]);
expect(cards[4]?.querySelector("web-analytics-event-table")).not.toBeNull();
expect(cards[5]?.querySelector("web-analytics-flag-table")).not.toBeNull();
expect(cards[5]?.querySelector("web-analytics-event-table")).not.toBeNull();
expect(cards[6]?.querySelector("web-analytics-flag-table")).not.toBeNull();
});

it("keeps View all actions low priority while retaining emphasis for Retry", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "Country");
element.cards = dashboardCards("unavailable").filter((card) => card.kind === "breakdown" && card.dimension === "Country");
element.breakdowns = {
Country: successState({ dimension: "Country", rows: [{ value: "DK", visitors: 12, pageViews: 18 }] }),
};
Expand Down Expand Up @@ -448,7 +449,7 @@ describe("analytics presentation components", () => {

it("groups Events and Flags as optional reports in the overview", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unavailable");
element.cards = dashboardCards("unavailable");
element.events = successState({ rows: [] });
document.body.append(element);
await element.updateComplete;
Expand All @@ -463,7 +464,7 @@ describe("analytics presentation components", () => {

it("keeps a lone optional report in one feature-grid track", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(true, "unavailable");
element.cards = dashboardCards("unavailable");
element.supportsEvents = false;
element.supportsFlags = true;
element.events = successState({ rows: [] });
Expand All @@ -481,7 +482,7 @@ describe("analytics presentation components", () => {

it("merges valid UTM reports into the referrers card with five parameter tabs", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "available");
element.cards = dashboardCards("available");
element.breakdowns = {
ReferrerHostname: successState({ dimension: "ReferrerHostname", rows: [{ value: "google.com", visitors: 8, pageViews: 10 }] }),
UtmSource: successState({ dimension: "UtmSource", rows: [{ value: "newsletter", visitors: 5, pageViews: 6 }] }),
Expand Down Expand Up @@ -524,7 +525,7 @@ describe("analytics presentation components", () => {

it("keeps the UTM tab hidden until a UTM report is valid", async () => {
const element = document.createElement("web-analytics-breakdown-grid") as WebAnalyticsBreakdownGridElement;
element.cards = dashboardCards(false, "unknown");
element.cards = dashboardCards("unknown");
element.breakdowns = {
ReferrerHostname: successState({ dimension: "ReferrerHostname", rows: [] }),
};
Expand Down
1 change: 0 additions & 1 deletion src/TheBuilder.WebAnalytics/Client/src/analytics/analytics-dashboard.controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,6 @@ export class AnalyticsDashboardController {
const capabilities = this.#capabilities();
const referrerDimension = capabilities.dimensions.includes("ReferrerHostname") ? "ReferrerHostname" : "Referrer";
const plan = dashboardReportPlan(
Boolean(this.#documentId),
utmCapability,
this.state.acquisitionView,
this.state.utmDimension,
Expand Down
17 changes: 7 additions & 10 deletions src/TheBuilder.WebAnalytics/Client/src/analytics/dashboard-cards.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import { describe, expect, it } from "vitest";
import { dashboardCards, dashboardReportPlan, selectedCardDimension } from "./dashboard-cards.js";

describe("dashboardCards", () => {
it("models pages globally and omits them for a document", () => {
expect(reportPlan({ documentScoped: false }).dimensions).toContain("RequestPath");
expect(reportPlan({ documentScoped: true }).dimensions).not.toContain("RequestPath");
it("models pages", () => {
expect(reportPlan().dimensions).toContain("RequestPath");
});

it("models audience and UTM dimensions as tabbed cards without eagerly loading hidden UTM tabs", () => {
Expand All @@ -31,26 +30,24 @@ describe("dashboardCards", () => {

it("shows the UTM card only after capability is known to be available", () => {
for (const capability of ["unknown", "unavailable"] as const) {
expect(dashboardCards(false, capability).some((card) => card.kind === "tabbed-breakdown" && card.id === "utm")).toBe(false);
expect(dashboardCards(capability).some((card) => card.kind === "tabbed-breakdown" && card.id === "utm")).toBe(false);
}
});

it("selects the active option from a tabbed card", () => {
const audience = dashboardCards(false, "available").find((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
const audience = dashboardCards("available").find((card) => card.kind === "tabbed-breakdown" && card.id === "audience");
expect(audience && selectedCardDimension(audience, "BrowserName", "UtmSource").dimension).toBe("BrowserName");
});
});

type ReportPlanOverrides = {
documentScoped?: Parameters<typeof dashboardReportPlan>[0];
utmCapability?: Parameters<typeof dashboardReportPlan>[1];
acquisitionView?: Parameters<typeof dashboardReportPlan>[2];
utmDimension?: Parameters<typeof dashboardReportPlan>[3];
utmCapability?: Parameters<typeof dashboardReportPlan>[0];
acquisitionView?: Parameters<typeof dashboardReportPlan>[1];
utmDimension?: Parameters<typeof dashboardReportPlan>[2];
};

function reportPlan(overrides: ReportPlanOverrides = {}) {
return dashboardReportPlan(
overrides.documentScoped ?? false,
overrides.utmCapability ?? "available",
overrides.acquisitionView ?? "referrers",
overrides.utmDimension ?? "UtmSource",
Expand Down
6 changes: 2 additions & 4 deletions src/TheBuilder.WebAnalytics/Client/src/analytics/dashboard-cards.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,11 @@ const UTM_CARD: DashboardCard = {
};

export function dashboardCards(
documentScoped: boolean,
utmCapability: UtmCapability,
referrerDimension: "ReferrerHostname" | "Referrer" = "ReferrerHostname",
): ReadonlyArray<DashboardCard> {
const cards: DashboardCard[] = [
...(documentScoped ? [] : [{ kind: "breakdown" as const, dimension: "RequestPath" as const, headline: "Pages", span: "wide" as const }]),
{ kind: "breakdown", dimension: "RequestPath", headline: "Pages", span: "wide" },
{ kind: "breakdown", ...referrerDimensionOption(referrerDimension), span: "wide" },
...SHARED_CARDS,
];
Expand All @@ -85,13 +84,12 @@ export function dashboardCards(
}

export function dashboardReportPlan(
documentScoped: boolean,
utmCapability: UtmCapability,
acquisitionView: AcquisitionView,
utmDimension: UtmDimension,
referrerDimension: "ReferrerHostname" | "Referrer" = "ReferrerHostname",
): DashboardReportPlan {
const cards = dashboardCards(documentScoped, utmCapability, referrerDimension);
const cards = dashboardCards(utmCapability, referrerDimension);
const dimensions = cards.flatMap((card) => card.kind === "breakdown"
? [card.dimension]
: card.reportLoading === "eager" ? card.options.map(({ dimension }) => dimension) : []);
Expand Down
Loading