From 76c33a42cabc4dee7a1b9bbc9692428132fb29a2 Mon Sep 17 00:00:00 2001 From: Anand Gorantala Date: Wed, 9 Oct 2024 12:46:35 -0700 Subject: [PATCH 1/3] fix: Implement feedback on pixel analytics instrumentation --- README.md | 24 ++++++++++++------------ examples/pixel/src/hooks/useAnalytics.js | 20 ++++++++++++++++---- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 13f650c..7ae7318 100644 --- 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) | ## Guidelines for writing a code sample diff --git a/examples/pixel/src/hooks/useAnalytics.js b/examples/pixel/src/hooks/useAnalytics.js index 07d9554..db8a61f 100644 --- a/examples/pixel/src/hooks/useAnalytics.js +++ b/examples/pixel/src/hooks/useAnalytics.js @@ -27,7 +27,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,8 +44,12 @@ 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 = { @@ -53,18 +57,24 @@ function useAnalytics() { 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 +144,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, }; From f902dc28dbcc2561edd43a980031806f42acc66e Mon Sep 17 00:00:00 2001 From: Anand Gorantala Date: Wed, 9 Oct 2024 16:04:27 -0700 Subject: [PATCH 2/3] docs: Add link to open pixel code sample in stackblitz --- README.md | 24 ++++++++++----------- examples/pixel/src/app/DeveloperToolbar.jsx | 8 +++++-- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 7ae7318..b10394b 100644 --- a/README.md +++ b/README.md @@ -6,18 +6,18 @@ This repository holds code samples that demonstrate how to implement the various ### Discovery -| 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) | +| 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 index c71982e..6806125 100644 --- a/examples/pixel/src/app/DeveloperToolbar.jsx +++ b/examples/pixel/src/app/DeveloperToolbar.jsx @@ -40,9 +40,13 @@ export function DeveloperToolbar() { <> {isInIframe ? ( - 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 {' '} + + preview in a separate window + {' '} + or run the example locally. ) : null}
From a3fd07bbd797a4e7d11c82fe0db4bc9354068edb Mon Sep 17 00:00:00 2001 From: Anand Gorantala Date: Wed, 9 Oct 2024 16:12:38 -0700 Subject: [PATCH 3/3] fix: lint fixes --- examples/pixel/src/app/DeveloperToolbar.jsx | 12 ++++++++---- examples/pixel/src/app/categories/[id]/page.jsx | 1 - examples/pixel/src/app/page.jsx | 4 ++-- examples/pixel/src/app/products/[id]/page.jsx | 4 ++-- .../components/ItemBasedRecommendationsWidget.jsx | 1 - examples/pixel/src/components/PersonalizedWidget.jsx | 1 - examples/pixel/src/hooks/useAnalytics.js | 1 - 7 files changed, 12 insertions(+), 12 deletions(-) diff --git a/examples/pixel/src/app/DeveloperToolbar.jsx b/examples/pixel/src/app/DeveloperToolbar.jsx index 6806125..6dafaa9 100644 --- a/examples/pixel/src/app/DeveloperToolbar.jsx +++ b/examples/pixel/src/app/DeveloperToolbar.jsx @@ -42,10 +42,14 @@ export function DeveloperToolbar() { 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 {' '} - - preview in a separate window - {' '} + code sample, open the + {' '} + + preview in a separate window + {' '} + + + {' '} or run the example locally. ) : null} diff --git a/examples/pixel/src/app/categories/[id]/page.jsx b/examples/pixel/src/app/categories/[id]/page.jsx index aac2271..de0dfb1 100644 --- 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 index 38277cc..e0a7f43 100644 --- a/examples/pixel/src/app/page.jsx +++ b/examples/pixel/src/app/page.jsx @@ -49,7 +49,7 @@ export default function Home() {
Shop by category
{showJson ? ( - + ) : (
{categories.map((category) => ( @@ -105,7 +105,7 @@ export default function Home() {
- {isIntersecting && ()} + {isIntersecting && ()}
)} diff --git a/examples/pixel/src/app/products/[id]/page.jsx b/examples/pixel/src/app/products/[id]/page.jsx index 50553be..332060e 100644 --- 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 index e7a9d1a..d208581 100644 --- 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 index 173a7ce..4be3932 100644 --- 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 index db8a61f..c250ceb 100644 --- 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);