fix: Implement feedback on pixel analytics instrumentation (#43)

Co-authored-by: Anand Gorantala <[email protected]>
bloomreach · Oct 10, 2024 · d22f5e6 · d22f5e6
1 parent 628ea73
commit d22f5e6
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -6,18 +6,18 @@ This repository holds code samples that demonstrate how to implement the various
 
 ### Discovery
 
-|                       |                                                     |                                                                                                                                                                                               |
-|-----------------------|-----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Search                | [Source](./examples/search/README.md)               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/search)               |
-| Autosuggest           | [Source](./examples/autosuggest/README.md)          | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/autosuggest)          |
-| Recommendations       | [Source](./examples/recommendations/README.md)      | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/recommendations)      |
-| Facets                | [Source](./examples/facets/README.md)               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets)               |
-| Categories            | [Source](./examples/categories/README.md)           | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/categories)           |
-| Dynamic grouping      | [Source](./examples/dynamic-grouping/README.md)     | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/dynamic-grouping)     |
-| Relevance by segment  | [Source](./examples/relevance-by-segment/README.md) | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/relevance-by-segment) |
-| Visual search         | [Source](./examples/visual-search/README.md)        | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/visual-search)        |
-| Multi-language        | [Source](./examples/multi-language/README.md)       | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/multi-language)       |
-| Pixel instrumentation | [Source](./examples/pixel/README.md)                | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/pixel)                |
+| Name                                                              | Tech stack                                    | Preview                                                                                                                                                                                                                                                                                                                                                 |
+|-------------------------------------------------------------------|-----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [Search](./examples/search/README.md)                             | TypeScript, Tailwind CSS, Limitless UI, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/search)                                                                                                                                                                         |
+| [Autosuggest](./examples/autosuggest/README.md)                   | TypeScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/autosuggest)                                                                                                                                                                    |
+| [Recommendations](./examples/recommendations/README.md)           | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/recommendations)                                                                                                                                                                |
+| [Facets](./examples/facets/README.md)                             | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets)                                                                                                                                                                         |
+| [Categories](./examples/categories/README.md)                     | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/categories)                                                                                                                                                                     |
+| [Dynamic grouping](./examples/dynamic-grouping/README.md)         | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/dynamic-grouping)                                                                                                                                                               |
+| [Relevance by segment](./examples/relevance-by-segment/README.md) | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/relevance-by-segment)                                                                                                                                                           |
+| [Visual search](./examples/visual-search/README.md)               | JavaScript, Tailwind CSS, Next.js, React      | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/visual-search)                                                                                                                                                                  |
+| [Multi-language](./examples/multi-language/README.md)             | JavaScript, Tailwind CSS, React               | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/multi-language)                                                                                                                                                                 |
+| [Pixel instrumentation](./examples/pixel/README.md)               | JavaScript, Tailwind CSS, Next.js, React      | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/pixel) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/bloomreach/web-code-samples/tree/main/examples/pixel) |
 
 ## Guidelines for writing a code sample
 

