Haystack EU 2023: Learnings and reflections from our team
If you have built search experiences, you know creating a great search experience is a never ending process: the data ...
Senior ML Engineer
If you have built search experiences, you know creating a great search experience is a never ending process: the data ...
Senior ML Engineer
Just as with a school kid who’s left unsupervised when their teacher steps outside to deal with a distraction ...
Search and Discovery writer
Back in May 2014, we added support for synonyms inside Algolia. We took our time to really nail the details ...
Technical Writer
You’re running an ecommerce site for an electronics retailer, and you’re seeing in your analytics that users keep ...
Technical Writer
What do OpenAI and DeepMind have in common? Give up? These innovative organizations both utilize technology known as transformer models ...
Sr. SEO Web Digital Marketing Manager
As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...
Search and Discovery writer
At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...
JavaScript Library Developer
Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...
Technical Writer
Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...
Sr. SEO Web Digital Marketing Manager
Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...
Sr. SEO Web Digital Marketing Manager
Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...
Senior Software Engineer
At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...
Senior Manager, People Success
In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...
Sr. SEO Web Digital Marketing Manager
There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...
Marketing Content Manager
To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...
Search and Discovery writer
My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...
Technical Writer
How well do you know the world of modern ecommerce? With retail ecommerce sales having exceeded $5.7 trillion worldwide ...
Sr. SEO Web Digital Marketing Manager
In a world of artificial intelligence (AI), data serves as the foundation for machine learning (ML) models to identify trends ...
Director of AI Engineering
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.
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:
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.
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:
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.
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.
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.
Powered by Algolia Recommend