Supercharge Your Craft CMS Site Search with Algolia

The following is the transcript from the video above, taken during the CraftPDX Meetup group on Feb 15th, 2023 where Brett gave a presentation on how to supercharge your Craft CMS site search with Algolia.

Brett:

"Wow, Whoever said to picture your audience naked when public speaking obviously didn't give a talk at a meetup. 
(( Zing ))
You guys didn't know you're coming to a roast, did ya!?

Anyway, I'm going to start the speech. I don't work for Algolia. It's just the easiest solution that I've come across that gets amazing professional results really quickly. Having a professional polish on your products is something that only can enhance your reputation.

A little about me, Native Pacific Northwest, I was actually born in Puyallup, Washington, if anybody knows where that is. And that's how you pronounce it. I've been a developer for eight years now. Probably for the last five years, I've been specifically doing just Craft CMS. Well, not just Craft CMS. But if I'm trying to only focus on Craft and so if a new project comes in and somebody has like another technology or tech stack that they want to use, I try really hard to convince them why Craft would be better. And then just kind of go with that. I also enjoy riding my bike spending time with my daughter, Emma, and drinking beer with friends and giving talks at meetups... this is the first one.

You can follow the Brilliance Northwest Twitter, because I don't have.. I'm not very active on Twitter, or you can email me at my Brilliance email. And you can kind of see the beginnings of my mustache in this picture here. You know, it's legit."

"So what is Algolia? Algolia is a hosted managed search solution offering full text and numerical, and faceted search that's capable of delivering real time results from the first keystroke. And what does that mean? We're going to kind of go over a couple quick concepts here, just so we understand and get on the same page here with… with what we're talking about.

So usually, especially since this is a Craft meetup, you interact, when you're normally searching for something, you interact with the Craft CMS website, you have all the overhead of craft, so you're typing in a search query, usually hit a submit button, it goes to the database, it's looking up everything looking through Craft's database, and then it returns the result, or we're talking about now is syncing your Craft data with an Algolia index. And then, now, when we're interacting with the search, we're just interacting with Algolia. And all the images I made with DALL·E. So nothing's trademarked or anything except by a robot.

Algolia benefits: So fast search can be a really competitive advantage for your site. It's got unmatched speed. It can provide really high quality analytics for how people are using your search. And it's extremely scalable. One of the things about Algolia is when you even if when you boot up a free plan, they boot up like three instances for you. And so if any one goes down and you have, like, failover protection at all times, like resiliency, your website will go down before Algolia.

And then how much does Site Search speed matter? You could be surprised. 40% of users said they would navigate away from your site if your search took longer than three seconds. And that's just really any action on your website. Speed is paramount to a polished product. And I got this from this website called Zyro web statistics. I don't know how they actually did their research, but I'm taking it for what it is."

"So how does Algolia work? There's two basic parts of the search engine. If you've ever used SOLR or Elastic Search, it's kind of the same concept. The first part of the system is the indexing engine. Indexing is basically taking an unordered table of data and optimizing the efficiency of the structure and queries. When something isn't indexed, you're basically searching through the table early. And it's incredibly inefficient.

Then there's the search component.

Algolia's goal is basically provide you a search at the speed of thought. And it does this incredibly well, rather than typing out your search and waiting for results Algolia starts providing you with information pretty much immediately. And let's kind of check out how it works right now.

So this, they have, like 20,000 products loaded into this site. And this is like, basically what you get out of the box with Algolia. If you provided the data in the back end, and you just dropped in their instant search snippet, you'd get a similar UI for this. And so if I click on appliances, I have you see these little numbers on the side, like that's the result count. So there's 4000, instantly by clicking on appliances, I've already reduced the amount of objects we're searching against by three fourths, right, like we started with 20,000, we're now at 4000 objects, I can go down, and I'm just playing with the side right now, like we haven't even. So now we're in GE Appliances. And then if I want to go to electric range, we're now at eight results. And that's like, almost instantaneous. If you were to try to do this with, say, a WordPress website, you'd be here for a long time. And so I could type in again, GE. And so it's not going to give me the exact results, this is going to have kind of look through the most relevant sources. And so this is searching through all of the facets that each of these products have, and all of the content of whatever you have loaded in for each of these records. And so you can see, it's pretty powerful, and it's super fast. "

"Okay, some other capabilities, it has predictive texts, keyword ranking, misspellings, and more. And while we're just talking about search here, keep in mind, like, you could use Algolia for basically anything, and we'll kind of get into that a little bit later in the talk. But it's mainly used to power a lot of powerful experiences, not just search."

