Help Center

Menu

Search and click history frontend

Search and click history data

The browser’s local storage manages cart data. All the information related to the session will be stored in local storage until the user clears it.

Caveats

  1. The host browser’s local storage has limited capacity.

    • It is usually 10 MB per client but this can vary from browser to browser.

    • Also, the amount of local storage is customizable by browser end-users.

  2. Because the browser’s local storage is used, data cannot be replicated on other devices or browsers with the same user ID. Each browser will have it’s independent storage.

    Even when remote storage was used, data replication in this fashion was not (and is not) supported.

  3. If a browser window or tab is opened in private or incognito mode, the session data is not retained when the private or incognito instance is closed.

  4. Click history is recorded when a search result URL is clicked. If, however, the search result URL is opened in to a new browser tab or window, the click is not recorded.

    • It takes end-user action (for example, right-clicking on a search result URL and then choosing Open Link in a New Tab or the equivalent contextual menu command) to open a search result URL in a new browser tab or window. Funnelback makes no effort to restrict the browser-based capabilities available to end-users, however, so such actions are always possible.

    • Clearing click history will take effect on "Last visited time" only when page is refreshed.

Data model

A top-level session node is returned within data model. This node contains:

  • The list of previous queries (search history)

  • The list of previously clicked results (click history)

Search history data model

  • searchParams - query parameters to the search url

  • total - total number of search results for given query

  • date - the time difference between the timestamp when the query was searched and current timestamp. This will be converted to human-readable sentences, such as "23 hours ago", "50 seconds ago" etc.

  • query - query term used to get search results

Click history data model

  • indexUrl: URL of an item that is used as a unique identifier of that item.

  • redirectUrl: URL to which the page will be redirected when item is clicked on.

  • title: title of result item.

  • date: time difference between the timestamp when element was clicked and current timestamp.

  • query: query term used to get search results.

Adding the search and click history widget

The session history widget is a JavaScript module that is loaded in the page in order to interact with and display session history data sourced from Funnelback.

Basic setup

In order to add the history widget to your search website, you need to add some JavaScript code as well as output the search and click history results into your page so that they can be made available to the plugin.

Note, you need to ensure that:

  • paths to the JavaScript files are correct

  • required library is included

  • the funnelback.session-history.js code is included

  • widget is initiated by calling JavaScript class

  • DOM elements holding search and click history results are provided and have correct CSS selectors to pick them

<div id="search-history">
  <!-- see 'Outputting search and click history data' below -->
</div>

<script type="text/javascript" src="http://funnelback.server/s/resources-global/thirdparty/es6-promise-4.2.5/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/js/funnelback.session-history-1.0.min.js"></script>
<script type="text/javascript">
  var flbSessionHistory = new Funnelback.SessionHistory({
    collection: '<collection_name>',
  });
</script>

Dependencies

The following third party code is used for this implementation:

Required

  • es6-promise - polyfill version of JS Promise (required by Internet Explorer, at least v4.2.5)

Configuring search and click history plugin

The history widget is a JavaScript module that is loaded in the page in order to interact with and display search and click history sourced from Funnelback.

Widget is configured using the JavaScript history widget setup block included within your HTML page (see setup function in the example above).

Plugin parameters

Data settings

  • collection: The collection for which the cart data should be fetched.

General display settings

  • iconPrefix: Define CSS class prefix used to display icons.

Session history box display settings

  • backIcon: Define icon to display within a link to return to search result page.

  • backLabel: Define text of a link to return to search result page.

  • icon: Define icon to display within main header in session history widget.

  • label: Define text of main header in session history widget.

  • pageSelector: Define CSS selector to part of page to hide it when session history widget is displayed.

  • selector: Define CSS selector to element where content of session history should be displayed.

Click history display settings

  • clearClasses: Define CSS classes added to a button to clear all click history data.

  • clearIcon: Define icon to display within a button to clear all click history data.

  • clearLabel: Define text of a button to clear all click history data.

  • icon: Define icon to display within header of click history.

  • label: Define text of a button to display within header of click history data.

  • itemTemplate: Define html template to display items under click history.

Search history display settings

  • clearClasses: Define CSS classes added to a button to clear all search history data.

  • clearIcon: Define icon to display within a button to clear all search history data.

  • clearLabel: Define text of a button to clear all search history data.

  • icon: Define icon to display within header of search history.

  • label: Define text of a button to display within header of search history data.

  • itemTemplate: Define html template to display items under search history.

Search history recent display settings

  • filterIcon: Define icon to display next to recent history item when facets are applied to the search.

  • moreClasses: Define CSS classes added to a button which displays search history data.

  • moreIcon: Define icon to display within recent search history box which displays session history data.

  • clearLabel: Define text of a button to display session history data.

  • itemTemplate: Define html template to display items under recent search history.

Plugin methods

  • clearClicks: Clear click history data for the current user.

  • clearSearches: Clear search history data for the current user.

  • getOption: Get current settings of widget.

  • hide: Hide history widget.

  • show: Show history widget.

  • toggle: Toggle history widget.

See also