diff --git a/static/js/Story.jsx b/static/js/Story.jsx
index b23c55a52a..398b53a630 100644
--- a/static/js/Story.jsx
+++ b/static/js/Story.jsx
@@ -86,7 +86,7 @@ StoryFrame.propTypes = {
 const SummarizedStoryFrame = ({cls, cardColor, collapsibleSummary, children}) => {
 return (
     <StoryFrame cls={cls}>
-        <details><summary>{collapsibleSummary}</summary>{children}</details>
+        <details data-anl-event="package_toggle:toggle" data-anl-from="derived"><summary>{collapsibleSummary}</summary>{children}</details>
     </StoryFrame>
 )};
 SummarizedStoryFrame.propTypes = {
diff --git a/static/js/analyticsEventTracker.js b/static/js/analyticsEventTracker.js
index 68c6247145..505971ece5 100644
--- a/static/js/analyticsEventTracker.js
+++ b/static/js/analyticsEventTracker.js
@@ -108,6 +108,19 @@ const AnalyticsEventTracker = (function() {
         return b;
     }
 
+    function _getDerivedData(event) {
+        /**
+         * Return data that can be derived directly from `event`
+         */
+        if (event.type === "toggle") {
+            return {
+                from: event.target.open ? "closed" : "open",
+                to: event.target.open ? "open" : "closed"
+            };
+        }
+        return {};
+    }
+
     function _handleAnalyticsEvent(event) {
         const anlEvent = _getAnalyticsEvent(event);
         if (!anlEvent) { return; }
@@ -123,6 +136,7 @@ const AnalyticsEventTracker = (function() {
             // make sure that analytics fields that are defined lower down aren't overwritten by ones defined higher in the DOM tree
             anlEventData = _mergeObjectsWithoutOverwrite(currAnlEventData, anlEventData);
         } while (currElem?.parentNode);
+        anlEventData = {...anlEventData, ..._getDerivedData(event)};
 
         if (!_isValidAnalyticsObject(anlEventData)) { return; }