Search and click history frontend

Search and click history data

Search and click history data will be present in the data model when search sessions are enabled. Those data can be accessed via one of search UI endpoints.

Data model

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

  • The ID of the user

  • The list of previous queries (search history)

  • The list of previously clicked results (click history)

Rest API

A rest API is available to clear search and click history:

  • To clear the search history, call /s/search-history.json?collection=... with a HTTP DELETE method.

  • To clear the click history, call /s/click-history.json?collection=... with a HTTP DELETE method.

This will clear the history for the current user.

Adding search and click history plugin

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-0.1.min.js"></script>
<script type="text/javascript">
  var flbSessionHistory = new Funnelback.SessionHistory({
    apiBase: 'http://funnelback.server/',
    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)

Outputting search and click history data

In order to display search and click history data within the plugin, the history data needs to be rendered in a website.

To output and manipulate history results from data model FreeMarker tool can be used.

Output of click history data in a default template using FreeMarker:

<div class="col-md-6">
  <h3>
    <span class="glyphicon glyphicon-heart"></span> Recently clicked results
    <button class="btn btn-danger btn-xs session-history-clear-click" title="Clear click history"><span class="glyphicon glyphicon-remove"></span> Clear</button>
  </h3>
  <#list session.clickHistory>
    <ul class="session-history-click-results">
    <#items as h>
      <li><a href="${h.indexUrl}">${h.title}</a> &middot; <span class="text-warning">${prettyTime(h.clickDate)}</span><#if h.query??><span class="text-muted"> for &quot;${h.query!}&quot;</#if></span></li>
    </#items>
    </ul>
  </#list>
  <p class="session-history-click-empty text-muted">Your click history is empty.</p>
</div>

Output of search history data in a default template using FreeMarker:

<div class="col-md-6">
  <h3>
    <span class="glyphicon glyphicon-search"></span> Recent searches
    <button class="btn btn-danger btn-xs session-history-clear-search" title="Clear search history"><span class="glyphicon glyphicon-remove"></span> Clear</button>
  </h3>
  <#list session.searchHistory>
    <ul class="session-history-search-results list-unstyled">
    <#items as h>
      <li><a href="?${h.searchParams}">${h.originalQuery!} <small>(${h.totalMatching})</small></a> &middot; <span class="text-warning">${prettyTime(h.searchDate)}</span></li>
    </#items>
    </ul>
  </#list>
  <p class="session-history-search-empty text-muted">Your search history is empty.</p>
</div>

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

Clear data settings

  • apiBase: The web service URL to clear search and click history data.

  • collection: The collection for which the history data should be cleared.

Selectors to DOM elements displaying content

Selectors to DOM elements triggering session history events

  • clearClickSelector: CSS selector to element on clicking which click history data will be cleared.

  • clearSearchSelector: CSS selector to element on clicking which search history data will be cleared.

  • hideSelector: CSS selector to element on clicking which history box will be hidden.

  • showSelector: CSS selector to element on clicking which history box will be shown.

  • toggleSelector: CSS selector to element on clicking which history box will be toggled.

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.

© 2015- Squiz Pty Ltd