@atlaskit/smart-card 19.1.13 → 19.1.14

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

@@ -52,17 +52,19 @@ function CardWithUrlContent(_ref) {
       inlinePreloaderStyle = _ref.inlinePreloaderStyle,
       ui = _ref.ui,
       children = _ref.children,
-      showHoverPreview = _ref.showHoverPreview;
+      showHoverPreview = _ref.showHoverPreview,
+      analyticsEvents = _ref.analyticsEvents;
 
   // Get state, actions for this card.
   var _useSmartLink = (0, _state.useSmartLink)(id, url, dispatchAnalytics),
       state = _useSmartLink.state,
       actions = _useSmartLink.actions,
+      defaultAnalytics = _useSmartLink.analytics,
       config = _useSmartLink.config,
-      analytics = _useSmartLink.analytics,
       renderers = _useSmartLink.renderers,
       error = _useSmartLink.error;
 
+  var analytics = analyticsEvents || defaultAnalytics;
   var definitionId = (0, _helpers.getDefinitionId)(state.details);
   var extensionKey = (0, _helpers.getExtensionKey)(state.details);
   var resourceType = (0, _helpers.getResourceType)(state.details);
@@ -76,17 +78,15 @@ function CardWithUrlContent(_ref) {
     (0, _utils.isSpecialEvent)(event) ? window.open(clickUrl, '_blank') : window.open(clickUrl, '_self');
   }, [state.details, url]);
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
-    if (state.status === 'resolved') {
-      var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
-      analytics.ui.cardClickedEvent(isFlexibleUi ? 'flexible' : appearance, definitionId, extensionKey, isModifierKeyPressed);
-    }
+    var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
+    analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
 
     if (onClick) {
       onClick(event);
     } else if (!isFlexibleUi) {
       handleClick(event);
     }
-  }, [state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
+  }, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
   var handleAuthorize = (0, _react.useCallback)(function () {
     return actions.authorize(appearance);
   }, [actions, appearance]);
