Skip to main content

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

Recommendations Visualizer

  • 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:
FieldValue
Connection Codecontentful-connection
Connection NameContentful Connection
ConnectorUniversal API Connector
Base URLGet value from: Literal
https://cdn.contentful.com/spaces/{space}/environments/{environment}
Base HeadersHeader: 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:
FieldValue
Connection Codealgolia-recommend-connection
Connection NameAlgolia Recommend Connection
ConnectorUniversal API Connector
Base URLGet value from: Literal
https://{Application-ID}-dsn.algolia.net
Base HeadersHeader: Content-Type
Value:
Get value from: Literal
application/json; charset=UTF-8
Base HeadersHeader: X-Algolia-Application-Id
Value:
Get value from: Literal
{Application-ID}
Base HeadersHeader: 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:
FieldValue
Component Codecontentful-get-articles
Component NameContentful - Get Articles
No RulesChecked
Component TypeConscia - 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:
FieldForm TabValue
ConnectionMainContentful Connection
Webservice PathMainGet value from: JS Expression
/entries/${contextField('articleId')}
MethodMainGET
  • Navigate to the Experience Components page (Manage Experiences --> Components)
  • Click the + Add Component button.
  • Enter the following and click Submit:
FieldValue
Component Codealgolia-recommend-get-related-articles
Component NameAlgolia Recommend - Get Related Articles
No RulesChecked
Component TypeConscia - 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:
FieldForm TabValue
ConnectionMainAlgolia Recommend Connection
Webservice PathMainGet value from: Literal
/1/indexes/*/recommendations
MethodMainPOST
BodyMainGet 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:
FieldValue
Component Codemapper-fullpage-content
Component NameMapper - Full Page Article Content
No RulesChecked
Component TypeConscia - 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.
FieldValue
Source DataGet value from: Component Response
Contentful - Get Articles
Expression TypeJMESPath
Schematitle = fields.title
author = fields.author
content = fields.content
imageUrl = fields.urlToImage
published = fields.publishedAt
FieldValue
Source DataGet value from: Component Response
Algolia Recommend - Get Related Articles
Expression TypeJMESPath
Source Array Property Pathresults[0].hits
Target Property Path for modified arrayrelated
Schematitle = title
articleId = article_id
imageUrl = urlToImage

References