diff --git a/examples/pixel/src/app/DeveloperToolbar.jsx b/examples/pixel/src/app/DeveloperToolbar.jsx
@@ -40,9 +40,17 @@ export function DeveloperToolbar() {
     <>
       {isInIframe ? (
         <Alert type="warning">
-          In the codesandbox iframe preview, the cookie is not set in the correct domain. For the
+          In an online code editor iframe preview, the cookie is not set in the correct domain. For the
           cookie to be set and sent in the pixel events to see the full set of features in this
-          code sample, open the codesandbox preview in a separate window or run the example locally.
+          code sample, open the
+          {' '}
+          <a href="." target="_blank" className="text-blue-600 hover:underline">
+            preview in a separate window
+            {' '}
+            <ExternalLinkIcon size={10} className="inline" />
+          </a>
+          {' '}
+          or run the example locally.
         </Alert>
       ) : null}
       <div className="bg-[#002840]">

diff --git a/examples/pixel/src/app/categories/[id]/page.jsx b/examples/pixel/src/app/categories/[id]/page.jsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import JsonView from '@uiw/react-json-view';
 import { LoaderIcon, Pagination } from '@bloomreach/react-banana-ui';

diff --git a/examples/pixel/src/app/page.jsx b/examples/pixel/src/app/page.jsx
@@ -49,7 +49,7 @@ export default function Home() {
           <div className="font-semibold text-xl my-4 mt-8 opacity-80">Shop by category</div>
           <div className="flex flex-col">
             {showJson ? (
-              <JsonView value={categories} collapsed={1}/>
+              <JsonView value={categories} collapsed={1} />
             ) : (
               <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
                 {categories.map((category) => (
@@ -105,7 +105,7 @@ export default function Home() {
           </div>
 
           <div className="w-full mt-8" ref={ref}>
-            {isIntersecting && (<PersonalizedWidget widgetId={recently_viewed_widget_id}/>)}
+            {isIntersecting && (<PersonalizedWidget widgetId={recently_viewed_widget_id} />)}
           </div>
         </>
       )}

diff --git a/examples/pixel/src/app/products/[id]/page.jsx b/examples/pixel/src/app/products/[id]/page.jsx
@@ -40,8 +40,8 @@ export default function Page({ params }) {
   }, [pid]);
 
   const product = useMemo(() => data?.response?.docs[0], [data]);
-  const sku = useMemo(() => product && product.variants.length ? product.variants[0].skuid : undefined, [product]);
-  const title = useMemo(() => product ? product.title : undefined, [product]);
+  const sku = useMemo(() => ((product && product.variants.length) ? product.variants[0].skuid : undefined), [product]);
+  const title = useMemo(() => (product ? product.title : undefined), [product]);
 
   useEffect(() => {
     if (!pid || !title) {

diff --git a/examples/pixel/src/components/ItemBasedRecommendationsWidget.jsx b/examples/pixel/src/components/ItemBasedRecommendationsWidget.jsx
@@ -33,7 +33,6 @@ export function ItemBasedRecommendationsWidget({ title = 'Similar products', wid
     });
   }, [data]);
 
-
   if (!data?.response) {
     return null;
   }

diff --git a/examples/pixel/src/components/PersonalizedWidget.jsx b/examples/pixel/src/components/PersonalizedWidget.jsx
@@ -22,7 +22,6 @@ export function PersonalizedWidget({ widgetId, title = 'Recently viewed products
     });
   }, [data]);
 
-
   if (!data?.response) {
     return null;
   }

diff --git a/examples/pixel/src/hooks/useAnalytics.js b/examples/pixel/src/hooks/useAnalytics.js
@@ -10,7 +10,6 @@ function useAnalytics() {
   const [events, setEvents] = useLocalStorage('BrPixelDemoAnalytics', []);
   const [userId, setUserId] = useLocalStorage('BrPixelDemoUserId', '');
   const [eventsCount, setEventsCount] = useState(0);
-  const pathname = usePathname();
 
   useEffect(() => {
     setEventsCount(events.length);
@@ -27,7 +26,7 @@ function useAnalytics() {
         acct_id: account_id,
         domain_key,
         user_id: userId,
-        orig_ref_url: `${window.location.origin}${pathname}`,
+        explicit_referrer: window.__BR_PRIOR_REFERRER__ ? window.__BR_PRIOR_REFERRER__ : document.referrer,
       },
       ...data,
     };
@@ -44,27 +43,37 @@ function useAnalytics() {
           prod_name: data.title,
           sku: data.sku,
         };
+        // for initial load, when the tracker script has not loaded, this will ensure that the view event
+        // fires after the tracker script loads
+        window.br_data = constructPayload(payload);
         window.BrTrk?.getTracker().updateBrData(constructPayload(payload));
         window.BrTrk?.getTracker().logPageView();
+        window.__BR_PRIOR_REFERRER__ = window.location.href;
         break;
       case 'view_category':
         payload = {
           ptype: 'category',
           cat_id: data.cat_id,
           cat: data.cat_crumb,
         };
+        // for initial load, when the tracker script has not loaded, this will ensure that the view event
+        // fires after the tracker script loads
+        window.br_data = constructPayload(payload);
         window.BrTrk?.getTracker().updateBrData(constructPayload(payload));
         window.BrTrk?.getTracker().logPageView();
-
+        window.__BR_PRIOR_REFERRER__ = window.location.href;
         break;
       case 'view_search':
         payload = {
           ptype: 'search',
           search_term: data.query,
         };
-
+        // for initial load, when the tracker script has not loaded, this will ensure that the view event
+        // fires after the tracker script loads
+        window.br_data = constructPayload(payload);
         window.BrTrk?.getTracker().updateBrData(constructPayload(payload));
         window.BrTrk?.getTracker().logPageView();
+        window.__BR_PRIOR_REFERRER__ = window.location.href;
         break;
       case 'view_conversion':
         payload = {
@@ -134,15 +143,17 @@ function useAnalytics() {
         payload = {
           wid: data.widgetId,
           wty: data.widgetType,
+          wq: data.widgetQuery, // Applicable for query widgets like search, category, past_purchases widgets
           wrid: data.widgetRequestId,
         };
 
-        window.BrTrk?.getTracker().logEvent('widget', 'widget-view', constructPayload(payload), true);
+        window.BrTrk?.getTracker().logEvent('widget', 'widget-view', constructPayload(payload));
         break;
       case 'event_widgetClick':
         payload = {
           wid: data.widgetId,
           wty: data.widgetType,
+          wq: data.widgetQuery, // Applicable for query widgets like search, category, past_purchases widgets
           wrid: data.widgetRequestId,
           item_id: data.itemId,
         };