overleaf/services/web/frontend/js/directives/eventTracking.js

import _ from 'lodash'
/* eslint-disable
    camelcase,
    max-len,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
 * decaffeinate suggestions:
 * DS102: Remove unnecessary code created because of implicit returns
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
// For sending event data to metabase and google analytics
// ---
// by default,
//   event not sent to MB.
//     for MB, add event-tracking-mb='true'
//     by default, event sent to MB via sendMB
//   event not sent to GA.
//     for GA, add event-tracking-ga attribute, where the value is the GA category
// Either GA or MB can use the attribute event-tracking-send-once='true' to
// send event just once
//   MB will use the key and GA will use the action to determine if the event
//   has been sent
// event-tracking-trigger attribute is required to send event

/* eslint-disable
    camelcase,
    max-len,
*/
// TODO: This file was created by bulk-decaffeinate.
// Fix any style issues and re-enable lint.
/*
 * decaffeinate suggestions:
 * DS102: Remove unnecessary code created because of implicit returns
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
// For sending event data to metabase and google analytics
// ---
// by default,
//   event not sent to MB.
//     for MB, add event-tracking-mb='true'
//     by default, event sent to MB via sendMB
//   event not sent to GA.
//     for GA, add event-tracking-ga attribute, where the value is the GA category
// Either GA or MB can use the attribute event-tracking-send-once='true' to
// send event just once
//   MB will use the key and GA will use the action to determine if the event
//   has been sent
// event-tracking-trigger attribute is required to send event

import App from '../base'

const isInViewport = function (element) {
  const elTop = element.offset().top
  const elBtm = elTop + element.outerHeight()

  const viewportTop = $(window).scrollTop()
  const viewportBtm = viewportTop + $(window).height()

  return elBtm > viewportTop && elTop < viewportBtm
}

export default App.directive('eventTracking', [
  'eventTracking',
  eventTracking => ({
    scope: {
      eventTracking: '@',
      eventSegmentation: '=?',
    },
    link(scope, element, attrs) {
      const sendGA = attrs.eventTrackingGa || false
      const sendMB = attrs.eventTrackingMb || false
      const sendMBFunction = attrs.eventTrackingSendOnce
        ? 'sendMBOnce'
        : 'sendMB'
      const sendGAFunction = attrs.eventTrackingSendOnce ? 'sendGAOnce' : 'send'
      const segmentation = scope.eventSegmentation || {}
      segmentation.page = window.location.pathname

      const sendEvent = function (scrollEvent) {
        /*
                      @param {boolean}		scrollEvent		Use to unbind scroll event
                  */
        if (sendMB) {
          eventTracking[sendMBFunction](scope.eventTracking, segmentation)
        }
        if (sendGA) {
          eventTracking[sendGAFunction](
            attrs.eventTrackingGa,
            attrs.eventTrackingAction || scope.eventTracking,
            attrs.eventTrackingLabel || ''
          )
        }
        if (scrollEvent) {
          return $(window).unbind('resize scroll')
        }
      }

      if (attrs.eventTrackingTrigger === 'load') {
        return sendEvent()
      } else if (attrs.eventTrackingTrigger === 'click') {
        return element.on('click', e => sendEvent())
      } else if (attrs.eventTrackingTrigger === 'hover') {
        let timer = null
        let timeoutAmt = 500
        if (attrs.eventHoverAmt) {
          timeoutAmt = parseInt(attrs.eventHoverAmt, 10)
        }
        return element
          .on('mouseenter', function () {
            timer = setTimeout(() => sendEvent(), timeoutAmt)
          })
          .on('mouseleave', () => clearTimeout(timer))
      } else if (
        attrs.eventTrackingTrigger === 'scroll' &&
        !eventTracking.eventInCache(scope.eventTracking)
      ) {
        $(window).on(
          'resize scroll',
          _.throttle(() => {
            if (isInViewport(element)) {
              sendEvent(true)
            }
          }, 500)
        )
      }
    },
  }),
])