Merge pull request #921 from prezly/feature/dev-12743-implement-plaus…

…ible-events-in-greta-theme [DEV-12743] Rework what events we track in the theme
prezly · Apr 5, 2024 · b4a2f02 · b4a2f02
2 parents 377bc65 + 73660db
commit b4a2f02
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 92 deletions.
diff --git a/components/ContentRenderer/components/Attachment/Attachment.tsx b/components/ContentRenderer/components/Attachment/Attachment.tsx
@@ -1,4 +1,4 @@
-import { STORY_FILE, useAnalytics } from '@prezly/analytics-nextjs';
+import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs';
 import type { AttachmentNode } from '@prezly/story-content-format';
 import { UploadcareFile } from '@prezly/uploadcare';
 
@@ -21,7 +21,7 @@ export function Attachment({ node }: Props) {
     const fileType = fileExtension?.toUpperCase();
 
     function handleClick() {
-        track(STORY_FILE.DOWNLOAD, { id: file.uuid });
+        track(DOWNLOAD.ATTACHMENT, { id: file.uuid });
     }
 
     return (

diff --git a/components/ContentRenderer/components/Gallery.tsx b/components/ContentRenderer/components/Gallery.tsx
@@ -1,4 +1,4 @@
-import { STORY_GALLERY_IMAGE, useAnalytics } from '@prezly/analytics-nextjs';
+import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs';
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { GalleryNode } from '@prezly/story-content-format';
 
@@ -13,10 +13,7 @@ export function Gallery({ node }: Props) {
         <Elements.Gallery
             node={node}
             onImageDownload={(image) => {
-                track(STORY_GALLERY_IMAGE.DOWNLOAD, { id: image.uuid });
-            }}
-            onPreviewOpen={(image) => {
-                track(STORY_GALLERY_IMAGE.VIEW, { id: image.uuid });
+                track(DOWNLOAD.GALLERY_IMAGE, { id: image.uuid });
             }}
         />
     );

diff --git a/components/ContentRenderer/components/Image.tsx b/components/ContentRenderer/components/Image.tsx
@@ -1,4 +1,4 @@
-import { STORY_IMAGE, useAnalytics } from '@prezly/analytics-nextjs';
+import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs';
 import { Elements } from '@prezly/content-renderer-react-js';
 import type { ImageNode } from '@prezly/story-content-format';
 import type { PropsWithChildren } from 'react';
@@ -14,10 +14,7 @@ export function Image({ node, children }: PropsWithChildren<Props>) {
         <Elements.Image
             node={node}
             onDownload={(image) => {
-                track(STORY_IMAGE.DOWNLOAD, { id: image.uuid });
-            }}
-            onPreviewOpen={(image) => {
-                track(STORY_IMAGE.VIEW, { id: image.uuid });
+                track(DOWNLOAD.IMAGE, { id: image.uuid });
             }}
         >
             {children}

diff --git a/components/Dropdown/DropdownItem.tsx b/components/Dropdown/DropdownItem.tsx
@@ -9,20 +9,22 @@ import styles from './DropdownItem.module.scss';
 
 type Props = Pick<LinkProps, 'href'> & {
     className?: string;
-    linkClassName?: string;
     forceRefresh?: boolean;
-    withMobileDisplay?: boolean;
+    linkClassName?: string;
     localeCode?: string | false;
+    onClick?: () => void;
+    withMobileDisplay?: boolean;
 };
 
 function DropdownItem({
-    href,
-    localeCode,
+    children,
     className,
-    linkClassName,
     forceRefresh,
+    href,
+    linkClassName,
+    localeCode,
+    onClick,
     withMobileDisplay,
-    children,
 }: PropsWithChildren<Props>) {
     return (
         <Menu.Item
@@ -38,6 +40,7 @@ function DropdownItem({
                     className={classNames(styles.link, linkClassName, {
                         [styles.active]: active,
                     })}
+                    onClick={onClick}
                     forceRefresh={forceRefresh}
                 >
                     {children}

diff --git a/components/RichText/Link.tsx b/components/RichText/Link.tsx
@@ -1,4 +1,3 @@
-import { STORY_LINK, useAnalytics } from '@prezly/analytics-nextjs';
 import type { LinkNode } from '@prezly/story-content-format';
 import type { ReactNode } from 'react';
 
@@ -10,18 +9,12 @@ interface Props {
 }
 
 export function Link({ node, children }: Props) {
-    const { track } = useAnalytics();
     const { href } = node;
 
-    function handleClick() {
-        track(STORY_LINK.CLICK, { href });
-    }
-
     return (
         <a
             className={styles.link}
             href={href}
-            onClick={handleClick}
             rel="noopener noreferrer"
             target={node.new_tab ? '_blank' : '_self'}
         >

diff --git a/modules/Gallery/DownloadLink.tsx b/modules/Gallery/DownloadLink.tsx
@@ -1,3 +1,4 @@
+import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs';
 import { translations } from '@prezly/theme-kit-intl';
 import { FormattedMessage } from 'react-intl';
 
@@ -11,8 +12,20 @@ interface Props {
 }
 
 function DownloadLink({ href }: Props) {
+    const { track } = useAnalytics();
+
+    function handleClick() {
+        track(DOWNLOAD.MEDIA_GALLERY);
+    }
+
     return (
-        <ButtonLink variation="primary" forceRefresh href={href} className={styles.link}>
+        <ButtonLink
+            variation="primary"
+            forceRefresh
+            href={href}
+            className={styles.link}
+            onClick={handleClick}
+        >
             <FormattedMessage {...translations.actions.download} />
             <IconDownload width={16} height={16} className={styles.icon} />
         </ButtonLink>

diff --git a/modules/Layout/Header/LanguagesDropdown/LanguagesDropdown.tsx b/modules/Layout/Header/LanguagesDropdown/LanguagesDropdown.tsx
@@ -1,3 +1,4 @@
+import { ACTIONS, useAnalytics } from '@prezly/analytics-nextjs';
 import { getLanguageDisplayName, LocaleObject } from '@prezly/theme-kit-core';
 import {
     useCurrentLocale,
@@ -22,6 +23,7 @@ type Props = {
 };
 
 function LanguagesDropdown({ buttonClassName, navigationItemClassName, hasError }: Props) {
+    const { track } = useAnalytics();
     const currentLocale = useCurrentLocale();
     const languages = useLanguages();
     const getTranslationUrl = useGetTranslationUrl();
@@ -65,6 +67,9 @@ function LanguagesDropdown({ buttonClassName, navigationItemClassName, hasError
                             }
                             forceRefresh
                             withMobileDisplay
+                            onClick={() =>
+                                track(ACTIONS.SWITCH_LANGUAGE, { code: locale.toHyphenCode() })
+                            }
                             className={classNames({
                                 [styles.disabled]:
                                     language.code === currentLocale.toUnderscoreCode(),

diff --git a/modules/Layout/Header/SearchWidget/components/SearchBar.tsx b/modules/Layout/Header/SearchWidget/components/SearchBar.tsx
@@ -1,5 +1,8 @@
+import { ACTIONS, useAnalytics } from '@prezly/analytics-nextjs';
 import { translations } from '@prezly/theme-kit-intl';
 import { useGetLinkLocaleSlug } from '@prezly/theme-kit-nextjs';
+import { useDebouncedCallback } from '@react-hookz/web';
+import type { ChangeEvent } from 'react';
 import type { SearchBoxExposed, SearchBoxProvided } from 'react-instantsearch-core';
 import { connectSearchBox } from 'react-instantsearch-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -13,12 +16,28 @@ interface Props extends SearchBoxProvided, SearchBoxExposed {}
 const SEARCH_PAGE_URL = 'search';
 
 function SearchBar({ currentRefinement, refine }: Props) {
+    const { track } = useAnalytics();
     const { formatMessage } = useIntl();
     const getLinkLocaleSlug = useGetLinkLocaleSlug();
     const localeSlug = getLinkLocaleSlug();
 
     const action = localeSlug ? `/${localeSlug}/${SEARCH_PAGE_URL}` : `/${SEARCH_PAGE_URL}`;
 
+    const trackQuery = useDebouncedCallback(
+        (query: string) => {
+            track(ACTIONS.SEARCH, { query });
+        },
+        [track],
+        500,
+    );
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        const query = event.currentTarget.value;
+
+        refine(query);
+        trackQuery(query);
+    }
+
     return (
         <form className={styles.container} method="GET" action={action}>
             <div className={styles.inputWrapper}>
@@ -27,7 +46,7 @@ function SearchBar({ currentRefinement, refine }: Props) {
                     type="search"
                     name="query"
                     value={currentRefinement}
-                    onChange={(event) => refine(event.currentTarget.value)}
+                    onChange={handleChange}
                     className={styles.input}
                     autoComplete="off"
                 />

diff --git a/modules/Search/components/SearchInput.tsx b/modules/Search/components/SearchInput.tsx
@@ -1,4 +1,7 @@
+import { ACTIONS, useAnalytics } from '@prezly/analytics-nextjs';
 import { translations } from '@prezly/theme-kit-intl';
+import { useDebouncedCallback } from '@react-hookz/web';
+import type { ChangeEvent } from 'react';
 import type { SearchBoxExposed, SearchBoxProvided } from 'react-instantsearch-core';
 import { connectSearchBox } from 'react-instantsearch-dom';
 import { useIntl } from 'react-intl';
@@ -9,16 +12,32 @@ import { Button, FormInput } from '@/ui';
 import styles from './SearchInput.module.scss';
 
 function SearchInput({ currentRefinement, refine }: SearchBoxProvided & SearchBoxExposed) {
+    const { track } = useAnalytics();
     const { formatMessage } = useIntl();
 
+    const trackQuery = useDebouncedCallback(
+        (query: string) => {
+            track(ACTIONS.SEARCH, { query });
+        },
+        [track],
+        500,
+    );
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+        const query = event.currentTarget.value;
+
+        refine(query);
+        trackQuery(query);
+    }
+
     return (
         <form className={styles.container} method="GET" action="/search">
             <FormInput
                 label={formatMessage(translations.search.inputLabel)}
                 type="search"
                 name="query"
                 value={currentRefinement}
-                onChange={(event) => refine(event.currentTarget.value)}
+                onChange={handleChange}
                 className={styles.input}
                 placeholder={formatMessage(translations.search.inputHint, { inputHintExtra: '' })}
                 autoComplete="off"