Roam analytics

apps/roam/package.json

@@ -29,6 +29,7 @@
     "contrast-color": "^1.0.1",
     "cytoscape-navigator": "^2.0.1",
     "nanoid": "2.0.4",
+    "posthog-js": "^1.203.2",
     "react-charts": "^3.0.0-beta.48",
     "react-draggable": "^4.4.5",
     "react-in-viewport": "^1.0.0-alpha.20",

apps/roam/src/components/DiscourseContext.tsx

@@ -27,6 +27,7 @@ import renderWithUnmount from "roamjs-components/util/renderWithUnmount";
 import isDiscourseNode from "~/utils/isDiscourseNode";
 import CanvasReferences from "./canvas/CanvasReferences";
 import { OnloadArgs } from "roamjs-components/types/native";
+import posthog from "posthog-js";
 
 export type DiscourseContextResults = Awaited<
   ReturnType<typeof getDiscourseContextResults>
@@ -432,7 +433,14 @@ const DiscourseContext = ({ uid }: Props) => {
           } ${
             caretShown ? "rm-caret-showing" : "rm-caret-hidden"
           } dont-focus-block`}
-          onClick={() => setCaretOpen(!caretOpen)}
+          onClick={() => {
+            setCaretOpen(!caretOpen);
+            if (!caretOpen) {
+              posthog.capture("Discourse Context: Show Results", {
+                uid: uid,
+              });
+            }
+          }}
         />
         <div style={{ flex: "0 1 2px" }} />
         <div style={{ color: "rgb(206, 217, 224)" }}>

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -25,6 +25,7 @@ import createDiscourseNode from "../utils/createDiscourseNode";
 import { getNewDiscourseNodeText } from "../utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
+import posthog from "posthog-js";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -66,6 +67,11 @@ const NodeMenu = ({ onClose, textarea }: { onClose: () => void } & Props) => {
         )}[[${pageName}]]${currentBlockText.substring(textarea.selectionEnd)}`;
 
         updateBlock({ text: newText, uid: blockUid });
