loading

verticalPages

Configuration

verticalPages is included in the initialization, and is used in various components that require information about the vertical search pages, including Navigation, Universal Results and No Results in Vertical Results. It takes an array of objects, each representing a vertical search page.

ANSWERS.init({
  apiKey: "3517add824e992916861b76e456724d9",
  experienceKey: "answers-js-docs",
  businessId: "3215760",
  experienceVersion: "PRODUCTION",
  verticalPages: [
  {
    label: "Home",
    url: "index.html",
    icon: "star",
    isFirst: true,
    isActive: true,
    hideInNavigation: false
  },
  {
    label: "Locations",
    url: "/locations.html",
    verticalKey: "locations",
    icon: "pin",
    isFirst: false,
    isActive: false,
    hideInNavigation: false
  },
  // Other pages here
],
  onReady: function() {
    // ADD COMPONENTS HERE
  },
});

Where Is It Used?

Option No Results UniversalResults Navigation
label Used in alernative verticals. Not used Used as tab label
url Used in alernative verticals Used in “View More” link if not specified Used as tab URL
icon Used in alernative verticals. Not used Not used
isFirst Not used Not used Used to determine which tab is pinned to the first slot
isActive Not used Not used Used to determine which tab gets active state
hideInNavigation Not used Not used Used to determine which tabs are hidden

isFirst and isActive

The navigation component should ideally always display universal search as the first tab (isFirst), and the current page as active (isActive). It’s therefore recommended that your Universal tab is always set to isFirst: true on each page, and the current page is set to isActive: true.

hideInNavigation

In the case that you have a vertical that you would like to remove from the navigation, but still maintain a page for, you can toggle the hideInNavigation boolean as needed. All other configuration will still be passed to the Navigation, no results and UniversalResults.

Example

verticalPages API

Property Type Default Description
label
string
REQUIRED The label for this page, used in both the Navigation and no results
url
string
REQUIRED The link to this page, used in Navigation, no results and UniversalResults
verticalKey
string
The verticalKey, required for vertical search pages, must be omitted for universal search
icon
string
The icon associated with this vertical, used in no results
iconUrl
string
the url of the icon associated with this vertical, used in no results. Takes precedence over icon.
isFirst
boolean
If true, will show this page first in Navigation
isActive
boolean
If true, will add active styling to this page in Navigation
hideInNavigation
boolean
If true, hide this tab in the Navigation

Background

The search configuration in the initialization is used to control the default initial search and the number of results per page. It can be used to set a default initial search on both vertical and universal search pages.

    search: {
      verticalKey: 'verticalKey', //don't specify this property if universal
      limit: '20', //not applicable to universal search, see universalLimit
      defaultInitialSearch: 'What is Yext Answers?',
      universalLimit: {
        locations: 5, //only display 5 results for the locations vertical in universal
      },
    }

Example

Property Type Default Description
verticalKey
string
The vertical key to use for searches, passed to certain components. Required if a defaultInitialSearch is supplied.
limit
string
20
The number of results to display per page, defaults to 20. Maximum is 50.
defaultInitialSearch
string
A default search to use on page load when the user hasn’t provided a query. If set to “”, the SearchBar’s allowEmptySearch must be set to true.
universalLimit
object
An object containing the number of results to display per vertical key. Minimum is 1. Maximum is 50.
[verticalKey]
number
20
The limit for this vertical on universal

Background

The onUniversalSearch attribute accepts a function. It allows you to send an analytics event each time a search is run on a Universal page. This function should take in one parameter, searchParams, which contains information about the search, and return the desired analytics event.

Like all Answers Javascript API Library analytics, this will only work if there is a businessId in the ANSWERS.init.

Usage

The search information exposed in searchParams is shown below.

function (searchParams) => {
    /**
     * The string being searched for.
     * @type {string}
     */
    const queryString = searchParams.queryString;

    /**
     * The number of verticals returned.
     * @type {number}
     */
    const sectionsCount = searchParams.sectionsCount;

    /**
     * A map containing entries of the form:
     * { totalResultsCount: 150, displayedResultsCount: 10}
     * for each returned vertical. The totalResultsCount indicates how many results
     * are present in the vertical. The displayResultsCount indicates how many of
     * those results are actually displayed.
     * @type {Object<string,Object>}
     */
    const resultsCountByVertical = searchParams.resultsCountByVertical;

    let analyticsEvent = new ANSWERS.AnalyticsEvent('ANALYTICS_EVENT_TYPE');
    analyticsEvent.addOptions({
      type: 'ANALYTICS_EVENT_TYPE',
      label: 'Sample analytics event',
      searcher: 'UNIVERSAL',
      query: queryString
      sectionsCount: sectionsCount,
    });
    return analyticsEvent;
  },
}),

Background

The onVerticalSearch Configuration accepts a function. It allows you to send an analytics event each time a search is run on a Vertical page. This function should take in one parameter, searchParams, which contains information about the search, and return the desired analytics event.

Like all Answers Javascript API Library analytics, this will only work if there is a businessId in the ANSWERS.init.

queryString will be undefined for searches initiated by pagination / applying facets/filters/sorts even if there is a query being used.

Usage

The search information exposed in searchParams is shown below.

function (searchParams) => {
    /**
     * Vertical key used for the search.
     * @type {string}
     */
    const verticalKey = searchParams.verticalKey;

    /**
     * The string being searched for.
     * @type {string}
     */
    const queryString = searchParams.queryString;

    /**
     * The total number of results found.
     * @type {number}
     */
    const resultsCount = searchParams.resultsCount;

    /**
     * Either 'normal' or 'no-results'.
     * @type {string}
     */
    const resultsContext = searchParams.resultsContext;

    let analyticsEvent = new ANSWERS.AnalyticsEvent('ANALYTICS_EVENT_TYPE');
    analyticsEvent.addOptions({
      label: 'Sample analytics event',
      searcher: 'VERTICAL',
      query: queryString,
      resultsCount: resultsCount,
      resultsContext: resultsContext,
    });
    return analyticsEvent;
  },
}),