Merge pull request #2177 from Sefaria/topic-toc-analytics

chore(topics): add analytics to topic toc
Sefaria · Dec 16, 2024 · 5f36cb0 · 5f36cb0
2 parents 6b869c2 + 1a4e5ac
commit 5f36cb0
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 19 deletions.
diff --git a/static/js/NavSidebar.jsx b/static/js/NavSidebar.jsx
@@ -590,14 +590,22 @@ const AboutTopics = ({hideTitle}) => (
 
 
 const TrendingTopics = () => (
-  <SidebarModule>
-    <SidebarModuleTitle>Trending Topics</SidebarModuleTitle>
-    {Sefaria.trendingTopics.map((topic, i) =>
-      <div className="navSidebarLink ref serif" key={i}>
-        <a href={"/topics/" + topic.slug}><InterfaceText text={{en: topic.en, he: topic.he}}/></a>
-      </div>
-    )}
-  </SidebarModule>
+    <div data-anl-feature_name="Trending" data-anl-link_type="topic">
+        <SidebarModule>
+            <SidebarModuleTitle>Trending Topics</SidebarModuleTitle>
+            {Sefaria.trendingTopics.map((topic, i) =>
+                <div className="navSidebarLink ref serif" key={i}>
+                    <a
+                        href={"/topics/" + topic.slug}
+                        data-anl-event="navto_topic:click"
+                        data-anl-text={topic.en}
+                    >
+                        <InterfaceText text={{en: topic.en, he: topic.he}}/>
+                    </a>
+                </div>
+            )}
+        </SidebarModule>
+    </div>
 );
 
 

diff --git a/static/js/ReaderPanel.jsx b/static/js/ReaderPanel.jsx
@@ -618,15 +618,21 @@ class ReaderPanel extends Component {
     highlighted.click();
   }
   getPanelType() {
-    const {menuOpen, tab} = this.state;
+    const {menuOpen, tab, navigationTopic, navigationTopicCategory} = this.state;
     if (menuOpen === "topics") {
-      return `${menuOpen}_${tab}`;
+      if (navigationTopicCategory) {
+        return "Topic Navigation";
+      } else if (navigationTopic) {
+        return `${menuOpen}_${tab}`;
+      } else {
+        return "Topic Landing";
+      }
     }
   }
   getPanelName() {
     const {menuOpen, navigationTopic, navigationTopicCategory} = this.state;
     if (menuOpen === "topics") {
-      return navigationTopicCategory || navigationTopic;
+      return navigationTopicCategory || navigationTopic || "Explore by Topic";
     }
   }
   getPanelNumber() {

diff --git a/static/js/TopicPage.jsx b/static/js/TopicPage.jsx
@@ -247,6 +247,9 @@ const TopicCategory = ({topic, topicTitle, setTopic, setNavTopic, compare, initi
         return (
             <div className="navBlock">
               <a href={`/topics/${children ? 'category/' : ''}${slug}`}
+                 data-anl-event="navto_topic:click"
+                 data-anl-link_type={children ? "category" : "topic"}
+                 data-anl-text={en}
                  className="navBlockTitle"
                  onClick={openTopic}
                  key={i}>
@@ -272,10 +275,14 @@ const TopicCategory = ({topic, topicTitle, setTopic, setNavTopic, compare, initi
     }
 
     return (
-        <div className="readerNavMenu noLangToggleInHebrew">
+        <div
+            className="readerNavMenu noLangToggleInHebrew"
+            data-anl-project="topics"
+            data-anl-panel_category={getPanelCategory(topic) || "Topic Landing"}
+        >
             <div className="content readerTocTopics">
                 <div className="sidebarLayout">
-                  <div className="contentInner">
+                  <div className="contentInner" data-anl-feature_name="Main">
                       <div className="navTitle tight">
                         <CategoryHeader type="topics" data={topicData}>
                             <h1><InterfaceText text={{en: topicTitle.en, he: topicTitle.he}} /></h1>
@@ -546,11 +553,15 @@ const PortalNavSideBar = ({portal, entriesToDisplayList}) => {
     )
 };
 
+const getPanelCategory = (slug) => {
+    return Sefaria.topicTocCategories(slug)?.map(({slug}) => slug)?.join('|');
+}
+
 const getTopicPageAnalyticsData = (slug, langPref) => {
     return {
         project: "topics",
         content_lang: langPref || "bilingual",
-        panel_category: Sefaria.topicTocCategories(slug)?.map(({slug}) => slug)?.join('|'),
+        panel_category: getPanelCategory(slug),
     };
 };
 

diff --git a/static/js/TopicsPage.jsx b/static/js/TopicsPage.jsx
@@ -18,7 +18,14 @@ const TopicsPage = ({setNavTopic, multiPanel, initialWidth}) => {
     const openCat = e => {e.preventDefault(); setNavTopic(cat.slug, {en: cat.en, he: cat.he})};
     return (
       <div className="navBlock">
-        <a href={`/topics/category/${cat.slug}`} className="navBlockTitle" onClick={openCat}>
+        <a
+            href={`/topics/category/${cat.slug}`}
+            className="navBlockTitle"
+            onClick={openCat}
+            data-anl-event="navto_topic:click"
+            data-anl-link_type="category"
+            data-anl-text={cat.en}
+        >
           <InterfaceText text={cat} />
         </a>
         <div className="navBlockDescription">
@@ -57,10 +64,15 @@ const TopicsPage = ({setNavTopic, multiPanel, initialWidth}) => {
 
 
   return (
-    <div className="readerNavMenu noLangToggleInHebrew" key="0">
+    <div
+        className="readerNavMenu noLangToggleInHebrew"
+        key="0"
+        data-anl-project="topics"
+        data-anl-panel_category="NULL"
+    >
       <div className="content">
         <div className="sidebarLayout">
-          <div className="contentInner">
+          <div className="contentInner" data-anl-feature_name="Main">
               <div className="navTitle tight sans-serif">
                   <CategoryHeader type="topics" toggleButtonIDs={["subcategory", "reorder"]}>
                     <h1><InterfaceText>Explore by Topic</InterfaceText></h1>

diff --git a/static/js/analyticsEventTracker.js b/static/js/analyticsEventTracker.js
@@ -3,7 +3,7 @@ const AnalyticsEventTracker = (function() {
         'project', 'panel_type', 'panel_number', 'item_id', 'version', 'content_lang',
         'content_id', 'content_type', 'panel_name', 'panel_category', 'position', 'ai',
         'text', 'experiment', 'feature_name', 'from', 'to', 'action', 'engagement_value',
-        'engagement_type', 'logged_in', 'site_lang', 'traffic_type', 'promotion_name'
+        'engagement_type', 'logged_in', 'site_lang', 'traffic_type', 'promotion_name', 'link_type',
     ]);
     const EVENT_ATTR = 'data-anl-event';
     const FIELD_ATTR_PREFIX = 'data-anl-';

diff --git a/static/js/sefaria/sefaria.js b/static/js/sefaria/sefaria.js
@@ -2785,8 +2785,8 @@ _media: {},
     this._topicTocCategory = this.topic_toc.reduce(this._initTopicTocCategoryReducer, {});
   },
   _initTopicTocCategoryReducer: function(a,c) {
+    a[c.slug] = c.parents;
     if (!c.children) {
-        a[c.slug] = c.parents;
         return a;
     }
     if (!c.parents) {