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',
  function (eventTracking) {
    return {
      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)
          )
        }
      },
    }
  },
])