+        posthog.capture("Discourse Node: Created via Node Menu", {
+          nodeType: nodeUid,
+          text: pageName,
+        });
+
         createDiscourseNode({
           text: pageName,
           configPageUid: nodeUid,

apps/roam/src/components/ExportDiscourseContext.tsx

@@ -25,6 +25,7 @@ import isDiscourseNode from "../utils/isDiscourseNode";
 import getDiscourseContextResults from "../utils/getDiscourseContextResults";
 import { render as exportRender } from "./Export";
 import { Result } from "../utils/types";
+import posthog from "posthog-js";
 
 type UpdateProgressWithDelay = (params: {
   progress: number;
@@ -553,6 +554,11 @@ const GraphExportButton = () => {
       icon="export"
       onClick={() => {
         const { degreesIn, degreesOut } = getGraphOverviewDepthValues();
+        posthog.capture("Graph Overview: Export", {
+          degreesIn: degreesIn,
+          degreesOut: degreesOut,
+        });
+
         renderOverlay({
           id: "graph-export",
           Overlay: GraphExportDialog,

apps/roam/src/components/QueryBuilder.tsx

@@ -23,6 +23,7 @@ import ExtensionApiContextProvider, {
 } from "roamjs-components/components/ExtensionApiContext";
 import { Column } from "../utils/types";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import posthog from "posthog-js";
 
 type QueryPageComponent = (props: {
   pageUid: string;
@@ -190,11 +191,13 @@ const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
     </Card>
   );
 };
+export const renderQueryBlock = createComponentRender(({ blockUid }) => {
+  posthog.capture("Query Block: Rendered", {
+    blockUid,
+  });
 
-export const renderQueryBlock = createComponentRender(
-  ({ blockUid }) => <QueryBuilder pageUid={blockUid} isEditBlock showAlias />,
-  "roamjs-query-builder-parent",
-);
+  return <QueryBuilder pageUid={blockUid} isEditBlock showAlias />;
+}, "roamjs-query-builder-parent");
 
 export const renderQueryPage = ({
   title,
@@ -210,6 +213,10 @@ export const renderQueryPage = ({
   const containerParent = h1.parentElement?.parentElement;
 
   if (containerParent && !containerParent.hasAttribute(attribute)) {
+    posthog.capture("Query Page: Rendered", {
+      pageUid: uid,
+      pageTitle: title,
+    });
     containerParent.setAttribute(attribute, "true");
     const parent = document.createElement("div");
     const configPageId = title.split("/").slice(-1)[0];

apps/roam/src/components/QueryDrawer.tsx

@@ -21,6 +21,7 @@ import ExtensionApiContextProvider from "roamjs-components/components/ExtensionA
 import QueryEditor from "./QueryEditor";
 import { Column } from "../utils/types";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import posthog from "posthog-js";
 
 type Props = {
   blockUid: string;
@@ -55,6 +56,10 @@ const SavedQuery = ({
   };
   const resultsInViewRef = useRef<Result[]>([]);
   const refresh = useCallback(() => {
+    posthog.capture("Query Drawer: View Saved Query", {
+      queryUid: uid,
+      isSavedToPage: isSavedToPage,
+    });
     const args = parseQuery(uid);
     return fireQuery(args)
       .then((r) => {
@@ -66,6 +71,10 @@ const SavedQuery = ({
         setError(
           `Query failed to run. Try running a new query from the editor.`,
         );
+        posthog.capture("Query Drawer: Query Failed to Run", {
+          queryUid: uid,
+          isSavedToPage: isSavedToPage,
+        });
       });
   }, [uid, setResults, setError, setColumns, setMinimized]);
   return (
@@ -289,6 +298,11 @@ const QueryDrawerContent = ({
         key={query}
         parentUid={blockUid}
         onQuery={() => {
+          posthog.capture("Query Drawer: Create Query", {
+            queryLabel: savedQueryLabel,
+            parentUid: blockUid,
+          });
+
           const args = parseQuery(blockUid);
           return Promise.all([
             createBlock({
@@ -362,8 +376,9 @@ const QueryDrawer = ({
   </ResizableDrawer>
 );
 
-export const openQueryDrawer = (onloadArgs: OnloadArgs) =>
-  Promise.resolve(
+export const openQueryDrawer = (onloadArgs: OnloadArgs) => {
+  posthog.capture("Query Drawer: Opened", {});
+  return Promise.resolve(
     getPageUidByPageTitle("roam/js/query-builder/drawer") ||
       createPage({
         title: "roam/js/query-builder/drawer",
@@ -374,7 +389,8 @@ export const openQueryDrawer = (onloadArgs: OnloadArgs) =>
       onloadArgs,
     }),
   );
-export const render = (props: Props) =>
-  renderOverlay({ Overlay: QueryDrawer, props });
+};
 
-export default QueryDrawer;
+export const render = (props: Props) => {
+  return renderOverlay({ Overlay: QueryDrawer, props });
+};

apps/roam/src/components/ResultsView/ResultsView.tsx

@@ -39,6 +39,7 @@ import { Condition } from "~/utils/types";
 import ResultsTable from "./views/ResultsTable";
 import { render as renderSimpleAlert } from "roamjs-components/components/SimpleAlert";
 import setInputSettings from "roamjs-components/util/setInputSettings";
+import posthog from "posthog-js";
 
 const VIEWS: Record<string, { value: boolean }> = {
   link: { value: false },
@@ -551,6 +552,12 @@ const ResultsView: ResultsViewComponent = ({
                             : "border-gray-800 border-opacity-25 text-gray-800"
                         }`}
                         onClick={() => {
+                          posthog.capture("Results View: Layout Changed", {
+                            pageUid: parentUid,
+                            oldLayout: layoutMode,
+                            newLayout: l.id,
+                          });
+
                           setLayout({ ...layout, mode: l.id });
                           const resultNode = getSubTree({
                             key: "results",
@@ -892,9 +899,18 @@ const ResultsView: ResultsViewComponent = ({
                               className="roamjs-view-select"
                               items={Object.keys(VIEWS)}
                               activeItem={mode}
-                              onItemSelect={(m) =>
-                                onViewChange({ mode: m, column, value }, i)
-                              }
+                              onItemSelect={(m) => {
+                                posthog.capture(
+                                  "Results View: Column View Changed",
+                                  {
+                                    pageUid: parentUid,
+                                    oldMode: mode,
+                                    newMode: m,
+                                  },
+                                );
+
+                                onViewChange({ mode: m, column, value }, i);
+                              }}
                             />
                           </td>
                           {showColumnViewOptions && (
@@ -1030,6 +1046,12 @@ const ResultsView: ResultsViewComponent = ({
                     icon={"export"}
                     text={"Share Data"}
                     onClick={async () => {
+                      posthog.capture("Results View: Share Data Clicked", {
+                        parentUid: parentUid,
+                        resultCount: results.length,
+                        columnCount: columns.length,
+                        layout: layoutMode,
+                      });
                       if (!results.length) {
                         onRefresh();
                       }

apps/roam/src/components/canvas/CanvasDrawer.tsx

@@ -9,6 +9,7 @@ import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
 import getBlockProps from "~/utils/getBlockProps";
 import { TLBaseShape } from "@tldraw/tldraw";
 import { DiscourseNodeShape } from "./DiscourseNodeUtil";
+import posthog from "posthog-js";
 
 export type GroupedShapes = Record<string, DiscourseNodeShape[]>;
 
@@ -161,6 +162,8 @@ const CanvasDrawer = ({
 
 export const openCanvasDrawer = () => {
   const pageUid = getCurrentPageUid();
+  posthog.capture("Canvas Drawer: Opened", { pageUid: pageUid });
+
   const props = getBlockProps(pageUid) as Record<string, unknown>;
   const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
   const tldraw = (rjsqb?.tldraw as Record<string, unknown>) || {};

apps/roam/src/components/canvas/DiscourseNodeUtil.tsx

@@ -26,6 +26,7 @@ import { isPageUid } from "~/utils/isPageUid";
 import { loadImage } from "~/utils/loadImage";
 import { DiscourseRelationShape } from "./DiscourseRelationsUtil";
 import { formatHexColor } from "../settings/DiscourseNodeCanvasSettings";
+import posthog from "posthog-js";
 
 // from @tldraw/editor/editor.css
 const COLOR_PALETTE: Record<string, string> = {
@@ -386,8 +387,12 @@ export class DiscourseNodeUtil extends TLBoxUtil<DiscourseNodeShape> {
                   });
                 else await updateBlock({ uid: shape.props.uid, text });
               }
-
               if (action === "creating" && !getPageUidByPageTitle(text)) {
+                posthog.capture("Canvas Node: Created", {
+                  uid: uid,
+                  text: text,
+                  action: action,
+                });
                 createDiscourseNode({
                   configPageUid: shape.type,
                   text,

apps/roam/src/components/canvas/Tldraw.tsx

@@ -58,6 +58,7 @@ import {
   DiscourseRelationUtil,
 } from "./DiscourseRelationsUtil";
 import { isPageUid } from "~/utils/isPageUid";
+import posthog from "posthog-js";
 
 declare global {
   interface Window {
@@ -596,6 +597,9 @@ const TldrawCanvas = ({ title }: Props) => {
                               relation,
                               target,
                             }));
+                          posthog.capture("Canvas Relation: Created", {
+                            relation: relationLabel,
+                          });
                           triplesToBlocks({
                             defaultPageTitle: `Auto generated from ${title}`,
                             toPage: async (
@@ -839,6 +843,9 @@ const TldrawCanvas = ({ title }: Props) => {
             tldrawApps[title] = app;
           }
           appRef.current = app;
+          posthog.capture("Canvas: Mounted", {
+            title: title,
+          });
           // TODO - this should move to one of DiscourseNodeTool's children classes instead
           app.on("event", (e) => {
             discourseContext.lastAppEvent = e.name;

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

@@ -11,6 +11,7 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import createPage from "roamjs-components/writes/createPage";
 import type { CustomField } from "roamjs-components/components/ConfigPanels/types";
+import posthog from "posthog-js";
 
 type DiscourseNodeConfigPanelProps = React.ComponentProps<
   CustomField["options"]["component"]
@@ -54,6 +55,7 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
           className="select-none"
           disabled={!label}
           onClick={() => {
+            posthog.capture("Discourse Node: Type Created", { label: label });
             createPage({
               title: `discourse-graph/nodes/${label}`,
               tree: [

apps/roam/src/components/settings/DiscourseRelationConfigPanel.tsx

@@ -48,6 +48,7 @@ import { CustomField } from "roamjs-components/components/ConfigPanels/types";
 import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { getConditionLabels } from "~/utils/conditionToDatalog";
 import { formatHexColor } from "./DiscourseNodeCanvasSettings";
+import posthog from "posthog-js";
 
 const DEFAULT_SELECTED_RELATION = {
   display: "none",
@@ -996,6 +997,9 @@ const DiscourseRelationConfigPanel: CustomField["options"]["component"] = ({
       ]);
       setNewRelation("");
       setEditingRelation(relationUid);
+      posthog.capture("Discourse Relation: Created", {
+        relationUid: relationUid,
+      });
     });
   };
 

apps/roam/src/components/settings/QueryPagesPanel.tsx

@@ -1,4 +1,5 @@
 import { Button, InputGroup } from "@blueprintjs/core";
+import posthog from "posthog-js";
 import React, { useState } from "react";
 import type { OnloadArgs } from "roamjs-components/types";
 
@@ -46,6 +47,9 @@ const QueryPagesPanel = ({
             setTexts(newTexts);
             extensionAPI.settings.set("query-pages", newTexts);
             setValue("");
+            posthog.capture("Query Page: Page Format Added", {
+              newType: value,
+            });
           }}
         />
       </div>

apps/roam/src/index.ts

@@ -24,10 +24,39 @@ import { initObservers } from "./utils/initializeObserversAndListeners";
 import { addGraphViewNodeStyling } from "./utils/graphViewNodeStyling";
 import { setQueryPages } from "./utils/setQueryPages";
 import initializeDiscourseNodes from "./utils/initializeDiscourseNodes";
+import posthog from "posthog-js";
+import getCurrentUserUid from "roamjs-components/queries/getCurrentUserUid";
+
+const initPostHog = () => {
+  posthog.init("phc_SNMmBqwNfcEpNduQ41dBUjtGNEUEKAy6jTn63Fzsrax", {
+    api_host: "https://us.i.posthog.com",
+    person_profiles: "identified_only",
+    property_denylist: [
+      "$ip", // Still seeing ip in the event
+      "$device_id",
+      "$geoip_city_name",
+      "$geoip_latitude",
+      "$geoip_longitude",
+      "$geoip_postal_code",
+      "$geoip_subdivision_1_name",
+      "$raw_user_agent",
+      "$current_url",
+      "$referrer",
+      "$referring_domain",
+      "$initial_current_url",
+      "$pathname",
+    ],
+  });
+};
 
 export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*";
 
 export default runExtension(async (onloadArgs) => {
+  initPostHog();
+  posthog.capture("Extension Loaded", {
+    graphName: window.roamAlphaAPI.graph.name,
+    userUid: getCurrentUserUid(),
+  });
   if (window?.roamjs?.loaded?.has("query-builder")) {
     renderToast({
       timeout: 10000,