Register viewability beacon using SafeFrame

sf-register-viewability-beacon.js

/**
 * register viewability beacon
 *
 * @param {number} adWidth - ad width
 * @param {number} adHeight - ad height
 * @param {string} vimpUrl - beacon url to be sent when ad is shown
 * @param {object} options
 * @param {number} [options.percent = 50] - in view percent
 * @param {number} [options.duration = 1000] - in view duration
 * @throws {Error} throws error if `SafeFrame` is not supported
 * @requires $sf
 */
function registerViewabilityBeacon (adWidth, adHeight, vimpUrl, options) {
  var _self = registerViewabilityBeacon
  _self.DEFAULT_IN_VIEW_PERCENTAGE = 50
  _self.DEFAULT_IN_VIEW_DURATION = 1000

  options = options || {}

  var inViewPercentage = options.percent || _self.DEFAULT_IN_VIEW_PERCENTAGE
  var duration = options.duration || _self.DEFAULT_IN_VIEW_THROTTLE_TIME

  var viewableTimerId = 0
  var viewableFired = false
  var sfApi = $sf
  
  function sendBeacon (url, successCallback) {
    var beacon = new Image()
    beacon.onload = successCallback
    beacon.src = url
  }

  function checkIfInViewArea (percentage) {
    var results = false

    try {
      results = sfApi.ext.inViewPercentage() >= percentage
    } catch (e) {
      throw e/* SAFEFRAME IS NOT SUPPORTED */
    }
    return results
  }

  function releaseViewableEvent () {
    viewableTimerId = 0
    return (viewableFired = true)
  }

  function checkIfViewableNotTriggered () {
    return !viewableFired
  }

  function installTimer (callback, timeout) {
    return viewableTimerId === 0 && (viewableTimerId = setTimeout(callback, timeout))
  }

  function releaseTimer () {
    return viewableTimerId !== 0 && clearTimeout(viewableTimerId)
  }

  function validateInViewArea (url, percentage, duration) {
    return (
        checkIfViewableNotTriggered() &&
            checkIfInViewArea(percentage) &&
            installTimer(function () {
              checkIfViewableNotTriggered() &&
                checkIfInViewArea(percentage) &&
                sendBeacon(url, releaseViewableEvent)
            }, duration)
    ) || releaseTimer()
  }

  try {
    sfApi.ext.register(adWidth, adHeight, function (status, data) {
      status === 'geom-update' && validateInViewArea(vimpUrl, inViewPercentage, duration)
    })
  } catch (e) {
    throw e/* SAFEFRAME IS NOT SUPPORTED */
  }

  // First View Check
  validateInViewArea(vimpUrl, inViewPercentage, duration)
}

sf-register-viewability-beacon.min.js

function registerViewabilityBeacon(t,n,e,r){function i(t,n){var e=new Image;e.onload=n,e.src=t}function c(t){var n=!1;try{n=V.ext.inViewPercentage()>=t}catch(t){throw t}return n}function o(){return A=0,N=!0}function u(){return!N}function a(t,n){return 0===A&&(A=setTimeout(t,n))}function E(){return 0!==A&&clearTimeout(A)}function T(t,n,e){return u()&&c(n)&&a(function(){u()&&c(n)&&i(t,o)},e)||E()}var _=registerViewabilityBeacon;_.DEFAULT_IN_VIEW_PERCENTAGE=50,_.DEFAULT_IN_VIEW_DURATION=1e3;var f=(r=r||{}).percent||_.DEFAULT_IN_VIEW_PERCENTAGE,I=r.duration||_.DEFAULT_IN_VIEW_THROTTLE_TIME,A=0,N=!1,V=$sf;try{V.ext.register(t,n,function(t,n){"geom-update"===t&&T(e,f,I)})}catch(t){throw t}T(e,f,I)}