Search by Algolia
What is online retail merchandising? An introduction
e-commerce

What is online retail merchandising? An introduction

Done any shopping on an ecommerce website lately? If so, you know a smooth online shopper experience is not optional ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Looking for something?

How to Build an Algolia-Powered Search and Discovery Experience on Adobe Experience Manager

Nov 23rd 2022 product

How to Build an Algolia-Powered Search and Discovery Experience on Adobe Experience Manager
facebookfacebooklinkedinlinkedintwittertwittermailmail

When someone visits a digital business, first impressions are precious. Either they get captivated by what they see and want to engage further – or they bounce from the site. Digital businesses must show content that matches their users’ intent, is personalized, relevant that week, and aligns with their business strategy. They must analyze how to make the most of their website, from the first item in the search results, to the first row on a category page, to the banner on top of the screen – especially on mobile. And they must plan how to make changes each season, sales cycle, and promotion – in a way that is strategic and efficient for their publishers, editors, and merchandisers. The most successful digital businesses are thoughtful about content and product discovery and invest in the right tools to drive engagement, loyalty, conversions and revenue.

Businesses are increasingly turning to Adobe Experience Manager (AEM) to manage their content and create rich omnichannel experiences. AEM is a leader in enterprise content management, able to handle the complexity of global organizations and set up workflows for publishers to build and manage their websites. It is extensible, making it easier to build enhanced user experiences on top of the platform. However, AEM users struggle with creating a strong search and discovery experience. They invest heavily in content, but don’t necessarily get the engagement they are looking for, because the right content is not getting surfaced to the right viewer. Search results take too long to be displayed on the page, and viewers lose attention. Publishers don’t have the tools to manage search strategy day-to-day, without having to depend on a developer. Ultimately, they are at a disadvantage when competing with other online businesses who have nailed search and discovery.

Many of these businesses turn to Algolia to provide advanced search and discovery capabilities that extend AEM’s functionality. Algolia delivers a faster and more performant search on their site, allowing businesses to unify the discovery of content from multiple sources. Publishers get more out of their content investment, and are given the tools to curate and publish, and to strategize how to rank results based on relevancy, business metrics, and insights from machine learning models. They can run experiments and measure improvements, to see how better search capabilities impact their bottom line.

What makes this uniquely easy is AEM’s extensibility and Algolia’s API-first, builder-centric approach. AEM users can easily connect their AEM data to the Algolia platform and leverage its powerful indexing engine (more on indexing here), and quickly build a front-end experience that is powered by Algolia. Here, we talk about how we can leverage Algolia’s UI Libraries to build an AEM search experience.

 

Why use Algolia’s UI library, instead of building your front-end from scratch?

Showcase for Algolia InstantSearch.js Widget Library

While it’s possible to build your front end using Algolia’s APIs directly – and some businesses choose to do this – Algolia offers an easier solution: you can use its out-of-the-box front-end UI libraries, which can significantly accelerate your front-end development. Here are some of the benefits:

Immediate ROI with features that are ready to use 

  • You have every building block ready to be plugged in and customized: search bar and autocomplete, search results pages, query suggestions, carousels, facets, sorting, pagination, etc. You can leverage repeatability, best practices, and reduce risk.
  • Faceting is available out of the box – and facets are customizable and dynamic, updating with each search query to focus on what is most relevant.
  • Federated Search widgets allow you to ping multiple indices at the same time, that can bring together disparate sources of data into a unified search experience.
  • Click and conversion analytics are included for tracking events and trends, making search smarter, and generating recommendations and personalization.

Higher performance

  • You get the most out of Algolia’s infrastructure. You don’t have to call a server, which will slow down the speed. Algolia’s front-end widgets directly ping the CDN and render results for each keystroke in milliseconds.
  • Algolia performance improves Core Web Vitals for the site and thus SEO.

Easier implementation

  • These front-end building blocks are available in Javascript, React, Angular, Vue, iOS, and Android – and can be embedded into any front end – and in this case, into your AEM Components!
  • InstantSearch implements Algolia best practices OOTB.
  • InstantSearch library is maintained and supported by Algolia.

Two approaches to building your frontend with Algolia

Approach #1: Start with Algolia UI Libraries

