From b4cf86b9d90a262955e50b5191a53e22f14ee18f Mon Sep 17 00:00:00 2001
From: Daniel Bachhuber <daniel.b@posthog.com>
Date: Mon, 3 Feb 2025 05:07:24 -0800
Subject: [PATCH] feat(experiments): Add primary and secondary metric
 explanation (#28160)

---
 .../scenes/experiments/MetricsView/MetricsView.tsx    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
index c1325fb4f4cd8..25804e847f870 100644
--- a/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
+++ b/frontend/src/scenes/experiments/MetricsView/MetricsView.tsx
@@ -259,8 +259,15 @@ export function MetricsView({ isSecondary }: { isSecondary?: boolean }): JSX.Ele
                 <div className="border rounded bg-bg-light pt-6 pb-8 text-muted mt-2">
                     <div className="flex flex-col items-center mx-auto space-y-3">
                         <IconAreaChart fontSize="30" />
-                        <div className="text-sm text-center text-balance">
-                            Add up to {MAX_PRIMARY_METRICS} {isSecondary ? 'secondary' : 'primary'} metrics.
+                        <div className="text-sm text-center text-balance max-w-sm">
+                            <p>
+                                Add up to {MAX_PRIMARY_METRICS} {isSecondary ? 'secondary' : 'primary'} metrics.
+                            </p>
+                            <p>
+                                {isSecondary
+                                    ? 'Secondary metrics provide additional context and help detect unintended side effects.'
+                                    : 'Primary metrics represent the main goal of the experiment and directly measure if your hypothesis was successful.'}
+                            </p>
                         </div>
                         {isSecondary ? <AddSecondaryMetric /> : <AddPrimaryMetric />}
                     </div>