# How to evaluate if view event can be sent

Our KPIs require that a `view` event is only send if the according content is inside the user's viewport.

## Example cases

There are two cases when content is eligible to trigger such an event

### **50% of the content is visible in the viewport**

![event is triggered when 50% of the content is visible](https://2912494604-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHKqRZhVzu1H_Op1cBA%2F-MfiaMHsOg7I7Tlo94mm%2F-MfiezeT91tWepS20X-5%2Fview-event-triggered-50%25-of-element-in-viewport.gif?alt=media\&token=d7c1e2f7-0bd3-4192-9e3d-7bee2c412c19)

### **The content is visible on 50% of the viewport**

![event is triggered when 50% of the viewport is filled with the content](https://2912494604-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHKqRZhVzu1H_Op1cBA%2F-MfiaMHsOg7I7Tlo94mm%2F-Mfif4Q-tpOk4cVaC7H1%2Fview-event-triggered-filled-50%25-of-viewport.gif?alt=media\&token=e365a9c0-2ab7-419d-9e8e-e82510cfbc49)

## **Code Snippet**

```javascript
const getDimensions = node => {
  const nodeOffsetY = node.getBoundingClientRect().top + window.scrollY
  const nodeHeight = node.getBoundingClientRect().height
  const viewOffsetY = window.scrollY
  const viewHeight = window.innerHeight
  return { nodeOffsetY, nodeHeight, viewOffsetY, viewHeight }
}

const isHalfViewFilledByNode = node => {
  const { nodeOffsetY, nodeHeight, viewOffsetY, viewHeight } = getDimensions(node)
  const topNodeIsFillingBottomHalfView = viewOffsetY + viewHeight / 2 >= nodeOffsetY
  const bottomNodeIsFillingTopHalfView = viewOffsetY + viewHeight / 2 <= nodeOffsetY + nodeHeight

  return topNodeIsFillingBottomHalfView && bottomNodeIsFillingTopHalfView
}

const isHalfNodeVisible = node => {
  const { nodeOffsetY, nodeHeight, viewOffsetY, viewHeight } = getDimensions(node)
  const viewBottomIsBelowTopHalfNode = viewOffsetY + viewHeight >= nodeOffsetY + nodeHeight / 2
  const viewTopIsAboveBottomHalfNode = viewOffsetY <= nodeOffsetY + nodeHeight / 2

  return viewBottomIsBelowTopHalfNode && viewTopIsAboveBottomHalfNode
}

export default node => {
  const isNodeHidden = node.offsetParent === null // if one of the parents is display none, this will be null
  const isNodeFixed = node.style.position === 'fixed' // position fixed has no offsetParent

  if (isNodeHidden && !isNodeFixed) {
    return false
  }

  return isHalfViewFilledByNode(node) || isHalfNodeVisible(node)
}
```