@atlaskit/smart-card 23.11.2 → 23.12.0

package/dist/cjs/utils/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackLinkUpdated = exports.trackAppAccountConnected = exports.trackAppAccountAuthStarted = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.chunkloadFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
+exports.unresolvedEvent = exports.uiRenderSuccessEvent = exports.uiRenderFailedEvent = exports.uiLearnMoreLinkClickedEvent = exports.uiIframeFocusedEvent = exports.uiIframeDwelledEvent = exports.uiHoverCardViewedEvent = exports.uiHoverCardOpenLinkClickedEvent = exports.uiHoverCardDismissedEvent = exports.uiClosedAuthEvent = exports.uiCardClickedEvent = exports.uiAuthEvent = exports.uiAuthAlternateAccountEvent = exports.uiActionClickedEvent = exports.trackLinkUpdated = exports.trackAppAccountConnected = exports.trackAppAccountAuthStarted = exports.screenAuthPopupEvent = exports.resolvedEvent = exports.invokeSucceededEvent = exports.invokeFailedEvent = exports.fireSmartLinkEvent = exports.context = exports.connectSucceededEvent = exports.connectFailedEvent = exports.chunkloadFailedEvent = exports.SmartLinkEvents = exports.ANALYTICS_CHANNEL = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -373,15 +373,75 @@ var uiCardClickedEvent = function uiCardClickedEvent(_ref11) {
 
 exports.uiCardClickedEvent = uiCardClickedEvent;
 
-var uiActionClickedEvent = function uiActionClickedEvent(_ref12) {
+var uiIframeDwelledEvent = function uiIframeDwelledEvent(_ref12) {
   var id = _ref12.id,
-      actionType = _ref12.actionType,
-      extensionKey = _ref12.extensionKey,
       display = _ref12.display,
+      status = _ref12.status,
       definitionId = _ref12.definitionId,
+      extensionKey = _ref12.extensionKey,
+      location = _ref12.location,
       destinationProduct = _ref12.destinationProduct,
       destinationSubproduct = _ref12.destinationSubproduct,
-      location = _ref12.location;
+      dwellTime = _ref12.dwellTime,
+      dwellPercentVisible = _ref12.dwellPercentVisible;
+  return {
+    action: 'dwelled',
+    actionSubject: 'smartLinkIframe',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      status: status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      display: display,
+      location: location,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct,
+      dwellTime: dwellTime,
+      dwellPercentVisible: dwellPercentVisible
+    })
+  };
+};
+
+exports.uiIframeDwelledEvent = uiIframeDwelledEvent;
+
+var uiIframeFocusedEvent = function uiIframeFocusedEvent(_ref13) {
+  var id = _ref13.id,
+      display = _ref13.display,
+      status = _ref13.status,
+      definitionId = _ref13.definitionId,
+      extensionKey = _ref13.extensionKey,
+      location = _ref13.location,
+      destinationProduct = _ref13.destinationProduct,
+      destinationSubproduct = _ref13.destinationSubproduct;
+  return {
+    action: 'focused',
+    actionSubject: 'smartLinkIframe',
+    eventType: 'ui',
+    attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      status: status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      display: display,
+      location: location,
+      destinationProduct: destinationProduct,
+      destinationSubproduct: destinationSubproduct
+    })
+  };
+};
+
+exports.uiIframeFocusedEvent = uiIframeFocusedEvent;
+
+var uiActionClickedEvent = function uiActionClickedEvent(_ref14) {
+  var id = _ref14.id,
+      actionType = _ref14.actionType,
+      extensionKey = _ref14.extensionKey,
+      display = _ref14.display,
+      definitionId = _ref14.definitionId,
+      destinationProduct = _ref14.destinationProduct,
+      destinationSubproduct = _ref14.destinationSubproduct,
+      location = _ref14.location;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -402,13 +462,13 @@ var uiActionClickedEvent = function uiActionClickedEvent(_ref12) {
 
 exports.uiActionClickedEvent = uiActionClickedEvent;
 
-var uiClosedAuthEvent = function uiClosedAuthEvent(_ref13) {
-  var display = _ref13.display,
-      extensionKey = _ref13.extensionKey,
-      definitionId = _ref13.definitionId,
-      destinationProduct = _ref13.destinationProduct,
-      destinationSubproduct = _ref13.destinationSubproduct,
-      location = _ref13.location;
+var uiClosedAuthEvent = function uiClosedAuthEvent(_ref15) {
+  var display = _ref15.display,
+      extensionKey = _ref15.extensionKey,
+      definitionId = _ref15.definitionId,
+      destinationProduct = _ref15.destinationProduct,
+      destinationSubproduct = _ref15.destinationSubproduct,
+      location = _ref15.location;
   return {
     action: 'closed',
     actionSubject: 'consentModal',
@@ -426,12 +486,12 @@ var uiClosedAuthEvent = function uiClosedAuthEvent(_ref13) {
 
 exports.uiClosedAuthEvent = uiClosedAuthEvent;
 
-var screenAuthPopupEvent = function screenAuthPopupEvent(_ref14) {
-  var extensionKey = _ref14.extensionKey,
-      definitionId = _ref14.definitionId,
-      destinationProduct = _ref14.destinationProduct,
-      destinationSubproduct = _ref14.destinationSubproduct,
-      location = _ref14.location;
+var screenAuthPopupEvent = function screenAuthPopupEvent(_ref16) {
+  var extensionKey = _ref16.extensionKey,
+      definitionId = _ref16.definitionId,
+      destinationProduct = _ref16.destinationProduct,
+      destinationSubproduct = _ref16.destinationSubproduct,
+      location = _ref16.location;
   return {
     actionSubject: 'consentModal',
     eventType: 'screen',
@@ -447,14 +507,14 @@ var screenAuthPopupEvent = function screenAuthPopupEvent(_ref14) {
 
 exports.screenAuthPopupEvent = screenAuthPopupEvent;
 
-var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref15) {
-  var display = _ref15.display,
-      status = _ref15.status,
-      extensionKey = _ref15.extensionKey,
-      definitionId = _ref15.definitionId,
-      destinationProduct = _ref15.destinationProduct,
-      destinationSubproduct = _ref15.destinationSubproduct,
-      location = _ref15.location;
+var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref17) {
+  var display = _ref17.display,
+      status = _ref17.status,
+      extensionKey = _ref17.extensionKey,
+      definitionId = _ref17.definitionId,
+      destinationProduct = _ref17.destinationProduct,
+      destinationSubproduct = _ref17.destinationSubproduct,
+      location = _ref17.location;
   return {
     action: 'renderSuccess',
     actionSubject: 'smartLink',
@@ -473,15 +533,15 @@ var uiRenderSuccessEvent = function uiRenderSuccessEvent(_ref15) {
 
 exports.uiRenderSuccessEvent = uiRenderSuccessEvent;
 
-var uiRenderFailedEvent = function uiRenderFailedEvent(_ref16) {
-  var display = _ref16.display,
-      error = _ref16.error,
-      errorInfo = _ref16.errorInfo,
-      extensionKey = _ref16.extensionKey,
-      definitionId = _ref16.definitionId,
-      destinationProduct = _ref16.destinationProduct,
-      destinationSubproduct = _ref16.destinationSubproduct,
-      location = _ref16.location;
+var uiRenderFailedEvent = function uiRenderFailedEvent(_ref18) {
+  var display = _ref18.display,
+      error = _ref18.error,
+      errorInfo = _ref18.errorInfo,
+      extensionKey = _ref18.extensionKey,
+      definitionId = _ref18.definitionId,
+      destinationProduct = _ref18.destinationProduct,
+      destinationSubproduct = _ref18.destinationSubproduct,
+      location = _ref18.location;
   return {
     actionSubject: 'smartLink',
     action: 'renderFailed',
@@ -501,16 +561,16 @@ var uiRenderFailedEvent = function uiRenderFailedEvent(_ref16) {
 
 exports.uiRenderFailedEvent = uiRenderFailedEvent;
 
-var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref17) {
-  var id = _ref17.id,
-      previewDisplay = _ref17.previewDisplay,
-      extensionKey = _ref17.extensionKey,
-      definitionId = _ref17.definitionId,
-      destinationProduct = _ref17.destinationProduct,
-      destinationSubproduct = _ref17.destinationSubproduct,
-      location = _ref17.location,
-      previewInvokeMethod = _ref17.previewInvokeMethod,
-      status = _ref17.status;
+var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref19) {
+  var id = _ref19.id,
+      previewDisplay = _ref19.previewDisplay,
+      extensionKey = _ref19.extensionKey,
+      definitionId = _ref19.definitionId,
+      destinationProduct = _ref19.destinationProduct,
+      destinationSubproduct = _ref19.destinationSubproduct,
+      location = _ref19.location,
+      previewInvokeMethod = _ref19.previewInvokeMethod,
+      status = _ref19.status;
   return {
     action: 'viewed',
     actionSubject: 'hoverCard',
@@ -531,17 +591,17 @@ var uiHoverCardViewedEvent = function uiHoverCardViewedEvent(_ref17) {
 
 exports.uiHoverCardViewedEvent = uiHoverCardViewedEvent;
 
-var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref18) {
-  var id = _ref18.id,
-      previewDisplay = _ref18.previewDisplay,
-      hoverTime = _ref18.hoverTime,
-      extensionKey = _ref18.extensionKey,
-      definitionId = _ref18.definitionId,
-      destinationProduct = _ref18.destinationProduct,
-      destinationSubproduct = _ref18.destinationSubproduct,
-      location = _ref18.location,
-      previewInvokeMethod = _ref18.previewInvokeMethod,
-      status = _ref18.status;
+var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref20) {
+  var id = _ref20.id,
+      previewDisplay = _ref20.previewDisplay,
+      hoverTime = _ref20.hoverTime,
+      extensionKey = _ref20.extensionKey,
+      definitionId = _ref20.definitionId,
+      destinationProduct = _ref20.destinationProduct,
+      destinationSubproduct = _ref20.destinationSubproduct,
+      location = _ref20.location,
+      previewInvokeMethod = _ref20.previewInvokeMethod,
+      status = _ref20.status;
   return {
     action: 'dismissed',
     actionSubject: 'hoverCard',
@@ -563,15 +623,15 @@ var uiHoverCardDismissedEvent = function uiHoverCardDismissedEvent(_ref18) {
 
 exports.uiHoverCardDismissedEvent = uiHoverCardDismissedEvent;
 
-var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref19) {
-  var id = _ref19.id,
-      previewDisplay = _ref19.previewDisplay,
-      extensionKey = _ref19.extensionKey,
-      definitionId = _ref19.definitionId,
-      destinationProduct = _ref19.destinationProduct,
-      destinationSubproduct = _ref19.destinationSubproduct,
-      location = _ref19.location,
-      previewInvokeMethod = _ref19.previewInvokeMethod;
+var uiHoverCardOpenLinkClickedEvent = function uiHoverCardOpenLinkClickedEvent(_ref21) {
+  var id = _ref21.id,
+      previewDisplay = _ref21.previewDisplay,
+      extensionKey = _ref21.extensionKey,
+      definitionId = _ref21.definitionId,
+      destinationProduct = _ref21.destinationProduct,
+      destinationSubproduct = _ref21.destinationSubproduct,
+      location = _ref21.location,
+      previewInvokeMethod = _ref21.previewInvokeMethod;
   return {
     action: 'clicked',
     actionSubject: 'button',
@@ -604,15 +664,15 @@ var uiLearnMoreLinkClickedEvent = function uiLearnMoreLinkClickedEvent() {
 
 exports.uiLearnMoreLinkClickedEvent = uiLearnMoreLinkClickedEvent;
 
-var chunkloadFailedEvent = function chunkloadFailedEvent(_ref20) {
-  var display = _ref20.display,
-      error = _ref20.error,
-      errorInfo = _ref20.errorInfo,
-      extensionKey = _ref20.extensionKey,
-      definitionId = _ref20.definitionId,
-      destinationProduct = _ref20.destinationProduct,
-      destinationSubproduct = _ref20.destinationSubproduct,
-      location = _ref20.location;
+var chunkloadFailedEvent = function chunkloadFailedEvent(_ref22) {
+  var display = _ref22.display,
+      error = _ref22.error,
+      errorInfo = _ref22.errorInfo,
+      extensionKey = _ref22.extensionKey,
+      definitionId = _ref22.definitionId,
+      destinationProduct = _ref22.destinationProduct,
+      destinationSubproduct = _ref22.destinationSubproduct,
+      location = _ref22.location;
   return {
     action: 'chunkLoadFailed',
     actionSubject: 'smartLink',

package/dist/cjs/utils/analytics/index.js

@@ -126,6 +126,12 @@ Object.defineProperty(exports, "uiHoverCardViewedEvent", {
     return _analytics.uiHoverCardViewedEvent;
   }
 });
+Object.defineProperty(exports, "uiIframeDwelledEvent", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.uiIframeDwelledEvent;
+  }
+});
 Object.defineProperty(exports, "uiLearnMoreLinkClickedEvent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "23.11.2",
+	"version": "23.12.0",
 	"sideEffects": false
 }

package/dist/cjs/view/CardWithUrl/component.js

@@ -147,6 +147,30 @@ function CardWithUrlContent(_ref) {
       });
     }
   }, [appearance, state.status, url, definitionId, extensionKey, analytics.ui, id]);
+  var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
+    analytics.ui.iframeDwelledEvent({
+      id: id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct,
+      dwellTime: dwellTime,
+      dwellPercentVisible: dwellPercentVisible
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
+  var onIframeFocus = (0, _react.useCallback)(function () {
+    analytics.ui.iframeFocusedEvent({
+      id: id,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      status: state.status,
+      definitionId: definitionId,
+      extensionKey: extensionKey,
+      destinationProduct: product,
+      destinationSubproduct: subproduct
+    });
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, isFlexibleUi, product, subproduct]);
 
   if (isFlexibleUi) {
     var cardState = state;
@@ -238,7 +262,9 @@ function CardWithUrlContent(_ref) {
         testId: testId,
         inheritDimensions: inheritDimensions,
         showActions: showActions,
-        ref: embedIframeRef
+        ref: embedIframeRef,
+        onIframeDwell: onIframeDwell,
+        onIframeFocus: onIframeFocus
       });
   }
 }

package/dist/cjs/view/EmbedCard/components/Frame.js

@@ -17,28 +17,127 @@ var _react2 = _interopRequireWildcard(require("react"));
 
 var _utils = require("../../../utils");
 
+var _IframeDwellTracker = require("./IframeDwellTracker");
+
+var _linkProvider = require("@atlaskit/link-provider");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /** @jsx jsx */
+function mergeRefs(refs) {
+  return function (value) {
+    refs.forEach(function (ref) {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref !== null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
       _ref$isTrusted = _ref.isTrusted,
       isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
 
   var _useState = (0, _react2.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isIframeLoaded = _useState2[0],
       setIframeLoaded = _useState2[1];
 
+  var _useState3 = (0, _react2.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isMouseOver = _useState4[0],
+      setMouseOver = _useState4[1];
+
+  var _useState5 = (0, _react2.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isWindowFocused = _useState6[0],
+      setWindowFocused = _useState6[1];
+
+  var ref = (0, _react2.useRef)();
+  var mergedRef = mergeRefs([iframeRef, ref]);
+  var trackIframeDwellEvents = (0, _linkProvider.useFeatureFlag)('trackIframeDwellEvents');
+
+  var _useState7 = (0, _react2.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      percentVisible = _useState8[0],
+      setPercentVisible = _useState8[1];
+  /**
+   * These are the 'percent visible' thresholds at which the intersectionObserver will
+   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
+   * vice versa. It's in a state object so that its static for the useEffect
+   */
+
+
+  var _useState9 = (0, _react2.useState)([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 1),
+      threshold = _useState10[0];
+
+  (0, _react2.useEffect)(function () {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    if (!ref || !ref.current) {
+      return;
+    }
+
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
+      });
+    }, {
+      threshold: threshold
+    });
+    observer.observe(ref.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, [trackIframeDwellEvents, threshold, mergedRef]);
+  (0, _react2.useEffect)(function () {
+    if (!trackIframeDwellEvents) {
+      return;
+    }
+
+    var onBlur = function onBlur() {
+      setWindowFocused(false);
+
+      if (document.activeElement === ref.current) {
+        onIframeFocus && onIframeFocus();
+      }
+    };
+
+    var onFocus = function onFocus() {
+      setWindowFocused(true);
+    };
+
+    window.addEventListener('blur', onBlur);
+    window.addEventListener('focus', onFocus);
+    return function () {
+      window.removeEventListener('blur', onBlur);
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [trackIframeDwellEvents, ref, onIframeFocus]);
+
   if (!url) {
     return null;
   }
 
-  return (0, _react.jsx)("iframe", {
-    ref: iframeRef,
+  return (0, _react.jsx)(_react2.default.Fragment, null, trackIframeDwellEvents ? (0, _react.jsx)(_IframeDwellTracker.IframeDwellTracker, {
+    isIframeLoaded: isIframeLoaded,
+    isMouseOver: isMouseOver,
+    isWindowFocused: isWindowFocused,
+    iframePercentVisible: percentVisible,
+    onIframeDwell: onIframeDwell
+  }) : null, (0, _react.jsx)("iframe", {
+    ref: mergedRef,
     src: url,
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
@@ -52,14 +151,20 @@ var Frame = /*#__PURE__*/_react2.default.forwardRef(function (_ref, iframeRef) {
       overflow: 'hidden',
       borderRadius: '3px'
     },
+    onMouseEnter: trackIframeDwellEvents ? function () {
+      return setMouseOver(true);
+    } : undefined,
+    onMouseLeave: trackIframeDwellEvents ? function () {
+      return setMouseOver(false);
+    } : undefined,
     allowFullScreen: true,
     scrolling: "yes",
     allow: "autoplay; encrypted-media; clipboard-write",
     onLoad: function onLoad() {
-      return setIframeLoaded(true);
+      setIframeLoaded(true);
     },
     sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted)
-  });
+  }));
 });
 
 exports.Frame = Frame;

package/dist/cjs/view/EmbedCard/components/IframeDwellTracker.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IframeDwellTracker = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+/** @jsx jsx */
+
+/**
+ * A kind of cheap logarithmic backoff. Fire analytics after the user has
+ * dwelled for 5 seconds, then 10 seconds, and so on.
+ */
+var INTERVALS_TO_LOG = [5, 10, 15, 20, 25, 30, 45, 60, 90, 120, 180];
+
+var IframeDwellTracker = function IframeDwellTracker(_ref) {
+  var isIframeLoaded = _ref.isIframeLoaded,
+      isMouseOver = _ref.isMouseOver,
+      isWindowFocused = _ref.isWindowFocused,
+      iframePercentVisible = _ref.iframePercentVisible,
+      onIframeDwell = _ref.onIframeDwell;
+
+  var _useState = (0, _react.useState)({
+    time: 0,
+    percentVisible: 0
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      dwell = _useState2[0],
+      setDwell = _useState2[1];
+
+  var dwellTimeoutId = (0, _react.useRef)(); // fire analytics when the dwell timer reaches 5 seconds
+
+  (0, _react.useEffect)(function () {
+    if (dwell.time > 0 && INTERVALS_TO_LOG.includes(dwell.time)) {
+      onIframeDwell && onIframeDwell(dwell.time, dwell.percentVisible);
+    }
+  }, [dwell, onIframeDwell]); // start and stop tracking dwell time
+
+  (0, _react.useEffect)(function () {
+    var incrementDwellTime = function incrementDwellTime() {
+      // callback is called on dwell state changes, so change percentVisible and time together
+      setDwell(function (_ref2) {
+        var time = _ref2.time;
+        return {
+          time: time + 1,
+          // snapshot of percent visible, rounded down to nearest 5%
+          percentVisible: Math.floor((iframePercentVisible || 0) * 20) * 5
+        };
+      });
+    };
+
+    if (isIframeLoaded && isMouseOver && isWindowFocused && iframePercentVisible > 0.75) {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+
+      dwellTimeoutId.current = setInterval(incrementDwellTime, 1000);
+    }
+
+    return function () {
+      if (dwellTimeoutId.current) {
+        clearInterval(dwellTimeoutId.current);
+      }
+    };
+  }, [setDwell, isMouseOver, isWindowFocused, isIframeLoaded, iframePercentVisible]);
+  return null;
+};
+
+exports.IframeDwellTracker = IframeDwellTracker;

package/dist/cjs/view/EmbedCard/index.js

@@ -56,7 +56,9 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
       onResolve = _ref.onResolve,
       onError = _ref.onError,
       testId = _ref.testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
   var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
   var meta = details && details.meta;
   var extensionKey = (0, _helpers.getExtensionKey)(details);
@@ -89,7 +91,9 @@ var EmbedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef
           isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
-          ref: iframeRef
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus
         }));
       } else {
         if (platform === 'mobile') {

package/dist/cjs/view/EmbedCard/views/ResolvedView.js

@@ -31,7 +31,9 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
       isTrusted = _ref.isTrusted,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
-      inheritDimensions = _ref.inheritDimensions;
+      inheritDimensions = _ref.inheritDimensions,
+      onIframeDwell = _ref.onIframeDwell,
+      onIframeFocus = _ref.onIframeFocus;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -68,7 +70,9 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
     url: preview === null || preview === void 0 ? void 0 : preview.src,
     isTrusted: isTrusted,
     testId: testId,
-    ref: embedIframeRef
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus
   }));
 });