How to check if an element is partially visible after scrolling past it?

Question

I want to trigger a React.GA event after someone scrolls past a particular form. I added this line to my componentDidMount

window.addEventListener('scroll', this.onScroll);

and then I have these two functions

isVisible = (el) => {
var rect = el.getBoundingClientRect();
return (
  rect.top >= 0 &&
  rect.left >= 0 &&
  rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

onScroll = () => {
let form = document.querySelector('theform');
if (form) {
  if (this.isVisible(form)) {
    console.log('hey');
  }
}
}

which comes close but it generates a lot of logs so I guess it will generate a lot of GA events as well. Is it possible to modify my isVisible function to check if it is partially visible (let's say more than half of the form has been scrolled past)?

I tried it with specific bounding values but of course it is not the best way to approach this.

Thanks for any helpful advice!