Tracking Guides
Search Tracking
Capture what visitors search for on your site — no JavaScript to write. Mark up your input the right way and the Flowgrid script auto-emits a search_event with the query. Works both inside a <form> and on standalone inputs.
Overview
Search tracking ships with the hosted script. It listens globally for two patterns and sends the trimmed query (up to 200 chars) plus an optional category:
- Form search — fires when a recognized search
<form>is submitted. - Standalone input — for inputs that live outside any form, fires when the user presses
Enteror blurs the field with a changed value.
Prerequisite
Make sure the Flowgrid script is installed in your <head>. Everything below works automatically once it is. See the Introductionif you haven't added it yet.
1<script
2 src="https://core.flow-grid.xyz/flowgrid.js"
3 data-site="YOUR_WEBSITE_ID"
4 project-id="YOUR_PROJECT_ID"
5 defer
6></script>Search inside a form
A form is recognized as search if any one of these is true: it has role="search", it contains an input[type=search], or its id/classcontains the word "search". The query is read from the first input[type=search], name="q", name="query", or name="search".
1<!-- Any ONE of these makes a form a "search" form -->
2
3<!-- 1. role="search" + a recognized input name (q, query, search) -->
4<form role="search">
5 <input type="text" name="q" placeholder="Search..." />
6 <button type="submit">Go</button>
7</form>
8
9<!-- 2. A native search input (no role needed) -->
10<form>
11 <input type="search" name="query" placeholder="Search..." />
12</form>
13
14<!-- 3. A form whose id or class contains "search" -->
15<form id="site-search">
16 <input type="text" name="search" />
17 <button type="submit">Search</button>
18</form>Standalone inputs no form needed
Many search boxes aren't wrapped in a <form> and so never fire a submit. Those are tracked when the input is either an input[type=search] or carries a data-search attribute. The event fires on Enter, or on blur with a changed value.
1<!-- No <form> required. Fires on Enter, or on blur with a changed value. -->
2
3<!-- 1. A native search input -->
4<input type="search" placeholder="Search the docs..." />
5
6<!-- 2. Any input you opt in with data-search -->
7<input type="text" data-search placeholder="Search products..." />
8
9<!-- 3. Tag a category so you can segment in the dashboard -->
10<input type="search" data-search-category="products" />No double-counting
Inputs insidea form are handled by the form-submit path above, so the standalone listener skips them. An Enter press followed by a blur is de-duplicated — the same query won't be sent twice for the same field.
React / JSX
The detection is attribute-driven, so the same markup works in React, Next.js, Vue, Svelte — any framework. You don't attach any handlers yourself.
1// React / Next.js — the same attributes work on JSX inputs.
2// No event handlers needed; the Flowgrid script wires them up globally.
3
4export function SearchBox() {
5 return (
6 <input
7 type="search" // or: data-search on a plain input
8 data-search-category="docs" // optional: segments the query in your dashboard
9 placeholder="Search the docs..."
10 />
11 );
12}What gets sent
Both paths emit the same search_event into your search analytics:
1{
2 "query": "running shoes", // trimmed, max 200 chars
3 "category": "products" // from data-search-category, defaults to "site"
4}Set the category with data-search-category on the form (form path) or on the input (standalone path) to segment queries in your dashboard.
Live / instant search
If your search filters results as the user types and never submits a form or blurs the field, the auto-trackers won't catch it. Send the query yourself with the public API — debounced so you don't emit one event per keystroke.
1// Live / instant search (filters as you type, never submits or blurs)?
2// Send it yourself with the public API, debounced so you don't spam
3// one event per keystroke.
4
5const input = document.getElementById("search");
6let timer;
7
8input.addEventListener("input", (e) => {
9 clearTimeout(timer);
10 timer = setTimeout(() => {
11 const q = e.target.value.trim();
12 if (q) window.flowgrid("event", "search", { query: q, category: "site" });
13 }, 600);
14});Routing
The public-API call routes through custom_event rather than the dedicated search pipeline, so it lands as a custom event. Prefer the Enter/blur markup above when you want it in your search analytics.
Notes & limits
- A bare input with no value won't send — empty queries are ignored.
- Tracking is gated behind Flowgrid's human verification and cookie consent, like all other events.
- Events are blocked on
localhost, thefile://protocol, and inside iframes. Use a deployed or staging URL to see queries land.