Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Implement feedback on pixel analytics instrumentation #43

Merged
merged 3 commits into from
Oct 10, 2024
Merged

fix: Implement feedback on pixel analytics instrumentation #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76c33a4
fix: Implement feedback on pixel analytics instrumentation
Oct 9, 2024
f902dc2
docs: Add link to open pixel code sample in stackblitz
Oct 9, 2024
a3fd07b
fix: lint fixes
Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 10 additions & 2 deletions examples/pixel/src/app/DeveloperToolbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
1 change: 0 additions & 1 deletion examples/pixel/src/app/categories/[id]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 2 additions & 2 deletions examples/pixel/src/app/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down Expand Up @@ -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>
</>
)}
Expand Down
4 changes: 2 additions & 2 deletions examples/pixel/src/app/products/[id]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
1 change: 0 additions & 1 deletion examples/pixel/src/components/ItemBasedRecommendationsWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ export function ItemBasedRecommendationsWidget({ title = 'Similar products', wid
});
}, [data]);


if (!data?.response) {
return null;
}
Expand Down
1 change: 0 additions & 1 deletion examples/pixel/src/components/PersonalizedWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export function PersonalizedWidget({ widgetId, title = 'Recently viewed products
});
}, [data]);


if (!data?.response) {
return null;
}
Expand Down
21 changes: 16 additions & 5 deletions examples/pixel/src/hooks/useAnalytics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
};
Expand All @@ -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 = {
Expand Down Expand Up @@ -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,
};
Expand Down