"Okay, so implementing Algolia is kind of a two step process. First, it's getting your data into Algolia. And so there's pick your favorite language, right, there's SDKs for all of that, I'm gonna give a little shameless plug. Since I co-founded a company, we've written a plugin for Craft, which basically syncs your data with Algolia. You can choose any entry type that you want, almost all field types are supported. Except for matrix fields. And if you find a field type that isn't supported, you're welcome to make a pull request, it will get that in. I'm sure there's like plugins out there that have weird field situations. And so it's all available on the plugin store.

But if you weren't using Craft CMS pick your language they have SDK for everything. And you're responsible for writing your own kind of integration with your original data source. And then the second part is you're interacting with the search engine. And so pick your favorite JS framework, Vanilla JavaScript, React, VUE, whatever. So drop it in, you get something like the ecommerce demo that we just kind of witnessed. But it's all customizable. And so your mileage may vary depending on how complex your UI and UX is, on how long it's gonna take to implement. But it's almost instantaneous, if you want something to look like that ecommerce website. Also, you can just upload data manually to the back end of Algolia. You don't even need a back end. But yeah, probably it could be your back end of a really simple project if you're trying to do something really quick and easy.

Pretty cool, let's kind of let's look at an example of the Algolia backend. And so this is kind of a really early example. It's very simple, just for the purposes of this talk, but there's 40,000 ZIP Codes. This is actually a real example. So we had a client come to us and they had an issue with their WordPress search, where it was taking them like 40 seconds to filter through all these zip codes to look them up. They're called Regional Medical Associates. It's a pharmaceutical company and for each block of zip codes, basically, they have one associate that's responsible for all of the contacts that they get in that area. And so ("was that on WordPress or...?") it was a WordPress, Not Craft CMS I'm sorry. It's a very simple implementation. And if we can kind of look at the backend here, so you can see a little bit more. Okay, so this is the Algolia admin interface for an index. And so we all have 24 records here. And you can kind of see, this would be like the response that you send to elderly or air, like a kind of example, another request, sorry. And then this would be the response that you get back. And you can see how many zip codes this one record has assigned to it. Don't want to scroll through the whole thing. If you were kind of messing around with this, I just always use my ZIP code. So it's gonna show the same thing but 977. Right, like it's almost instantaneous. And so whenever I'm testing, and I'm working with Algolia, I always use this interface, because it's basically what you can expect from using the API to.

And so let's look at the frontend of this. Okay. And so this used to be kind of, I don't know if you guys have heard of MyOvant. But this used to be a very slow pain point for them. And within a couple of hours, I was able to solve this pretty quickly. So you could I kind of already had the search pre-loaded. So this is the Prostate Cancer Regional Medical associate for Oregon. But you can also switch in it's instantaneous to the woman's health, Regional Medical associate, what was your ZIP code Tom in Pennsylvania, do you remember growing up? 17551. What? 17551. Aaron Dershak. So if you were to have a prostate cancer issue, and you were prescribed Myfembree, you could look up Aaron Dershak to talk to.. But anyway, this was like the UI obviously took a little bit longer and stuff, but like getting the base search results returning very quickly was an exercise of a couple hours. And so you can see how it's pretty powerful. Getting something going very quickly. The query starts the minute you start to type it. Ya, So you can start to narrow down results as you type. And so on the back end, it already knows it's already going through the layers. So if I've typed in 1 you're only going to get zip codes now that are Regional Medical Associates that have the 1 portion of a ZIP code, each letter you go it gets further whittled down."

"So, okay, closing lightning fast, super powerful. We've used it to build not just the ZIP code example, but we've used it to build like a therapist directory, kind of search experience. So if you think that like Yelp, but with a really cool map portion, put some map pins, location, geolocation and stuff like that. We've used it to give clients really quick reporting with their sales data. And so we've taken orders, basically, fulfilled orders, throwing it into Algolia. And then they have a really fast, easy way to navigate or find, you know, basically, anything you want, really quickly within their orders.

What will you build with Algolia?"

Question: "I've actually worked with Algolia before and the partner website, oddly enough, it was a WordPress with Woo Commerce and, like, found really powerful about it was that you could rank the importance of search queries. Is that still something that this Yes, the fundamental part of it?"

Answer: "So keyword ranking you can do like misspellings. So if especially with like your analytics, if you see that people are commonly misspelling things and it's kind of giving them incorrect results. You can fix that really easy by adding and misspelling or you are giving it it's just got a tolerance library like it so it does that all on its own it's super cool with what you do with it"