bug: properly attribute reporting, fix breakdown selections (#1225)

Resolves lumping all reports into one matomo event, while also fixing ad
set names and breakdown selections

src/routes/campaigns/analytics/AnalyticsOverview.tsx

@@ -6,6 +6,7 @@ import { FullScreenProgress } from "@/components/FullScreenProgress";
 import { Trans } from "@lingui/macro";
 import { CampaignAnalytics } from "@/routes/campaigns/analytics/CampaignAnalytics";
 import { CampaignOverviewProps } from "@/util/CampaignIdProps";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 
 Highcharts.setOptions({
   lang: {
@@ -14,6 +15,7 @@ Highcharts.setOptions({
 });
 
 export function AnalyticsOverview({ campaignOverview }: CampaignOverviewProps) {
+  useTrackMatomoPageView({ documentTitle: "Campaign Report View: V2" });
   const campaignStartDate = dayjs(campaignOverview.startAt);
   const campaignStartFromNow = campaignStartDate.fromNow();
 

src/routes/campaigns/analytics/breakdowns.tsx

@@ -118,7 +118,8 @@ const ADSET_BREAKDOWN: BreakdownDefinitionWithQuery<
   label: msg`Ad Set`,
   query: AdSet_Breakdown_Load,
   extractId: (dims) => dims.adSet?.id ?? "",
-  extractName: (dims) => dims.adSet?.name ?? "",
+  extractName: (dims) =>
+    dims.adSet?.name || dims.adSet?.id.substring(0, 8) || "?",
   renderCell: (row) => row.name,
 };
 

src/routes/campaigns/analytics/filters/BreakdownSelector.tsx

@@ -4,11 +4,9 @@ import { useLingui } from "@lingui/react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
-import { useState } from "react";
 
 export function VerticalBreakdown() {
   const { _ } = useLingui();
-  const [value, setValue] = useState(0);
   const { selected, setSelected, forceDefaultBreakdownSelection } =
     useBreakdownParams();
   const breakdowns = BREAKDOWNS.map((item) => ({
@@ -32,9 +30,8 @@ export function VerticalBreakdown() {
     >
       <Tabs
         orientation="vertical"
-        value={value}
+        value={breakdowns.findIndex((b) => b.id === selected.id)}
         onChange={(e, nv) => {
-          setValue(nv);
           setSelected(breakdowns[nv]);
         }}
         sx={{ alignItems: "left" }}

src/user/views/user/CampaignReportViewSelector.tsx

@@ -1,6 +1,5 @@
 import { Box, LinearProgress } from "@mui/material";
 import { AlwaysOnFormButton } from "@/components/Button/AlwaysOnFormButton";
-import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 import { useParams, useRouteMatch } from "react-router-dom";
 import { CampaignFormat } from "@/graphql-client/graphql";
 import { ConsultAccountManager } from "./reports/ConsultAccountManager";
@@ -39,7 +38,6 @@ const Campaign_Load = graphql(`
 
 export function CampaignReportViewSelector() {
   const match = useRouteMatch();
-  useTrackMatomoPageView({ documentTitle: "Campaign Reporting" });
   const isReport = match.url.includes("report");
 
   const { campaignId } = useParams<Params>();

src/user/views/user/reports/ConsultAccountManager.tsx

@@ -1,7 +1,10 @@
 import { Alert } from "@mui/material";
 import { Trans } from "@lingui/macro";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 
 export function ConsultAccountManager() {
+  useTrackMatomoPageView({ documentTitle: "Consult Account Manager" });
+
   return (
     <Alert
       severity="info"

src/user/views/user/reports/OriginalCampaignReportView.tsx

@@ -13,12 +13,14 @@ import {
 } from "@/graphql-client/graphql";
 import dayjs, { Dayjs } from "dayjs";
 import { useQuery } from "@apollo/client";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 
 interface Props {
   campaignSummary: CampaignSummaryFragment;
 }
 
 export function OriginalCampaignReportView({ campaignSummary }: Props) {
+  useTrackMatomoPageView({ documentTitle: "Campaign Report View" });
   const { _ } = useLingui();
   const today = new Date();
   const [startDate, setStartDate] = useState<Dayjs | undefined>();

src/user/views/user/reports/SearchCampaignReportView.tsx

@@ -17,12 +17,15 @@ import { useMetricSelection } from "@/user/analytics/search/hooks";
 import { ReportMenu } from "@/user/reporting/ReportMenu";
 import dayjs from "dayjs";
 import { useQuery } from "@apollo/client";
+import { useTrackMatomoPageView } from "@/hooks/useTrackWithMatomo";
 
 interface Props {
   campaignSummary: CampaignSummaryFragment;
 }
 
 export function SearchCampaignReportView({ campaignSummary }: Props) {
+  useTrackMatomoPageView({ documentTitle: "Search Campaign Report View" });
+
   const { forceDefaultMetricSelection } = useMetricSelection();
   const [isFirstLoad, setIsFirstLoad] = useState(true);