Some of our customers have already done a great job embedding Algolia’s UI libraries into their AEM components, customizing the look and feel, and using these building blocks through AEM Site Composer. Some organizations even decide to include an AEM authoring interface for each component, which allows authors to further configure the search experience. For example, they can specify which indices to search across, or which facets to include. Once the AEM developer has added and customized the components, an AEM publisher can drag-and-drop them onto the site, and choose the appropriate settings for index, display format, number of displayed items, etc.

The first step is to download our front-end code from these Github libraries, and add them as a dependency in AEM. They are available in vanilla Javascript, React, Angular, Vue, React Native, iOS, and Android. There are two main libraries: Autocomplete and InstantSearch. Autocomplete is a lightweight dropdown that can be added to every page on your site easily. It has query suggestions and auto-completed results, but does not have any UI for filters or pagination. That’s where InstantSearch comes in. InstantSearch is a full search experience with different widgets for each type of refinement (refinementList, rangeSlider, pagination, etc). We can also bring in multiple indexes (i.e. from Adobe Commerce, AEM, and other sources) into a federated search experience using our federated search component.

Approach #2: Start with the new AEM Component Accelerator & customize

To make this even easier for customers who are just getting started now, we created Algolia Components for AEM to accelerate their development time.  With these components, more time can be devoted to optimizing the experience.

The package contains the AEM components for:

  • Autocomplete with global search, query suggestions, and auto-completed results
  • InstantSearch with search bar, facets, category pages, and option for federated search results
  • Content & Product Recommendations
  • CIF Components for Category Pages & Product Recommendations

Each component mirrors the configuration of the Algolia Javascript library, and the configuration experience is through an AEM authoring dialog.

The Algolia Autocomplete component is mostly used on the global navigation, so many publishers will add it to their header fragment. The configuration experience is through the AEM authoring dialog. The component allows for basic configuration and allows authors to add Index components within the autocomplete box. One index component is required to display results, but you can add more to create a federated search experience. 

Many publishers will choose to use the InstantSearch widget when they want search to take over the whole page, or as the landing page of a global search result.

The InstantSearch component has more configuration compared to the Autocomplete component, including faceting components which can be embedded inside each index component.

We can also bring in multiple indexes to have federated results, and configure the display template for each type of index (grid view, list view, etc.).

 

Widgets are also available to support building category pages and Recommendation carousels. 

To learn more about the accelerator, as well as solutions for indexing AEM content or connecting Launch with Algolia, reach out to us at adobe-algolia-solutions@algolia.com

Other ways to build your front-end with Algolia

Organizations use a number of different methods for building their front end today. As we explored in this article, many use Adobe Experience Manager’s Site Composer to build the front end and pull in the relevant content. Other retailers use the Adobe Commerce storefront, or a hybrid of Adobe Commerce and Adobe Experience Manager. Some leverage a PWA front end, which helps those looking for high performance on mobile devices, and others will choose to build something entirely “headless”, or from scratch, using a front-end framework. The best news is that Algolia works in all of these cases! Our simplicity to fit into any architecture comes from the way we separate our front- and back-end components, and provide API clients and UI libraries in any programming language to accelerate the implementation.

Want to learn more or find out how you can try Algolia?

Reach out to us at adobe-algolia-solutions@algolia.com for access to our accelerator and guidance on how to start building Algolia into your AEM solution! We are happy to chat with you about best practices, trade-offs, and learn what works best for you!

Check out the rest of our ‘Adobe x Algolia Integrations’ Series, including our first piece: Ingesting Data From AEM in 3 Ways.

About the authors
Debanshi Bheda

Global Alliances Director - Algolia

linkedin
Sajid Momin

Senior Director, Integrations @ Algolia

linkedin

Recommended Articles

Powered byAlgolia Algolia Recommend

Ingesting Data from Adobe Experience Manager (AEM) for Search & Discovery
product

Debanshi Bheda
Sajid Momin
Micah Garside-White

Debanshi Bheda &

Sajid Momin

Micah Garside-White

Building Immersive Shopping Experiences: Using Algolia Search with Adobe Experience Manager and any Commerce Platform
e-commerce

Debanshi Bheda

Global Alliances Director - Algolia

Building a composable front-end search with autocomplete and instant search results
product

John Stewart

VP Corporate Marketing