0

On our site there is a search box which suggests results as you type. For web reporting we want to track what people search on our site. But, in addition to being able to click "search" our site auto suggests results as they type.

So I used a change event:

var search_box = document.querySelectorAll('input.nimnewsstand-searchBox')[0];

search_box.addEventListener('change', function(e) {
  dataLayer.push({
    'event': 'catalog_search',
    'event.element': e.target       
  })
}

Then I have another script which listens for changes to the dataLayer array, specifically for events with property 'catalog_search' which fires our Google Analytics tag.

This tracking works if you type something in the input box and then click the search button or blur the input box. But it does not work if you start typing but don't leave the search box. A user does not need to leave the search box since the results are suggested to the user as they type.

Is change the appropriate event I want? Is there another event I can use to track changes as a user types within the input box?

m0meni
  • 16,006
  • 16
  • 82
  • 141
Doug Fir
  • 19,971
  • 47
  • 169
  • 299
  • Yes, you can use the `input` event. – Ry- Aug 24 '16 at 03:15
  • Thanks, tried that just now. It seems a bit too sensitive. I typed "apple" into the search box. I tried to be continuos in my typing but the event was triggered for both appl and apple. Any recommendations? – Doug Fir Aug 24 '16 at 03:21
  • 1
    `input` triggers for every change. If you want to add throttling or a delay, you can do that manually with `setTimeout`. (Search for "debouncing".) – Ry- Aug 24 '16 at 03:27
  • OK, thank you for the advice – Doug Fir Aug 24 '16 at 03:32

0 Answers0