Related Articles with Algolia Recommend

In this recipe, we are merging together data for a full-page article view, where a visitor can read a blog post and then find related articles to read next. These related articles are being supplied by Algolia Recommend's Related Products model. This same recipe can be used for featuring related products in an online storefront using any kind of machine learning model.

Overall Orchestration Flow

We will be using Contentful as our blog post data source, and Algolia Recommend for related blogs. When the blog page is loaded, it will call Conscia's Experience API with the article id. Conscia will return the full blog content along with the information required to generate tiles for the related posts.

The Orchestration consists of connections to Contentul and to Algolia Recommend, as well as three components: two to connect to each of the data sources, and one to merge and map the responses.

Mapping Out DX Engine Elements

• Get Fashion Blog: This Component connects to Contentful and contains a webservice call to retrieve the article with the id provided by the Context.
• Get Related Content: This Component connects to Algolia Recommend and contains a webservice call to retrieve articles related to this articleId above a certain score threshold.
• Mapper - Full Page Content: This is an Object Mapper component. It maps the content required for a visitor to read a blog post, as well as the data required to create tiles for the related articles.

The Experience API request will look something like this:

POST {{engineUrl}}/experience/components/_query
X-Customer-Code: {{customerCode}}
Authorization: Bearer {{dxEngineToken}}

{
  "componentCodes": ["mapper-fullpage-content"],
  "context": {
    "articleId": "63"
  }
}

The Experience API response will look something like this:

{
  "title": "New LEGO Adidas Superstar Shoes Actually Look Like LEGO Sneakers",
  "author": "Cory Gunther",
  "content": "Since last year, LEGO and Adidas have been working together on a collection of clothes and shoes. Now, the latest LEGO x Adidas collaboration is finally more LEGO than a shoe. Rather than being…",
  "imageUrl": "...",
  "published": "2021-06-16T19:50:39Z",
  "related": [
    {
      "title": "Men's Running Shoes Outdoor Walking Fitness Trainers Tennis Shoes for Men Casual Sneakers for Men Sports Shoes for Men - Ezyft",
      "articleId": "51",
      "imageUrl": "..."
    },
    {
      "title": "15 of the Best Sci-Fi Movies You Can Watch on Netflix, According to Us",
      "articleId": "78",
      "imageUrl": "..."
    }
  ]
}

DX Engine Configuration Details

Create a Connection to Contentful

• Navigate to the Connections page (Settings --> Connections).
• Click the + Add Connection button.
• Enter the following and click Submit:

Field	Value
Connection Code	contentful-connection
Connection Name	Contentful Connection
Connector	Universal API Connector
Base URL	Get value from: Literal https://cdn.contentful.com/spaces/{space}/environments/{environment}
Base Headers	Header: Authorization Value: Get value from: Literal Bearer {token}

Create a Connection to Algolia Recommend

• Navigate to the Connections page (Settings --> Connections).
• Click the + Add Connection button.
• Enter the following and click Submit:

Field	Value
Connection Code	algolia-recommend-connection
Connection Name	Algolia Recommend Connection
Connector	Universal API Connector
Base URL	Get value from: Literal https://{Application-ID}-dsn.algolia.net
Base Headers	Header: Content-Type Value: Get value from: Literal application/json; charset=UTF-8
Base Headers	Header: X-Algolia-Application-Id Value: Get value from: Literal {Application-ID}
Base Headers	Header: X-Algolia-API-Key Value: Get value from: Literal {Search API Key}

Create a Component to retrieve articles from Contentful

• Navigate to the Experience Components page (Manage Experiences --> Components)
• Click the + Add Component button.
• Enter the following and click Submit:

Field	Value
Component Code	contentful-get-articles
Component Name	Contentful - Get Articles
No Rules	Checked
Component Type	Conscia - Universal API Connector

The DX Engine will create and prepare the Component for further configuration. You should see the new component appear in the Component listing.

• Click Edit.
• Enter the following and click Submit:

Field	Form Tab	Value
Connection	Main	Contentful Connection
Webservice Path	Main	Get value from: JS Expression /entries/${contextField('articleId')}
Method	Main	GET

Create a Component to retrieve related articles from Algolia Recommend

• Navigate to the Experience Components page (Manage Experiences --> Components)
• Click the + Add Component button.
• Enter the following and click Submit:

Field	Value
Component Code	algolia-recommend-get-related-articles
Component Name	Algolia Recommend - Get Related Articles
No Rules	Checked
Component Type	Conscia - Universal API Connector

The DX Engine will create and prepare the Component for further configuration. You should see the new component appear in the Component listing.

• Click Edit.
• Enter the following and click Submit:

Field	Form Tab	Value
Connection	Main	Algolia Recommend Connection
Webservice Path	Main	Get value from: Literal /1/indexes/*/recommendations
Method	Main	POST
Body	Main	Get value from: JS Expression

{
  "requests": [
    {
      "indexName": "{index to target}",
      "model": "related-products",
      "threshold": 45, 
      "maxRecommendations": 3,
      "objectID": "${contextField('articleId')}"
    }
  ]
}

Create a Component to merge article and recommendations data

• Navigate to the Experience Components page (Manage Experiences --> Components)
• Click the + Add Component button.
• Enter the following and click Submit:

Field	Value
Component Code	mapper-fullpage-content
Component Name	Mapper - Full Page Article Content
No Rules	Checked
Component Type	Conscia - Object Mapper

The DX Engine will create and prepare the Component for further configuration. You should see the new component appear in the Component listing.

• Click Edit.
• Create two Object Maps as follows and click Submit.

Field	Value
Source Data	Get value from: Component Response Contentful - Get Articles
Expression Type	JMESPath
Schema	title = fields.title author = fields.author content = fields.content imageUrl = fields.urlToImage published = fields.publishedAt

Field	Value
Source Data	Get value from: Component Response Algolia Recommend - Get Related Articles
Expression Type	JMESPath
Source Array Property Path	results[0].hits
Target Property Path for modified array	related
Schema	title = title articleId = article_id imageUrl = urlToImage

References

• Algolia Recommend REST API
• Object Mapper Orchestration Components