diff --git a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
index 3b29a60fc20..6de0eb2d84f 100644
--- a/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx
@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { config } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { CustomScrollbar, Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
@@ -63,7 +63,13 @@ export const MegaMenu = memo(
 
     const onPinItem = (id?: string) => {
       if (id && config.featureToggles.pinNavItems) {
-        const newItems = isPinned(id) ? pinnedItems.filter((i) => id !== i) : [...pinnedItems, id];
+        const navItem = navTree.find((item) => item.id === id);
+        const isSaved = isPinned(id);
+        const newItems = isSaved ? pinnedItems.filter((i) => id !== i) : [...pinnedItems, id];
+        const interactionName = isSaved ? 'grafana_nav_item_unpinned' : 'grafana_nav_item_pinned';
+        reportInteraction(interactionName, {
+          path: navItem?.url ?? id,
+        });
         patchPreferences({
           patchPrefsCmd: {
             navbar: {