how to achieve onBlur trigger

[nikhiltalreja]

I want to track search input text in google anlytics as mentioned in the url below

[https://ffeathers.wordpress.com/2014/08/28/how-to-track-textual-input-with-google-analytics/]

The input text is sent to google analytics 4 reporting. If this works I do not need hotjar/fullstory kind of service to track inputs.

Please help.

[tomickigrzegorz]

Well, if you want to use it to add to the input field onBlur. I don't know what's the problem?

[tomickigrzegorz]

@nikhiltalreja

1. Direct call in onSubmit

new Autocomplete("my-input", {
  onSearch: ({ currentValue }) => {
  },
  
  onSubmit: ({ index, element, object }) => {
    if (typeof ga !== 'undefined') {
      ga('send', 'pageview', 'autocomplete-submit?value=' + element.value);
      // or
      ga('send', 'event', {
        eventCategory: 'Autocomplete',
        eventAction: 'submit',
        eventLabel: element.value
      });
    }
  },
  
  onSelectedItem: ({ index, element, object }) => {
    if (typeof ga !== 'undefined') {
      ga('send', 'event', {
        eventCategory: 'Autocomplete',
        eventAction: 'selected',
        eventLabel: object.name || element.value
      });
    }
  }
});

2. Event listener on blur

const input = document.getElementById('my-input');

new Autocomplete("my-input", {
  onSearch: ({ currentValue }) => {
  }
});

input.addEventListener('blur', function() {
  if (this.value) {
    if (typeof ga !== 'undefined') {
      ga('send', 'pageview', 'my-page-name?myParam=' + this.value);
    }
  }
});

3. Multiple event tracking

new Autocomplete("my-input", {
  onSearch: ({ currentValue }) => {
    if (typeof ga !== 'undefined') {
      ga('send', 'event', {
        eventCategory: 'Autocomplete',
        eventAction: 'search',
        eventLabel: currentValue
      });
    }
    
    return fetch('api/search?q=' + currentValue)
      .then(response => response.json());
  },
  
  onSubmit: ({ index, element, object }) => {
    if (typeof ga !== 'undefined') {
      ga('send', 'event', {
        eventCategory: 'Autocomplete',
        eventAction: 'submit',
        eventLabel: element.value,
        eventValue: index
      });
      
      // or
      ga('send', 'pageview', 'autocomplete?selected=' + element.value);
    }
  },
  
  onReset: (element) => {
    if (typeof ga !== 'undefined') {
      ga('send', 'event', {
        eventCategory: 'Autocomplete',
        eventAction: 'reset'
      });
    }
  }
});

4. Google Analytics 4 (gtag.js)

new Autocomplete("my-input", {
  onSearch: ({ currentValue }) => {
  },
  
  onSubmit: ({ index, element, object }) => {
    // GA4 event
    if (typeof gtag !== 'undefined') {
      gtag('event', 'autocomplete_submit', {
        'search_term': element.value,
        'selected_index': index,
        'selected_value': object.name || object.value
      });
    }
  }
});

// Blur tracking
document.getElementById('my-input').addEventListener('blur', function() {
  if (this.value && typeof gtag !== 'undefined') {
    gtag('event', 'page_view', {
      page_title: 'Autocomplete blur',
      page_location: window.location.href + '?param=' + this.value
    });
  }
});