[polaris.shopify.com] Capture search data with google analytics (#8602)

Yuraima Estevez · web-flow · commit 575b351d514b · 2023-03-09T08:48:22.000-06:00
📣 Still in draft because I want to figure out how to set up a dev environment in google analytics. I don't think that's necessary for this and I think it will take more time than I want to invest in something that we only need for a week or two but just calling it out. ### WHY are these changes introduced? We want to capture search data for about 2 weeks to help establish a baseline for our search feature on polaris.shopify.com  ### WHAT is this pull request doing? * adding a new utility to the GlobalSearch to send a `customSearch` event to google analytics * `customSearch` tracks the `searchTerm`, `rank`, and `selectedResult` whenever a user selects a search result or exits the search modal ⚠️ This isn't the DRYest or most sophisticated code... but this is a very limited test we're doing in order to establish a baseline for a future (but not directly related) project. It didn't seem like a good investment to refactor the GlobalSearch for such a small need. I can rip this code out once we get the data we're hoping to capture.  ### How to 🎩 Test the following scenarios: * click on a provided search result * use the keyboard to select a search result * type out a search query and then exit the modal without selecting any result For all of these scenarios you need to check the google `dataLayer` object in the dev console. selecting a search result should add the `searchTerm`, `rank`, and `selectedResult` to the `customSearch` object in the `dataLay` <img width="438" alt="Screenshot 2023-03-08 at 4 55 00 PM" src="https://user-images.githubusercontent.com/4642404/223869996-95876d42-4052-439f-ac50-8e44a52e3a24.png"> closing the modal without selecting a result will create an object with `rank` equal to `0` and an empty `selectedResult` <img width="228" alt="Screenshot 2023-03-08 at 4 56 17 PM" src="https://user-images.githubusercontent.com/4642404/223870206-f4c80202-e19f-4c90-b989-2f5f02849097.png"> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
diff --git a/.changeset/swift-cycles-happen.md b/.changeset/swift-cycles-happen.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Added search tracking using google analytics
diff --git a/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx b/polaris.shopify.com/src/components/GlobalSearch/GlobalSearch.tsx
@@ -43,6 +43,22 @@ function scrollToTop() {
   overflowEl?.scrollTo({top: 0, behavior: 'smooth'});
 }
 
+function captureSearchEvent(
+  searchTerm: string,
+  resultRank: number,
+  selectedResult?: string,
+) {
+  const eventParams = {
+    searchTerm,
+    resultRank,
+    selectedResult,
+  };
+
+  if (searchTerm) {
+    window.gtag('event', 'customSearch', eventParams);
+  }
+}
+
 function scrollIntoView() {
   const overflowEl = document.querySelector(`.${styles.ResultsInner}`);
   const highlightedEl = document.querySelector(
@@ -152,6 +168,7 @@ function GlobalSearch() {
         if (resultsInRenderedOrder.length > 0) {
           setIsOpen(false);
           const url = resultsInRenderedOrder[currentResultIndex].url;
+          captureSearchEvent(searchTerm, currentResultIndex + 1, url);
           router.push(url);
         }
         break;
@@ -171,7 +188,14 @@ function GlobalSearch() {
         Search <span className={styles.KeyboardShortcutHint}>/</span>
       </button>
 
-      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
+      <Dialog
+        open={isOpen}
+        onClose={() => {
+          setIsOpen(false);
+          // on close we want to capture that no search result was selected
+          captureSearchEvent(searchTerm, 0);
+        }}
+      >
         <div className={styles.PreventBackgroundInteractions}></div>
         <div className="dark-mode styles-for-site-but-not-polaris-examples">
           <Dialog.Panel className={styles.Results}>
@@ -213,6 +237,8 @@ function GlobalSearch() {
                 <SearchResults
                   searchResults={searchResults}
                   currentItemId={currentItemId}
+                  searchTerm={searchTerm}
+                  resultsInRenderedOrder={resultsInRenderedOrder}
                 />
               )}
             </div>
@@ -226,9 +252,13 @@ function GlobalSearch() {
 function SearchResults({
   searchResults,
   currentItemId,
+  searchTerm,
+  resultsInRenderedOrder,
 }: {
   searchResults: GroupedSearchResults;
   currentItemId: string;
+  searchTerm?: string;
+  resultsInRenderedOrder: SearchResults;
 }) {
   return (
     <>
@@ -243,6 +273,12 @@ function SearchResults({
                     if (!meta.foundations) return null;
                     const {title, description, icon, category} =
                       meta.foundations;
+                    const resultIndex = resultsInRenderedOrder.findIndex(
+                      (r) => {
+                        return r.id === id;
+                      },
+                    );
+                    const rank = resultIndex + 1; // zero-indexed
                     return (
                       <SearchContext.Provider
                         key={title}
@@ -252,6 +288,10 @@ function SearchResults({
                           title={title}
                           description={description}
                           url={url}
+                          customOnClick={() =>
+                            searchTerm &&
+                            captureSearchEvent(searchTerm, rank, url)
+                          }
                           renderPreview={() => (
                             <FoundationsThumbnail
                               icon={icon}
@@ -273,6 +313,12 @@ function SearchResults({
                   {results.map(({id, url, meta}) => {
                     if (!meta.patterns) return null;
                     const {title, description, previewImg} = meta.patterns;
+                    const resultIndex = resultsInRenderedOrder.findIndex(
+                      (r) => {
+                        return r.id === id;
+                      },
+                    );
+                    const rank = resultIndex + 1;
                     return (
                       <SearchContext.Provider
                         key={id}
@@ -282,6 +328,10 @@ function SearchResults({
                           url={url}
                           description={description}
                           title={title}
+                          customOnClick={() =>
+                            searchTerm &&
+                            captureSearchEvent(searchTerm, rank, url)
+                          }
                           renderPreview={() => (
                             <PatternThumbnailPreview
                               alt={title}
@@ -304,6 +354,12 @@ function SearchResults({
                   {results.map(({id, url, meta}) => {
                     if (!meta.components) return null;
                     const {title, description, status, group} = meta.components;
+                    const resultIndex = resultsInRenderedOrder.findIndex(
+                      (r) => {
+                        return r.id === id;
+                      },
+                    );
+                    const rank = resultIndex + 1;
                     return (
                       <SearchContext.Provider
                         key={id}
@@ -314,6 +370,10 @@ function SearchResults({
                           description={description}
                           title={title}
                           status={status}
+                          customOnClick={() =>
+                            searchTerm &&
+                            captureSearchEvent(searchTerm, rank, url)
+                          }
                           renderPreview={() => (
                             <ComponentThumbnail title={title} group={group} />
                           )}
@@ -342,12 +402,24 @@ function SearchResults({
                   {results.map(({id, meta}) => {
                     if (!meta.tokens) return null;
                     const {token, category} = meta.tokens;
+                    const resultIndex = resultsInRenderedOrder.findIndex(
+                      (r) => {
+                        return r.id === id;
+                      },
+                    );
+                    const rank = resultIndex + 1;
                     return (
                       <SearchContext.Provider
                         key={id}
                         value={{currentItemId, id}}
                       >
-                        <TokenList.Item category={category} token={token} />
+                        <TokenList.Item
+                          category={category}
+                          token={token}
+                          customOnClick={captureSearchEvent}
+                          searchTerm={searchTerm}
+                          rank={rank}
+                        />
                       </SearchContext.Provider>
                     );
                   })}
@@ -363,12 +435,23 @@ function SearchResults({
                   {results.map(({id, meta}) => {
                     if (!meta.icons) return null;
                     const {icon} = meta.icons;
+                    const resultIndex = resultsInRenderedOrder.findIndex(
+                      (r) => {
+                        return r.id === id;
+                      },
+                    );
+                    const rank = resultIndex + 1;
                     return (
                       <SearchContext.Provider
                         key={id}
                         value={{currentItemId, id}}
                       >
-                        <IconGrid.Item icon={icon} />
+                        <IconGrid.Item
+                          icon={icon}
+                          customOnClick={captureSearchEvent}
+                          searchTerm={searchTerm}
+                          rank={rank}
+                        />
                       </SearchContext.Provider>
                     );
                   })}
diff --git a/polaris.shopify.com/src/components/Grid/Grid.tsx b/polaris.shopify.com/src/components/Grid/Grid.tsx
@@ -66,25 +66,39 @@ export interface GridItemProps {
   deepLinks?: {url: string; text: string}[];
   renderPreview?: () => React.ReactNode;
   status?: Status;
+  customOnClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  searchQuery?: string;
+  rank?: number;
 }
 
 export const GridItem = forwardRef(
   (
-    {as = 'li', title, description, url, deepLinks, renderPreview, status},
+    {
+      as = 'li',
+      title,
+      description,
+      url,
+      deepLinks,
+      renderPreview,
+      status,
+      customOnClick,
+    },
     ref,
   ) => {
     const searchAttributes = useGlobalSearchResult();
     return (
       <Box as={as} ref={ref} className={styles.GridItem} {...searchAttributes}>
-        <Link href={url} className={styles.Text}>
-          <SearchResultHighlight />
-          {renderPreview && (
-            <div className={styles.Preview}>{renderPreview()}</div>
-          )}
-          <h4>
-            {title} {status && <StatusBadge status={status} />}
-          </h4>
-          <p>{stripMarkdownLinks(description || '')}</p>
+        <Link legacyBehavior href={url} className={styles.Text}>
+          <a onClick={customOnClick}>
+            <SearchResultHighlight />
+            {renderPreview && (
+              <div className={styles.Preview}>{renderPreview()}</div>
+            )}
+            <h4>
+              {title} {status && <StatusBadge status={status} />}
+            </h4>
+            <p>{stripMarkdownLinks(description || '')}</p>
+          </a>
         </Link>
         {deepLinks && (
           <ul className={styles.DeepLinks}>
diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
@@ -27,15 +27,26 @@ interface IconGridItemProps {
   icon: IconType;
   query?: string;
   activeIcon?: string;
+  customOnClick?: Function;
+  rank?: number;
+  searchTerm?: string;
 }
 
-function IconGridItem({icon, activeIcon, query}: IconGridItemProps) {
+function IconGridItem({
+  icon,
+  activeIcon,
+  query,
+  customOnClick,
+  rank,
+  searchTerm,
+}: IconGridItemProps) {
   const {id, name} = icon;
   const searchAttributes = useGlobalSearchResult();
 
   return (
     <li key={id}>
       <Link
+        legacyBehavior
         href={{
           pathname: '/icons',
           query: {
@@ -51,9 +62,16 @@ function IconGridItem({icon, activeIcon, query}: IconGridItemProps) {
         id={icon.id}
         {...searchAttributes}
       >
-        <SearchResultHighlight />
-        <Icon source={(polarisIcons as any)[id]} />
-        <p>{name}</p>
+        <a
+          onClick={() =>
+            customOnClick &&
+            customOnClick(searchTerm, rank, `/icons?icon=${id}`)
+          }
+        >
+          <SearchResultHighlight />
+          <Icon source={(polarisIcons as any)[id]} />
+          <p>{name}</p>
+        </a>
       </Link>
     </li>
   );
diff --git a/polaris.shopify.com/src/components/TokenList/TokenList.tsx b/polaris.shopify.com/src/components/TokenList/TokenList.tsx
@@ -124,18 +124,29 @@ function getFigmaUsageForToken(
 interface TokenListItemProps {
   category: string;
   token: TokenPropertiesWithName;
+  customOnClick?: Function;
+  searchTerm?: string;
+  rank?: number;
 }
 
 function TokenListItem({
   category,
   token: {name, value, description},
+  customOnClick,
+  searchTerm,
+  rank,
 }: TokenListItemProps) {
   const figmaUsage = getFigmaUsageForToken(name, value);
   const tokenNameWithPrefix = `--p-${name}`;
   const [copy, didJustCopy] = useCopyToClipboard(tokenNameWithPrefix);
 
   const searchAttributes = useGlobalSearchResult();
   const isClickableSearchResult = !!searchAttributes?.tabIndex;
+  const url = `/tokens/${category}#${searchAttributes?.id}`;
+
+  const customOnClickHandler = () => {
+    customOnClick && customOnClick(searchTerm, rank, url);
+  };
 
   return (
     <TokenListContext.Consumer>
@@ -152,11 +163,12 @@ function TokenListItem({
               <TokenPreview name={name} value={value} />
               {isClickableSearchResult && (
                 <Link
-                  href={`/tokens/${category}#${searchAttributes?.id}`}
+                  href={url}
                   className={styles.ClickableItemLink}
                   tabIndex={-1}
+                  legacyBehavior
                 >
-                  View token
+                  <a onClick={customOnClickHandler}>View token</a>
                 </Link>
               )}
             </td>
@@ -177,7 +189,10 @@ function TokenListItem({
                     )}
                   >
                     <button
-                      onClick={copy}
+                      onClick={() => {
+                        copy();
+                        customOnClickHandler();
+                      }}
                       tabIndex={searchAttributes?.tabIndex}
                     >
                       <Icon source={ClipboardMinor} width={14} height={14} />

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'polaris.shopify.com': patch
 +---
++
 +Added search tracking using google analytics