feat: Add Personalized Recommendations (experimental) by raed667 · Pull Request #174 · algolia/recommend

raed667 · 2024-01-16T13:20:04Z

Personalized recommendations

We want to add experimental support for personalized recommendations, using Algolia Personalization "Classic"

This is an experimental UI library implementation that stitches together existing APIs.

A reference guide will also be shared for users who want to implement this in the flavor of their choice.

How to use

To enable personalisation with recommend, you'll need to import from /experimental-personalization like the following:

JavaScript

import { trendingItems } from '@algolia/recommend-js/dist/esm/experimental-personalization';

trendingItems({
  region: 'eu', // "eu" | "us"
  userToken: 'user_token',
  indexName: "indexName"
  // ...

Or by using a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend-js/dist/umd/experimental-personalization/index.js"></script>

React

import { TrendingItems } from '@algolia/recommend-react/dist/esm/experimental-personalization';

<TrendingItems
  region="eu" // "eu" | "us"
  userToken="user_token"
  indexName="indexName"
  // ...

Or by using a standalone endpoint:

<script src="https://cdn.jsdelivr.net/npm/@algolia/recommend-react/dist/umd/experimental-personalization/index.js"></script>

We avoid using the pre-existing queryParameters for userToken to avoid unexpected side-effects as well as possible semantic-versioning headaches if/when personalized recommendations is supported by the Recommend API and the experimental parameter is removed.

Parameters

The following parameters are all required for personalization:

region : Personalization data is stored and processed in a specific region. You can check the region for your account in the Algolia dashboard.
userToken : Associates a certain user token with the current query learn more
suppressExperimentalWarning: (optional) boolean parameter to disable the experimental console warning message.

Notes

When using recommend-react: if the Recommend context is used for batching, the userToken passed to the component take precedence over the one passed to the context. (ie if you pass 2 different user-tokens between the context provider and the recommend component, the one from the component is used)
When using the <Recommend> React context provider, you will need to import all the components from /experimental-personalization.
Caching is proposed in a stacked PR feat: Add Personalized Recommendations (cache) #175

github-actions · 2024-01-16T13:22:12Z

PR Preview Action v1.4.6
Preview removed because the pull request was closed.
2024-02-01 10:14 UTC

francoischalifour

We gonna need some tests for all components to make sure that

the correct search parameters are sent
the correct warnings trigger
the correct errors trigger

francoischalifour · 2024-01-31T09:42:06Z

 );

-function useFrequentlyBoughtTogether<TObject>(
+export function useFrequentlyBoughtTogether<TObject>(


Just bringing awareness that this will now be exported from the package, which isn't part of the contract. (Could be fine as long as we don't document it, so we can remove it after the experimental package is removed.)

francoischalifour · 2024-01-31T09:46:16Z

+  if (queries.length === 0) {
+    return Promise.resolve({ recommendations: [] });
+  }


I guess that's fine but there's no way back after we release it this way. What used to be an API error now fails silently.

Haroenv

interesting approach, I think it works overall

Haroenv · 2024-01-31T17:46:25Z

  TrendingItems,
  RecommendedForYou,
-} from '@algolia/recommend-react';
+} from '@algolia/recommend-react/dist/esm/experimental-personalization';


Suggested change

} from '@algolia/recommend-react/dist/esm/experimental-personalization';

} from '@algolia/recommend-react/experimental-personalization';

this would be possible with exports in package.json (but not sure if it's worth it of course)

Good catch, i thought about adding some config for it, but for a beta feature where we will guide the initial clients during the setup, i don't think it is really needed.

alternatively if you put it directly in a experimental-personalization folder instead of inside dist/esm, that should work too, but again, same considerations apply.

Haroenv · 2024-01-31T17:49:54Z

@@ -0,0 +1,45 @@
+import { PersonalizationProps } from '@algolia/recommend-core';


what do you think about adding a readme to this folder that explains what to remove once it's done?

Theoretically everything will be removed, as this will be part of the regular API calls, and the userToken will be part of queryParameters

Haroenv · 2024-02-01T08:46:51Z

-    <Recommend recommendClient={recommendClient}>
+    <>
      <TrendingFacets
+        recommendClient={recommendClient}


does this have a reason to move the client out of the provider? Can you not mix Recommend from regular RecommendReact with the experimental one? Is there a good error message if it's mixed?

I just wanted to show 2 ways to use Recommend with the Context Provider (PDP) and without (HomePage).

And yes if you're using the Recommend Context (like the PDP), you will need to import all components from /experimental-personalization

So is there a clear error if you use the regular provider with the experimental components? I didn't see it in the files.

I just added a note in the PR description (that will go also in the release note). Again this is something we can guide the beta clients through their implementation.

feat: Add Personalized Recommendations (experimental)

fede866

raed667 mentioned this pull request Jan 16, 2024

feat: Add Personalized Recommendations (experimental) #167

Closed

raed667 added 3 commits January 16, 2024 14:44

fix recommend-js double call

f88283f

implement react perso+batch

e6fa451

add batching user agent

f0ed3b4

raed667 requested review from francoischalifour and marialungu January 17, 2024 06:45

bundlesize

4b5e53d

francoischalifour reviewed Jan 17, 2024

View reviewed changes

raed667 added 8 commits January 17, 2024 14:18

rename folder

aa91f6f

rename isPersonalized to isPersonalizationEnabled

dbb658d

error management and tests

b4fa780

add fbt test

c75271c

export hooks from recommend-js

a11ed52

update js demo with personalization

843ebab

prevent requests from running if no objectIDs or indexName is set

75f5b26

refactor recommend-js to call hook

b717770

raed667 commented Jan 18, 2024

View reviewed changes

Comment thread packages/recommend-core/src/getTrendingItems.ts

raed667 added 4 commits January 18, 2024 15:37

add getPersonalizationProps

0cceedb

add experimental-personalization recommend-js tests

c9ffcf7

add experimental-personalization recommend-react tests

05e8cf6

adjust bundle size

34e0a0c

marialungu approved these changes Jan 29, 2024

View reviewed changes

raed667 added 2 commits January 29, 2024 13:51

Merge branch 'next' into feat-personalized-recommend-v2

3d6eadf

final bundlesize

d143a3d

francoischalifour reviewed Jan 31, 2024

View reviewed changes

raed667 added 2 commits January 31, 2024 12:11

add Experimental Warning

1e339ac

feedback: move exported Recommend context helper function

f20c37e

raed667 added 2 commits January 31, 2024 12:26

bundlesize

5af8880

update react demo

c75dcf5

raed667 requested review from francoischalifour and marialungu January 31, 2024 11:30

raed667 added 3 commits January 31, 2024 13:57

remove forgotten import in demo

8d63692

Merge branch 'next' into feat-personalized-recommend-v2

26e8688

clean playground

cbe0e7f

Haroenv reviewed Feb 1, 2024

View reviewed changes

raed667 merged commit 9ed2bfc into next Feb 1, 2024

raed667 deleted the feat-personalized-recommend-v2 branch February 1, 2024 10:12

	} from '@algolia/recommend-react/dist/esm/experimental-personalization';
	} from '@algolia/recommend-react/experimental-personalization';

		@@ -0,0 +1,45 @@
		import { PersonalizationProps } from '@algolia/recommend-core';

Conversation

raed667 commented Jan 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Personalized recommendations

How to use

JavaScript

React

Parameters

Notes

Uh oh!

github-actions Bot commented Jan 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

francoischalifour left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Haroenv left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

raed667 commented Jan 16, 2024 •

edited

Loading

github-actions Bot commented Jan 16, 2024 •

edited

Loading