feat(app): track sidebar open/close (#289)

components/floating-sidebar-button.spec.tsx

@@ -65,6 +65,34 @@ describe("<FloatingSidebarButton>", () => {
     expect(getByTestId("floating-sidebar")).not.toBeVisible();
   });
 
+  it("calls props.onButtonClick() whenever the button is clicked", () => {
+    const onButtonClick = jest.fn();
+    const { getByTestId } = render(
+      <TestApp>
+        <FloatingSidebarButton
+          content={<div data-testid="content" />}
+          onButtonClick={onButtonClick}
+          data-testid="floating-sidebar-button"
+        />
+      </TestApp>
+    );
+
+    act(() => {
+      fireEvent.click(getByTestId("floating-sidebar-button"));
+    });
+    act(() => {
+      fireEvent.click(getByTestId("floating-sidebar-button"));
+    });
+    act(() => {
+      fireEvent.click(getByTestId("floating-sidebar-button"));
+    });
+
+    expect(onButtonClick).toHaveBeenCalledTimes(3);
+    expect(onButtonClick).toHaveBeenNthCalledWith(1, expect.anything(), true);
+    expect(onButtonClick).toHaveBeenNthCalledWith(2, expect.anything(), false);
+    expect(onButtonClick).toHaveBeenNthCalledWith(3, expect.anything(), true);
+  });
+
   describe("props.closeOnHashChange = true", () => {
     it("hides the floating sidebar when a route change caused", () => {
       let testAppElement!: TestAppElement;

components/floating-sidebar-button.tsx

@@ -8,13 +8,15 @@ import { Button, ButtonSize, ButtonVariant } from "./button";
 export interface FloatingSidebarButtonProps extends React.Attributes {
   closeOnRouteChange?: boolean;
   content: React.ReactNode;
+  onButtonClick?: (e: React.MouseEvent, isMenuOpen: boolean) => void;
   className?: string;
   style?: React.CSSProperties;
 }
 
 export const FloatingSidebarButton: React.VFC<FloatingSidebarButtonProps> = ({
   closeOnRouteChange = true,
   content,
+  onButtonClick = () => {},
   className,
   ...props
 }) => {
@@ -50,7 +52,10 @@ export const FloatingSidebarButton: React.VFC<FloatingSidebarButtonProps> = ({
               variant={ButtonVariant.inverted}
               size={ButtonSize.xl}
               icon={isMenuOpen ? <XIcon /> : <ListIcon />}
-              onClick={() => setMenuOpen((isMenuOpen) => !isMenuOpen)}
+              onClick={(e) => {
+                onButtonClick(e, !isMenuOpen);
+                setMenuOpen(!isMenuOpen);
+              }}
               className={cx(
                 css`
                   position: fixed;

components/page-layout.tsx

@@ -2,7 +2,10 @@ import { css, cx } from "@linaria/core";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 import { ParrotAnchor } from "./anchor";
-import { FloatingSidebarButton } from "./floating-sidebar-button";
+import {
+  FloatingSidebarButton,
+  FloatingSidebarButtonProps,
+} from "./floating-sidebar-button";
 
 export interface TwoColumnPageLayoutProps extends React.Attributes {
   className?: string;
@@ -88,11 +91,13 @@ export const TwoColumnPageLayoutMain: React.FC<TwoColumnPageLayoutMainProps> = (
 };
 
 export interface TwoColumnPageLayoutAsideProps extends React.Attributes {
+  onFloatingSidebarButtonClick?: FloatingSidebarButtonProps["onButtonClick"];
   className?: string;
   style?: React.CSSProperties;
 }
 
 export const TwoColumnPageLayoutAside: React.FC<TwoColumnPageLayoutAsideProps> = ({
+  onFloatingSidebarButtonClick,
   className,
   children,
   ...props
@@ -126,6 +131,7 @@ export const TwoColumnPageLayoutAside: React.FC<TwoColumnPageLayoutAsideProps> =
       </aside>
 
       <FloatingSidebarButton
+        onButtonClick={onFloatingSidebarButtonClick}
         content={children}
         className={css`
           display: none;

pages/index.tsx

@@ -12,6 +12,7 @@ import {
   TwoColumnPageLayoutFooter,
   TwoColumnPageLayoutMain,
 } from "../components/page-layout";
+import { useService } from "../components/service";
 import { WEBSITE_NAME } from "../constants/app";
 import { CACHE_HEADER_VALUE } from "../constants/cache";
 import { AVAILABLE_LOCALES } from "../constants/locale";
@@ -31,6 +32,7 @@ interface ServerSideProps extends CommonServerSideProps {
 }
 
 const Page: NextPage<ServerSideProps> = (props) => {
+  const { userMonitoring } = useService();
   const intl = useIntl();
   const origin = useOrigin();
   const {
@@ -83,7 +85,14 @@ const Page: NextPage<ServerSideProps> = (props) => {
           />
         </TwoColumnPageLayoutMain>
 
-        <TwoColumnPageLayoutAside>
+        <TwoColumnPageLayoutAside
+          onFloatingSidebarButtonClick={(_, isMenuOpen) =>
+            userMonitoring.trackUiEvent(
+              isMenuOpen ? "open_aside" : "close_aside",
+              1
+            )
+          }
+        >
           <AsideNavigation posts={posts} tableOfContents={tableOfContents} />
         </TwoColumnPageLayoutAside>
 

pages/posts/[slug].tsx

@@ -11,6 +11,7 @@ import {
   TwoColumnPageLayoutFooter,
   TwoColumnPageLayoutMain,
 } from "../../components/page-layout";
+import { useService } from "../../components/service";
 import { WEBSITE_NAME } from "../../constants/app";
 import { CACHE_HEADER_VALUE } from "../../constants/cache";
 import { AVAILABLE_LOCALES } from "../../constants/locale";
@@ -30,6 +31,7 @@ interface ServerSideProps extends CommonServerSideProps {
 }
 
 const Page: NextPage<ServerSideProps> = (props) => {
+  const { userMonitoring } = useService();
   const origin = useOrigin();
   const intl = useIntl();
   const {
@@ -119,7 +121,14 @@ const Page: NextPage<ServerSideProps> = (props) => {
           />
         </TwoColumnPageLayoutMain>
 
-        <TwoColumnPageLayoutAside>
+        <TwoColumnPageLayoutAside
+          onFloatingSidebarButtonClick={(_, isMenuOpen) =>
+            userMonitoring.trackUiEvent(
+              isMenuOpen ? "open_aside" : "close_aside",
+              1
+            )
+          }
+        >
           <AsideNavigation posts={posts} tableOfContents={tableOfContents} />
         </TwoColumnPageLayoutAside>