Dynamic "real-time" site search - tagging best practice

[#1]

We are implementing a new real-time site search box on our pages.

Previously we've had a search box where you type a word, press enter (or the icon) and then the search results appear on a new page. We have used a prop to collect the search terms and all was well.

The new set up will see users start to type their word, and results will start to appear based on each key stroke they make, with no need to click enter. We can change the minimum key strokes to what we want, currently set to 3 I think before results start to appear. I have no idea how to tag this. Dev team has tried using a prop like before, but of course this will fire with every key stroke (so if someone wanted to search for "dental", I would start getting results at "den", then again at "dent", then again at "denta"...depending on how much a user types. You get the picture. Not sure how beneficial this would be in terms of insight?! 

Is there a better way to tag this?! I am stumped. Thanks in advance 🙂

[clairea39507456 · Accepted solution]

As an option, consider capturing the value at click rather than at every new character entry.

[clairea39507456 · Accepted solution]

I did think of that initially, but becuase the results appear in a dynamic box attached to the search box as a user types, there isn't really a need for them to click within the search box. Or do you mean at point of clicking their chosen search result? I suppose then we'd miss the opportunity to capture search terms that we don't currently have content for, but something is better than nothing, right?! Thanks for the reply.

[Andrey_Osadchuk · Accepted solution]

Yes, exactly at at point of first click on the search results.

You may want to add an extra trigger to the event when the searchbox gets unfocused or when the value gets cleaned (value length gets reset to 0 or 1 character) . This should help with the latter challenge you mentioned.

[clairea39507456 · Accepted solution]

Good one, thank you! 🙂

[#6]

Can you fire the tag on the onchange event of the input tag that is your search text box?  Then the tag would fire once the user leaves the the text box.