@graphcommerce/algolia-personalization 9.0.0-canary.73 → 9.0.0-canary.74

package/CHANGELOG.md

@@ -1,3 +1,5 @@
 # @graphcommerce/algolia-personalization
 
+## 9.0.0-canary.74
+
 ## 9.0.0-canary.73

package/Config.graphqls

@@ -0,0 +1,10 @@
+extend input GraphCommerceAlgoliaConfig {
+  """
+  Send algolia analytics events.
+  """
+  analyticsEnabled: Boolean
+  """
+  Enable personalized queries.
+  """
+  personalizationEnabled: Boolean
+}

package/README.md

@@ -1,7 +1,36 @@
 # Algolia Magento 2
 
-An implementation of Algolia personalization through the GraphQL Mesh.
+An implementation of Algolia personalization/Analytics through the GraphQL Mesh.
 
 ## Prerequisites
 
-Make sure you have configured @graphcommerce/algolia-mesh
+1. Make sure you have configured @graphcommerce/algolia-mesh.
+2. As this is an extension of the google-datalayer. Make sure you have installed
+   @graphcommerce/google-datalayer
+
+## Installation
+
+1. Find current version of your `@graphcommerce/next-ui` in your package.json.
+2. `yarn add @graphcommerce/algolia-personalization@9.0.0` (replace 9.0.0 with
+   the version of the step above)
+
+## Configuration
+
+1. See [Config](./Config.graphqls) for the configuration values. Add the
+   following to your graphcommerce.config.js:
+
+   ```js
+   const config = {
+     // Even if you do not use personalization, enabling analytics still allows you to track events in Algolia.
+     algoliaEnableAnalytics: true,
+     algoliaPersonalizationEnabled: true,
+   }
+   ```
+
+2. In your algolia dashboard make sure, you have personalization enabled.
+3. Continue to browse the site, and make sure your events are logged in de event
+   debugger in your algolia dashboard. In the under left corner.
+   `Data Sources > Events > Debugger`. Once you've collected several events, you
+   can start configuring personalization
+4. in `Enchance > personalization` setup the strategies. Note: if you can't find
+   some events, make sure you have send several.

package/hooks/useSendAlgoliaEvent.ts

@@ -19,6 +19,8 @@ const getSHA256Hash = async (input: string) => {
   return hash
 }
 
