Custom statistics for autocomplete

If you're using a custom autocomplete implementation instead of one of our prebuilt JavaScript libraries, you must manually send events to our backend to track search and selection activity.

Three events are required:

Show — fired once when the first suggestion is displayed
Click — fired when the user selects a suggestion from the list
Search — fired when the user submits the search without selecting a suggestion (presses Enter or clicks the search button)

All events are sent as beacons to https://view.rekai.se/view/event using the Beacon API (opens in a new tab).

Show event (`rek-auto-show`)

Send this when the autocomplete renders its first result. Must only fire once per search session — use a flag to prevent duplicates on subsequent keystrokes.

let autoShowSent = false;
 
function onAutocompleteResults(searchPhrase) {
  if (autoShowSent) return;
  autoShowSent = true;
 
  const payload = JSON.stringify({
    content: "",
    currenturl: window.location.pathname,
    eventaction: "",
    eventcategory: "rek-auto-show",
    eventlabel: searchPhrase,
    eventtype: "active",
    p: "YOUR_PROJECT_ID",
    targeturl: "",
    timerinms: 0,
  });
 
  navigator.sendBeacon("https://view.rekai.se/view/event", payload);
}

Reset autoShowSent to false whenever the user clears the input or starts a new search session.

Click event (`rek-auto-click`)

Send this when the user clicks or keyboard-confirms a suggestion from the autocomplete list.

function onSuggestionClick(searchPhrase, suggestionTitle) {
  const payload = JSON.stringify({
    content: "",
    currenturl: window.location.pathname,
    eventaction: "",
    eventcategory: "rek-auto-click",
    eventlabel: searchPhrase,
    eventtype: "active",
    p: "YOUR_PROJECT_ID",
    targeturl: suggestionTitle,
    timerinms: 0,
  });
 
  navigator.sendBeacon("https://view.rekai.se/view/event", payload);
}

Search event (no suggestion selected)

Send this when the user submits the search query directly — by pressing Enter or clicking the search button — without clicking a suggestion. This is mutually exclusive with the Click event.

function onSearchSubmit(searchPhrase) {
  const payload = JSON.stringify({
    p: "YOUR_PROJECT_ID",
    currenturl: window.location.pathname,
    targeturl: "",
    timeonpagems: 0,
    orgRef: "",
    scrollPercent: -1,
    pathObjectLength: 1,
    search: "",
    tagName: "INPUT",
    eventtype: "passive",
    wasInView: true,
    searchinput: searchPhrase,
  });
 
  navigator.sendBeacon("https://view.rekai.se/view/event", payload);
}

Event flow

User types in search field
        │
        ▼
First suggestion appears  ──►  Send Show event (once)
        │
        ├── User clicks a suggestion  ──►  Send Click event
        │
        └── User presses Enter / clicks search button  ──►  Send Search event

Field reference

Show / Click events

Field	Type	Description
`eventcategory`	string	`rek-auto-show` or `rek-auto-click`
`eventlabel`	string	The search phrase the user typed
`p`	string	Your project ID
`targeturl`	string	Title of the clicked suggestion (`rek-auto-click` only)
`currenturl`	string	Path of the page where autocomplete is rendered
`eventtype`	string	Always `"active"`
`content`, `eventaction`, `timerinms`	—	Reserved — send as empty string / `0`

Search event

Field	Type	Description
`searchinput`	string	The search phrase the user submitted
`p`	string	Your project ID
`currenturl`	string	Path of the page where autocomplete is rendered
`eventtype`	string	Always `"passive"`
`wasInView`	boolean	Always `true`
`scrollPercent`	number	Always `-1`
`pathObjectLength`	number	Always `1`
`targeturl`, `search`, `orgRef`	—	Reserved — send as empty string
`timeonpagems`	number	Time in ms since page load — use `performance.now()` or send `0`

Advanced Usage Rek.ai on an intranet