@@ -112,7 +112,7 @@ function CardWithUrlContent(_ref) {
 
   (0, _react.useEffect)(function () {
     if ((0, _helpers.isFinalState)(state.status)) {
-      analytics.ui.renderSuccessEvent(appearance, id, definitionId, extensionKey);
+      analytics.ui.renderSuccessEvent(appearance, state.status, id, definitionId, extensionKey);
     }
   }, [appearance, state.details, state.status, url, definitionId, extensionKey, analytics.ui, id]);
 
@@ -130,6 +130,7 @@ function CardWithUrlContent(_ref) {
     }
 
     return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, {
+      id: id,
       cardState: cardState,
       onAuthorize: services.length && handleAuthorize || undefined,
       onClick: handleClickWrapper,
@@ -149,6 +150,7 @@ function CardWithUrlContent(_ref) {
   switch (appearance) {
     case 'inline':
       return /*#__PURE__*/_react.default.createElement(_InlineCard.InlineCard, {
+        id: id,
         url: url,
         renderers: renderers,
         cardState: state,
@@ -163,6 +165,7 @@ function CardWithUrlContent(_ref) {
 
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {
+        id: id,
         url: url,
         renderers: renderers,
         authFlow: config && config.authFlow,
@@ -181,6 +184,7 @@ function CardWithUrlContent(_ref) {
 
     case 'embed':
       return /*#__PURE__*/_react.default.createElement(_EmbedCard.EmbedCard, {
+        id: id,
         url: url,
         cardState: state,
         handleAuthorize: services.length && handleAuthorize || undefined,

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

@@ -37,7 +37,7 @@ var LazyCardWithUrlContent = /*#__PURE__*/(0, _react.lazy)(function () {
 
 function CardWithURLRenderer(props) {
   var _useState = (0, _react.useState)(function () {
-    return (0, _uuid.default)();
+    return props.id ? props.id : (0, _uuid.default)();
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
       id = _useState2[0];
@@ -65,7 +65,8 @@ function CardWithURLRenderer(props) {
       createAnalyticsEvent = props.createAnalyticsEvent,
       children = props.children,
       ui = props.ui,
-      showHoverPreview = props.showHoverPreview; // Wrapper around analytics.
+      showHoverPreview = props.showHoverPreview,
+      analyticsEvents = props.analyticsEvents; // Wrapper around analytics.
 
   var dispatchAnalytics = (0, _react.useCallback)(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -122,7 +123,8 @@ function CardWithURLRenderer(props) {
     embedIframeRef: embedIframeRef,
     inlinePreloaderStyle: inlinePreloaderStyle,
     ui: ui,
-    showHoverPreview: showHoverPreview
+    showHoverPreview: showHoverPreview,
+    analyticsEvents: analyticsEvents
   };
   return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     FallbackComponent: ErrorFallback,

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

@@ -54,6 +54,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 var HoverCardComponent = function HoverCardComponent(_ref) {
   var children = _ref.children,
+      id = _ref.id,
       url = _ref.url,
       createAnalyticsEvent = _ref.createAnalyticsEvent;
   var analyticsHandler = (0, _react.useCallback)(function (analyticsPayload) {
@@ -70,7 +71,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
   var fadeInTimeoutId = (0, _react.useRef)();
   var cardOpenTime = (0, _react.useRef)();
   var linkState = (0, _store.useSmartCardState)(url);
-  var analytics = (0, _analytics2.useSmartLinkAnalytics)(analyticsHandler);
+  var analytics = (0, _analytics2.useSmartLinkAnalytics)(url, analyticsHandler, id);
   var extensionKey = (0, _react.useMemo)(function () {
     return (0, _helpers.getExtensionKey)(linkState.details);
   }, [linkState]);
@@ -153,6 +154,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onMouseLeave: initHideCard,
       css: _styled.HoverCardContainer
     }, (0, _core.jsx)(_Card.Card, {
+      id: id,
       appearance: "block",
       url: url,
       ui: {

package/dist/cjs/view/HoverCard/utils.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSimulatedMetadata = void 0;
 
-var getSimulatedMetadata = function getSimulatedMetadata(extensionKey) {
+var getSimulatedMetadata = function getSimulatedMetadata() {
+  var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
   switch (extensionKey) {
     case 'confluence-object-provider':
       return {

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -61,6 +61,7 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          id = _this$props.id,
           _this$props$title = _this$props.title,
           title = _this$props$title === void 0 ? '' : _this$props$title,
           isSelected = _this$props.isSelected,
@@ -88,6 +89,7 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
 
       if (showHoverPreview && link) {
         return /*#__PURE__*/_react.default.createElement(_index.HoverCard, {
+          id: id,
           url: link
         }, inlineCardResolvedView);
       }

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

@@ -62,7 +62,8 @@ var _UnauthorisedView = require("./UnauthorisedView");
 var InlineCard = function InlineCard(_ref) {
   var _details$meta;
 
-  var url = _ref.url,
+  var id = _ref.id,
+      url = _ref.url,
       cardState = _ref.cardState,
       handleAuthorize = _ref.handleAuthorize,
       handleFrameClick = _ref.handleFrameClick,
@@ -99,6 +100,7 @@ var InlineCard = function InlineCard(_ref) {
       }
 
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
+        id: id,
         showHoverPreview: showHoverPreview,
         link: url,
         isSelected: isSelected,

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -54,7 +54,7 @@ export const extractPreviewAction = (extensionKey = 'empty-object-provider', vie
     const previewAction = PreviewAction({ ...metadata,
       testId,
       onOpen: () => {
-        handleAnalytics(uiRenderSuccessEvent('preview', key));
+        handleAnalytics(uiRenderSuccessEvent('preview', 'resolved', key));
       },
       onOpenFailed: (error, errorInfo) => {
         handleAnalytics(uiRenderFailedEvent('preview', error, errorInfo));

package/dist/es2019/index.js

@@ -1,4 +1,4 @@
-export { SmartCardProvider as Provider, SmartCardContext } from './state';
+export { SmartCardProvider as Provider, SmartCardContext, useSmartLinkAnalytics } from './state';
 export { EditorCardProvider, editorCardProvider } from '@atlaskit/link-provider';
 export { APIError } from '@atlaskit/linking-common';
 export { CardClient as Client } from '@atlaskit/link-provider';

package/dist/es2019/state/analytics/useSmartLinkAnalytics.js

@@ -1,25 +1,115 @@
 import { useMemo } from 'react';
-import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, resolvedEvent, unresolvedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
+import { getUrl } from '@atlaskit/linking-common';
+import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
 import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
-export const useSmartLinkAnalytics = dispatchAnalytics => {
+import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+/**
+ * This hook provides usage of Smart Link analytics outside of the Card component.
+ * Can be provided to Card via the analyticsEvents prop to change the analytics events.
+ * @param url URL of the link
+ * @param dispatchAnalytics dispatchAnalytics function
+ * @param id fallback id of the events sent if no id is available
+ * @param defaultLocation location attribute to be used
+ * @returns
+ */
+
+export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocation) => {
+  const defaultId = id || 'NULL'; // We don't want to trigger a re-render by using useSmartCardState
+
+  const {
+    store
+  } = useSmartLinkContext();
+  const state = getUrl(store, url);
+  const extractedDefinitionId = getDefinitionId(state.details);
+  const extractedExtensionKey = getExtensionKey(state.details);
+  const extractedResourceType = getResourceType(state.details);
+  /** Contains all ui analytics events */
+
   const ui = useMemo(() => ({
-    authEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
-    authAlternateAccountEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
-    cardClickedEvent: (display, definitionId, extensionKey, isModifierKeyPressed) => dispatchAnalytics(uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed)),
-    actionClickedEvent: (id, extensionKey, actionType, display, invokeType) => {
+    /**
+     * This fires an event that represents when a user clicks on the authentication
+     * call to action with no current authenticated account. (i.e. Connect to Preview).
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @returns
+     */
+    authEvent: (display, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiAuthEvent(display, definitionId, extensionKey)),
+
+    /**
+     * This fires an event that represents when a user clicks on the authentication
+     * call to action with a forbidden authenticated account. (i.e. Try another account).
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @returns
+     */
+    authAlternateAccountEvent: (display, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiAuthAlternateAccountEvent(display, definitionId, extensionKey)),
+
+    /**
+     * This fires an event that represents when a user clicks on a Smart Link.
+     * @param id The unique ID for this Smart Link.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
+     * @param location Where the Smart Link is currently rendered.
+     * @param destinationProduct The product the Smart Link is linked to.
+     * @returns
+     */
+    cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct)),
+
+    /**
+     * This fires an event that represents when a user clicks on a Smart Link action.
+     * Note: This also starts the UFO smart-link-action-invocation experience.
+     * @param id The unique ID for this Smart Link.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param actionType The type of the action that was clicked, e.g. PreviewAction
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param invokeType Whether the action invoked made a call to a server.
+     * @returns
+     */
+    actionClickedEvent: (id = defaultId, extensionKey = extractedExtensionKey, actionType, display, invokeType) => {
       startUfoExperience('smart-link-action-invocation', id, {
         actionType,
         display,
         extensionKey,
         invokeType
       });
-      dispatchAnalytics(uiActionClickedEvent(extensionKey, actionType, display));
+      dispatchAnalytics(uiActionClickedEvent(actionType, extensionKey, display));
     },
-    hoverCardOpenLinkClickedEvent: (previewDisplay, definitionId, extensionKey, previewInvokeMethod) => {
+
+    /**
+     * This fires an event that represents when a user clicks on a hover preview's "navigate to link" button.
+     * https://product-fabric.atlassian.net/wiki/spaces/EM/pages/3206743323/Analytics+Metrics+-+Hover+Previews
+     * @param previewDisplay What format the preview is in.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param previewInvokeMethod How the preview was triggered.
+     */
+    hoverCardOpenLinkClickedEvent: (previewDisplay, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => {
       dispatchAnalytics(uiHoverCardOpenLinkClickedEvent(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
     },
-    closedAuthEvent: (display, definitionId, extensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
-    renderSuccessEvent: (display, id, definitionId, extensionKey) => {
+
+    /**
+     * This fires an event that represents when a user closed the authentication window without authenticating after opening it.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @returns
+     */
+    closedAuthEvent: (display, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiClosedAuthEvent(display, definitionId, extensionKey)),
+
+    /**
+     * This fires an event that represents when a Smart Link was rendered successfully.
+     * Note: this fires even if the Smart Link request errored out.
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param id The unique ID for this Smart Link.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     */
+    renderSuccessEvent: (display, status, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => {
       succeedUfoExperience('smart-link-rendered', id, {
         extensionKey,
         display
@@ -28,50 +118,126 @@ export const useSmartLinkAnalytics = dispatchAnalytics => {
       succeedUfoExperience('smart-link-authenticated', id, {
         display
       });
-      dispatchAnalytics(uiRenderSuccessEvent(display, definitionId, extensionKey));
+      dispatchAnalytics(uiRenderSuccessEvent(display, status, definitionId, extensionKey));
     },
-    hoverCardViewedEvent: (hoverDisplay, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod)),
-    hoverCardDismissedEvent: (hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
-  }), [dispatchAnalytics]);
+
+    /**
+     * This fires an event that represents a hover preview being opened.
+     * @param hoverDisplay Whether the hover preview was displayed as a card or embed.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param previewInvokeMethod How the preview was triggered.
+     * @returns
+     */
+    hoverCardViewedEvent: (hoverDisplay, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod)),
+
+    /**
+     * This fires an event that represents a hover preview being dismissed.
+     * @param hoverDisplay Whether the hover preview was displayed as a card or embed.
+     * @param hoverTime The duration that the user hovered over a Smart Link before the preview was dismissed.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param previewInvokeMethod How the preview was triggered.
+     * @returns
+     */
+    hoverCardDismissedEvent: (hoverDisplay, hoverTime, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, previewInvokeMethod) => dispatchAnalytics(uiHoverCardDismissedEvent(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
+  }), [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all operational analytics events */
+
   const operational = useMemo(() => ({
-    resolvedEvent: (id, definitionId, extensionKey, resourceType) => dispatchAnalytics(resolvedEvent(id, definitionId, extensionKey, resourceType)),
-    unresolvedEvent: (id, status, definitionId, extensionKey, resourceType) => dispatchAnalytics(unresolvedEvent(id, status, definitionId, extensionKey, resourceType)),
-    invokeSucceededEvent: (id, providerKey, actionType, display) => {
+    /**
+     * This fires an event that represents an action being successfully invoked.
+     * @param id The unique ID for this Smart Link.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param actionType The type of action invoked, e.g. PreviewAction
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     */
+    invokeSucceededEvent: (id = defaultId, extensionKey = extractedExtensionKey, actionType, display) => {
       succeedUfoExperience('smart-link-action-invocation', id);
-      dispatchAnalytics(invokeSucceededEvent(id, providerKey, actionType, display));
+      dispatchAnalytics(invokeSucceededEvent(id, actionType, display, extensionKey));
     },
-    invokeFailedEvent: (id, providerKey, actionType, display, reason) => {
+
+    /**
+     * This fires an event that represents an action being unsuccessfully invoked.
+     * @param id The unique ID for this Smart Link.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param actionType The type of action invoked, e.g. PreviewAction
+     * @param display Whether the card was an Inline, Block, Embed or Flexible UI.
+     * @param reason The reason the invocation failed.
+     */
+    invokeFailedEvent: (id = defaultId, providerKey = extractedExtensionKey, actionType, display, reason) => {
       failUfoExperience('smart-link-action-invocation', id);
-      dispatchAnalytics(invokeFailedEvent(id, providerKey, actionType, display, reason));
+      dispatchAnalytics(invokeFailedEvent(id, actionType, display, reason, providerKey));
     },
-    connectSucceededEvent: (id, definitionId, extensionKey) => {
+
+    /**
+     * This fires an event that represents an account successfully being connected via a Smart Link.
+     * @param id The unique ID for this Smart Link.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     */
+    connectSucceededEvent: (id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => {
       startUfoExperience('smart-link-authenticated', id, {
         extensionKey,
         status: 'success'
       });
       dispatchAnalytics(connectSucceededEvent(definitionId, extensionKey));
     },
-    connectFailedEvent: (id, definitionId, extensionKey, status) => {
+
+    /**
+     * This fires an event that represents an account unsuccessfully being connected.
+     * @param id The unique ID for this Smart Link.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param reason The reason why the Smart Link connect account failed.
+     */
+    connectFailedEvent: (id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, reason) => {
       startUfoExperience('smart-link-authenticated', id, {
         extensionKey,
-        status
+        status: reason
       });
-      dispatchAnalytics(connectFailedEvent(definitionId, extensionKey, status));
+      dispatchAnalytics(connectFailedEvent(definitionId, extensionKey, reason));
     },
-    instrument: (id, status, definitionId, extensionKey, resourceType, error) => {
+
+    /**
+     * This fires an event which represents a Smart Link request succeeding or failing based on the status.
+     * @param id The unique ID for this Smart Link.
+     * @param status The status of the Smart Link.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @param resourceType The type of resource that was invoked. This is provider specific (e.g. File, PullRequest).
+     * @param error An error representing why the Smart Link request failed.
+     */
+    instrument: (id = defaultId, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, resourceType = extractedResourceType, error) => {
       const event = instrumentEvent(id, status, definitionId, extensionKey, resourceType, error);
 
       if (event) {
         dispatchAnalytics(event);
       }
     }
-  }), [dispatchAnalytics]);
+  }), [defaultId, extractedResourceType, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all track analytics events */
+
   const track = useMemo(() => ({
-    appAccountConnected: (definitionId, extensionKey) => dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey))
-  }), [dispatchAnalytics]);
+    /**
+     * This fires an event which represents a user starting the Smart Link connect account process.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @returns
+     */
+    appAccountConnected: (definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(trackAppAccountConnected(definitionId, extensionKey))
+  }), [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all screen analytics events */
+
   const screen = useMemo(() => ({
-    authPopupEvent: (definitionId, extensionKey) => dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey))
-  }), [dispatchAnalytics]);
+    /**
+     * This fires an event which represents the connect account page being opened.
+     * @param definitionId The definitionId of the Smart Link resolver invoked.
+     * @param extensionKey The extensionKey of the Smart Link resovler invoked.
+     * @returns
+     */
+    authPopupEvent: (definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(screenAuthPopupEvent(definitionId, extensionKey))
+  }), [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
   return useMemo(() => ({
     ui,
     operational,

package/dist/es2019/state/hooks/useSmartLink.js

@@ -6,7 +6,7 @@ import { useSmartLinkAnalytics } from '../analytics';
 import { useSmartLinkRenderers } from '../renderers';
 export function useSmartLink(id, url, dispatchAnalytics) {
   const state = useSmartLinkState(url);
-  const analytics = useSmartLinkAnalytics(dispatchAnalytics);
+  const analytics = useSmartLinkAnalytics(url, dispatchAnalytics, id);
   const actions = useSmartLinkActions(id, url, analytics);
   const config = useSmartLinkConfig();
   const renderers = useSmartLinkRenderers(); // NB: used to propagate errors from hooks to error boundaries.

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -14,7 +14,7 @@ export function useSmartLinkActions({
   const id = useMemo(() => uuid(), []);
   const [actions, setActions] = useState([]);
   const linkState = useLinkState(url);
-  const linkAnalytics = useLinkAnalytics(analyticsHandler);
+  const linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
   const linkActions = useLinkActions(id, url, linkAnalytics);
   useEffect(() => {
     if (!linkState.details) {

package/dist/es2019/state/hooks-external/useSmartLinkReload.js

@@ -13,7 +13,7 @@ export function useSmartLinkReload({
   analyticsHandler
 }) {
   const id = useMemo(() => uuid(), []);
-  const linkAnalytics = useLinkAnalytics(analyticsHandler);
+  const linkAnalytics = useLinkAnalytics(url, analyticsHandler, id);
   const linkActions = useLinkActions(id, url, linkAnalytics);
   return linkActions.reload;
 }

package/dist/es2019/state/index.js

@@ -1,2 +1,3 @@
 export { SmartCardContext, SmartCardProvider, useSmartLinkContext } from '@atlaskit/link-provider';
-export { useSmartLink, usePrefetch } from './hooks';
+export { useSmartLink, usePrefetch } from './hooks';
+export { useSmartLinkAnalytics } from './analytics';

package/dist/es2019/utils/analytics/analytics.js

@@ -69,7 +69,7 @@ export const unresolvedEvent = (id, status, definitionId, extensionKey, resource
     } : undefined
   }
 });
-export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
+export const invokeSucceededEvent = (id, actionType, display, extensionKey) => {
   const measure = getMeasure(id, 'resolved') || {
     duration: undefined
   };
@@ -81,12 +81,12 @@ export const invokeSucceededEvent = (id, extensionKey, actionType, display) => {
       id,
       actionType,
       display,
-      extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration
     }
   };
 };
-export const invokeFailedEvent = (id, extensionKey, actionType, display, reason) => {
+export const invokeFailedEvent = (id, actionType, display, reason, extensionKey) => {
   const measure = getMeasure(id, 'errored') || {
     duration: undefined
   };
@@ -98,7 +98,7 @@ export const invokeFailedEvent = (id, extensionKey, actionType, display, reason)
       id,
       actionType,
       display,
-      extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration,
       reason
     }
@@ -169,24 +169,28 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
     display
   }
 });
-export const uiCardClickedEvent = (display, definitionId, extensionKey, isModifierKeyPressed) => ({
+export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
   action: 'clicked',
   actionSubject: 'smartLink',
   eventType: 'ui',
   attributes: { ...context,
+    id,
+    status,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     display,
-    isModifierKeyPressed
+    isModifierKeyPressed,
+    location,
+    destinationProduct
   }
 });
-export const uiActionClickedEvent = (extensionKey, actionType, display) => ({
+export const uiActionClickedEvent = (actionType, extensionKey, display) => ({
   action: 'clicked',
   actionSubject: 'smartLinkAction',
   eventType: 'ui',
   attributes: { ...context,
     display,
-    extensionKey,
+    extensionKey: extensionKey || '',
     actionType: actionType
   }
 });
@@ -208,11 +212,12 @@ export const screenAuthPopupEvent = (definitionId, extensionKey) => ({
     extensionKey: extensionKey || ''
   }
 });
-export const uiRenderSuccessEvent = (display, definitionId, extensionKey) => ({
+export const uiRenderSuccessEvent = (display, status, definitionId, extensionKey) => ({
   action: 'renderSuccess',
   actionSubject: 'smartLink',
   eventType: 'ui',
   attributes: { ...context,
+    status,
     definitionId: definitionId || '',
     extensionKey: extensionKey || '',
     display

package/dist/es2019/utils/analytics/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithData/loader.js

@@ -18,6 +18,7 @@ export class CardWithDataRenderer extends React.PureComponent {
 
   render() {
     const {
+      id,
       appearance,
       data,
       isSelected,
@@ -34,6 +35,7 @@ export class CardWithDataRenderer extends React.PureComponent {
 
     if (CardWithDataRenderer.CardContent) {
       return /*#__PURE__*/React.createElement(CardWithDataRenderer.CardContent, {
+        id: id,
         inlinePreloaderStyle: inlinePreloaderStyle,
         appearance: appearance,
         data: data,