+export const ALGOLIA_USER_TOKEN_COOKIE_NAME = '_algolia_userToken'
+
 function mapSelectedFiltersToAlgoliaEvent(filters: ProductFilterParams['filters']) {
   const flattenedFilters: string[] = []
 
@@ -88,7 +90,6 @@ const dataLayerToAlgoliaMap: {
 
     const events: AlgoliaEventsItems_Input[] = []
 
-    console.log(queryID)
     if (
       // Values of filters are different when using Algolia vs Magento, thus it does not make sense to send the filters
       queryID &&
@@ -100,7 +101,7 @@ const dataLayerToAlgoliaMap: {
       const newlyAppliedFilters = filters.filter((filter) => !prevFilters.includes(filter))
       prevFilters = filters
 
-      if (newlyAppliedFilters) {
+      if (newlyAppliedFilters.length > 0) {
         events.push({
           Clicked_filters_Input: {
             eventName: `${eventName}_filter_diff`,
@@ -309,7 +310,6 @@ export function useSendAlgoliaEvent() {
   const client = useApolloClient()
   const index = useAlgoliaIndexName()
   const algoliaQuery = useAlgoliaQuery()
-  console.log(algoliaQuery)
 
   const eventsBuffer = useRef<AlgoliaEventsItems_Input[]>([])
   const submit = useDebounce(
@@ -350,16 +350,16 @@ export function useSendAlgoliaEvent() {
   return useEventCallback<typeof sendEvent>(async (eventName, eventData) => {
     const email = client.cache.readQuery({ query: CustomerDocument })?.customer?.email
     const authenticatedUserToken = email ? await getSHA256Hash(email) : undefined
-    let userToken = cookie('_algolia_userToken')
+    let userToken = cookie(ALGOLIA_USER_TOKEN_COOKIE_NAME)
     if (!userToken) {
       userToken = (Math.random() + 1).toString(36).substring(2)
-      cookie('_algolia_userToken', userToken, { sameSite: true })
+      cookie(ALGOLIA_USER_TOKEN_COOKIE_NAME, userToken, { sameSite: true })
     }
 
     // todo check if valid
-    if (authenticatedUserToken) {
-      userToken = authenticatedUserToken
-    }
+    // if (authenticatedUserToken) {
+    //   userToken = authenticatedUserToken
+    // }
 
     const events = dataLayerToAlgoliaMap[eventName]?.(eventName, eventData, {
       index,

package/mesh/getUserToken.ts

@@ -0,0 +1,12 @@
+import { MeshContext } from '@graphcommerce/graphql-mesh'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { parse } from 'cookie'
+
+const ALGOLIA_USER_TOKEN_COOKIE_NAME = '_algolia_userToken'
+export function getUserToken(context: MeshContext): string | undefined {
+  const { headers } = context as MeshContext & { headers?: Record<string, string | undefined> }
+
+  const cookie = headers?.cookie
+  if (cookie) return parse(cookie)[ALGOLIA_USER_TOKEN_COOKIE_NAME]
+  return undefined
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/algolia-personalization",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.73",
+  "version": "9.0.0-canary.74",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,14 +15,14 @@
     "generate-insights": "tsx scripts/generate-insights-spec.mts"
   },
   "peerDependencies": {
-    "@graphcommerce/algolia-mesh": "^9.0.0-canary.73",
-    "@graphcommerce/google-datalayer": "^9.0.0-canary.73",
-    "@graphcommerce/graphql": "^9.0.0-canary.73",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.73",
-    "@graphcommerce/magento-customer": "^9.0.0-canary.73",
-    "@graphcommerce/magento-product": "^9.0.0-canary.73",
-    "@graphcommerce/next-config": "^9.0.0-canary.73",
-    "@graphcommerce/next-ui": "^9.0.0-canary.73",
+    "@graphcommerce/algolia-mesh": "^9.0.0-canary.74",
+    "@graphcommerce/google-datalayer": "^9.0.0-canary.74",
+    "@graphcommerce/graphql": "^9.0.0-canary.74",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.74",
+    "@graphcommerce/magento-customer": "^9.0.0-canary.74",
+    "@graphcommerce/magento-product": "^9.0.0-canary.74",
+    "@graphcommerce/next-config": "^9.0.0-canary.74",
+    "@graphcommerce/next-ui": "^9.0.0-canary.74",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/plugins/InContextInputAlgoliaUserToken.ts

@@ -0,0 +1,32 @@
+import {
+  type getInContextInput as getInContextInputType,
+  type useInContextInput as useInContextInputType,
+} from '@graphcommerce/graphql'
+import type { InContextInput } from '@graphcommerce/graphql-mesh'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { cookie } from '@graphcommerce/next-ui'
+import { ALGOLIA_USER_TOKEN_COOKIE_NAME } from '../hooks/useSendAlgoliaEvent'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/graphql',
+  ifConfig: 'algolia.personalizationEnabled',
+}
+
+export const getInContextInput: FunctionPlugin<typeof getInContextInputType> = (
+  prev,
+  client,
+  ...args
+) => {
+  const algoliaUserToken = cookie(ALGOLIA_USER_TOKEN_COOKIE_NAME)
+  const res = prev(client, ...args)
+  if (!algoliaUserToken) return res
+  return { ...res, algoliaUserToken } satisfies InContextInput
+}
+
+export const useInContextInput: FunctionPlugin<typeof useInContextInputType> = (prev, ...args) => {
+  const algoliaUserToken = cookie(ALGOLIA_USER_TOKEN_COOKIE_NAME)
+  const res = prev(...args)
+  if (!algoliaUserToken) return res
+  return { ...res, algoliaUserToken }
+}

package/plugins/getSearchResultsAnalytics.ts

@@ -0,0 +1,20 @@
+import type { getSearchResultsInput as getSearchResultsInputType } from '@graphcommerce/algolia-mesh'
+import { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { getUserToken } from '../mesh/getUserToken'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/algolia-mesh',
+  ifConfig: 'algolia.personalizationEnabled',
+}
+
+export const getSearchResultsInput: FunctionPlugin<typeof getSearchResultsInputType> = async (
+  prev,
+  args,
+  context,
+) => ({
+  ...(await prev(args, context)),
+  clickAnalytics: true,
+  analytics: true,
+  userToken: getUserToken(context),
+})

package/plugins/getSearchResultsPersonalization.ts

@@ -0,0 +1,18 @@
+import type { getSearchResultsInput as getSearchResultsInputType } from '@graphcommerce/algolia-mesh'
+import { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/algolia-mesh',
+  ifConfig: 'algolia.personalizationEnabled',
+}
+
+export const getSearchResultsInput: FunctionPlugin<typeof getSearchResultsInputType> = async (
+  prev,
+  args,
+  context,
+) => ({
+  ...(await prev(args, context)),
+  // enablePersonalization: true,
+  // personalizationImpact: 50,
+})

package/plugins/getSearchSuggestionsAnalytics.ts

@@ -0,0 +1,18 @@
+import type { getSearchSuggestionsInput as getSearchSuggestionsInputType } from '@graphcommerce/algolia-mesh'
+import { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+import { getUserToken } from '../mesh/getUserToken'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/algolia-mesh',
+  ifConfig: 'algolia.analyticsEnabled',
+}
+
+export const getSearchSuggestionsInput: FunctionPlugin<
+  typeof getSearchSuggestionsInputType
+> = async (prev, search, context) => ({
+  ...(await prev(search, context)),
+  clickAnalytics: true,
+  analytics: true,
+  userToken: getUserToken(context),
+})

package/plugins/getSearchSuggestionsPersonalization.ts

@@ -0,0 +1,16 @@
+import type { getSearchSuggestionsInput as getSearchSuggestionsInputType } from '@graphcommerce/algolia-mesh'
+import { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/algolia-mesh',
+  ifConfig: 'algolia.personalizationEnabled',
+}
+
+export const getSearchSuggestionsInput: FunctionPlugin<
+  typeof getSearchSuggestionsInputType
+> = async (prev, search, context) => ({
+  ...(await prev(search, context)),
+  // enablePersonalization: true,
+  // personalizationImpact: 50,
+})

package/plugins/meshConfigAlgoliaInsights.ts

@@ -10,13 +10,8 @@ export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
   prev,
   baseConfig,
   graphCommerceConfig,
-) => {
-  if (!graphCommerceConfig.algoliaApplicationId || !graphCommerceConfig.algoliaSearchOnlyApiKey) {
-    console.log('Algolia credentials not provided, skipping Algolia plugin')
-    return prev(baseConfig, graphCommerceConfig)
-  }
-
-  return prev(
+) =>
+  prev(
     {
       ...baseConfig,
       sources: [
@@ -29,12 +24,12 @@ export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
               source: '@graphcommerce/algolia-personalization/algolia-insights-spec.yaml',
               ignoreErrorResponses: true,
               schemaHeaders: {
-                'X-Algolia-Application-Id': graphCommerceConfig.algoliaApplicationId,
-                'X-Algolia-API-Key': graphCommerceConfig.algoliaSearchOnlyApiKey,
+                'X-Algolia-Application-Id': graphCommerceConfig.algolia.applicationId,
+                'X-Algolia-API-Key': graphCommerceConfig.algolia.searchOnlyApiKey,
               },
               operationHeaders: {
-                'X-Algolia-Application-Id': graphCommerceConfig.algoliaApplicationId,
-                'X-Algolia-API-Key': graphCommerceConfig.algoliaSearchOnlyApiKey,
+                'X-Algolia-Application-Id': graphCommerceConfig.algolia.applicationId,
+                'X-Algolia-API-Key': graphCommerceConfig.algolia.searchOnlyApiKey,
               },
               selectQueryOrMutationField: [
                 { type: 'Query', fieldName: 'searchSingleIndex' },
@@ -69,4 +64,3 @@ export const meshConfig: FunctionPlugin<typeof meshConfigBase> = (
     },
     graphCommerceConfig,
   )
-}

package/plugins/useSendEventAlgolia.ts

@@ -9,6 +9,7 @@ import { useSendAlgoliaEvent } from '../hooks/useSendAlgoliaEvent'
 export const config: PluginConfig = {
   module: '@graphcommerce/google-datalayer',
   type: 'function',
+  ifConfig: 'algolia.analyticsEnabled',
 }
 
 export const useSendEvent: FunctionPlugin<typeof useSendEventBase> = (prev) => {

package/schema/InContext_algoliaUserToken.graphqls

@@ -0,0 +1,3 @@
+input InContextInput {
+  algoliaUserToken: String
+}