If you've been looking to get site search and/or recommendations up and running on your web site, this is THE fastest way. Below is the documentation on our JavaScript based plugins for your web site.
If you haven't signed up with Sajari yet, you can sign up here. Once you've created a "collection", there are two installation steps.
Below assumes you have added the indexing code on your site. If you have not yet added the code, please see our standard install instuctions or instructions for google tag manager specifically here.
You can also customise this further, see here for details on adding custom fields, etc.
The simplest search integration is via the copy and paste install search interface from the console. This will generate a basic interface, which you can cut and paste directly into your website. The sample has two separate components that can be placed anywhere in the body of your website.
Note: this install is a wrapper around our ReactJS library, which is even more customisable.
Render the search input:
<div id="search-box"></div>Render the results:
<div id="search-response"></div>Looking at the code there are 4 major things to be configured:
div to trigger the searchingdiv to render the results
Multiple applications can happily coexist within a single page. The JavaScript below assigns the sample app to sjUI, but this can be any variable. Once created, this variable lets you communicate with the app to configure, monitor events, trigger searches, overlays, etc.
// Assign the application to a variable
var sjUI = (function(w,d,x,a,e,s,c,r){s = [];var b=function(){s.push(arguments);},q="ui";b.arr=s;w[a]=w[a]||[];w[a][q]=w[a][q]||[];w[a][q].push(b);c=d.createElement(x);c.async=1;c.src=e;r=d.getElementsByTagName(x)[0];r.parentNode.insertBefore(c,r);return b;})(window, document, "script", "sajari", "//cdn.sajari.net/js/integrations/website-search-1.2.0.js");
// Initialise the application by passing it a "config" object
sjUI("config", {
project: "sajariptyltd", // Set this to your project.
collection: "sajari-com", // Set this to your collection.
pipeline: "website", // Run the website pipeline.
attachSearchBox: document.getElementById("search-box"), // DOM element to render search box.
attachSearchResponse: document.getElementById("search-response"), // DOM element to render search results.
overlay: false, // Whether to render an overlay or in-page
searchBoxPlaceHolder: "", // Placeholder text for the search box.
results: {"showImages": false}, // Configure the results
values: {"q": getUrlParam("q"),"resultsPerPage": "10"}, // Set default values
tabFilters: { // Make user selectable filters
defaultTab:"All",
tabs: [
{title:"All",filter:""},
{title:"Blog",filter:"dir1='blog'"},
{title:"FAQ",filter:"dir1='faq'"}
]
}
});
project and collection define the project and collection the search interface will query.
pipeline is the recipe used for the search requests. Pipelines can do many things, you can think of them as a pre-built configuration to run when making a request. Pipelines not only impact the way the query is run, but also how autocomplete is trained, self-learning works and much more. The "website" pipeline runs a known algorithm that works well with website data.
values defines the inputs of the pipeline. In the above example, this is obtaining the "q" parameter from the URL string, which will run the query immediately if it was passed in the URL string, e.g. example.com?q=something. Pipelines look for values as their input, in this case the "q" parameter.
attachSearchBox and attachSearchResponse represent the divs to bind to respectively. In this case we've used JavaScript to locate the divs, but this is not essential.
tabFilters define simple facet based filters that allow users to filter the search results for a particular subset.
The example sets three tabs (incidentally those used on this site): "All" (no filter), "Blog" (filter to results in the directory "blog") and "FAQ" (filter to the directory called "faq"). For the case of the two filtered tabs, the filter is in the form <field><operator><value>. The "field" can be anything in the collection schema.
Operators supported: =, >, <, <=, >=, ^, $, != operators. The ~ is a "contains" filter, the ^ character is a "starts with" filter and the $ is an "ends with" filter.
Much more advanced facets and aggregations can be configured using our ReactJS library.
overlay is a boolean to determine whether to launch the results in an overlay. This is useful if there is nowhere in the page to render the results as the overlay can utilise the full screen with minimal design considerations.
The search box is an embeddable input form that shows suggestions as you type. You can put it in your website header or navigation to allow users to search and be taken to the search results page.
Like the website search integration, you can easily customise the search box with CSS to fit your look and feel.
To get the search box on your site, generate your own integration from the console. For technical details see the documentation
Dynamic content allows you to show up to date and relevant pages from your site in a variety of formats.
Choose which content to show based on pre-built pipelines or work with us to design your own custom pipeline.
Great examples of where you can use dynamic content:
To get dynamic content on your site, generate your own integration from the console. For technical details see the documentation
Each application has it's own pub-sub style event system. The config command above actually uses this event system. The app publishes events which can be used to control external UI elements, trigger analytics, debug and much more. The format to interact is as follows:
sjUI("<pub/sub>", "<event>", function() {});For example you may wish to do something when a search occurred. You could do the following:
sjUI("sub", "search-sent", function(eventName, values) {
console.log("Search sent with ", values);
});Events to subscribe to include:
Events to publish to include:
See the full list of available events.
If Google Analytics is installed on the page then the search interface automatically report searches as virtual page views. You can also enable site search in Google Analytics which will recognise these pageviews as searches.
You can disable this integration by setting "disableGA": true in the config dictionary.
If you'd like to integrate another analytics provider you can subscribe to events from the search interface and trigger the analytics yourself, see custom analytics.
