@atlaskit/smart-card 19.1.13 → 19.1.14

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @atlaskit/smart-card
 
+## 19.1.14
+
+### Patch Changes
+
+- [`9d57264a033`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d57264a033) - This update adds an exposed analytics hook, which will pave the way for future usage of Smart Link analytics outside of the smart-card component.
+
+  # Usage of `useSmartLinkAnalytics`
+
+  You can now use `useSmartLinkAnalytics` to create and modify a set of analytics events for the `Card` component to consume.
+
+  ```Typescript
+
+  const CardComponentWithDifferentAnalytics = () => {
+
+    // You can now supply a location, and this will be used in all events.
+    const location = 'this-is-a-test-product';
+
+    // id is optional, but with CRUD operations, you can persist this to keep analytics events related to one link.
+    const id = 'test-id';
+
+    // By default, all events will be supplied with location and id as a fallback.
+    // Calling an event will send it with the default Smart Links analytics channel
+    const analytics = useSmartLinkAnalytics(
+      url,
+      analyticsHandler,
+      id,
+      location,
+    );
+
+    // You can now use all the analytics that Smart Links uses like so:
+    analytics.ui.cardClickedEvent(id, "block", "resolved");
+
+    // You can also override an existing event:
+    // WARNING: Please reach out to #help-linking-platform before modifying events!
+    analytics.ui.renderSuccessEvent = () => {console.log("spaghetti rendered!")};
+
+    // Finally, pass your props in as below!
+    return (
+      <Card id={id} url={url} appearance="block" analyticsEvents={analytics} />
+    );
+  }
+
+  ```
+
+  This update also contains a minor update regarding `location` and `status` for two events. They are now as follows:
+
+  #### `ui.cardClickedEvent`
+
+  - Now contains `location` as described by the `useSmartLinkAnalytics` hook.
+  - Now is fired in `unauthorized`, `errored` and `forbidden` states, with the `status` attribute representing the state of the event.
+
+  #### `ui.renderSuccessEvent`
+
+  - Now contains the `status` attribute, representing the state of the event (`unauthorized`, `errored`, `resolved`, etc.)
+
 ## 19.1.13
 
 ### Patch Changes

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

@@ -86,7 +86,7 @@ var extractPreviewAction = function extractPreviewAction() {
     var previewAction = (0, _BlockCard.PreviewAction)(_objectSpread(_objectSpread({}, metadata), {}, {
       testId: testId,
       onOpen: function onOpen() {
-        handleAnalytics((0, _analytics.uiRenderSuccessEvent)('preview', key));
+        handleAnalytics((0, _analytics.uiRenderSuccessEvent)('preview', 'resolved', key));
       },
       onOpenFailed: function onOpenFailed(error, errorInfo) {
         handleAnalytics((0, _analytics.uiRenderFailedEvent)('preview', error, errorInfo));

package/dist/cjs/index.js

@@ -219,6 +219,12 @@ Object.defineProperty(exports, "metadataListClassName", {
     return _classNames.metadataListClassName;
   }
 });
+Object.defineProperty(exports, "useSmartLinkAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _state.useSmartLinkAnalytics;
+  }
+});
 Object.defineProperty(exports, "useSmartLinkEvents", {
   enumerable: true,
   get: function get() {

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

@@ -7,38 +7,155 @@ exports.useSmartLinkAnalytics = void 0;
 
 var _react = require("react");
 
+var _linkingCommon = require("@atlaskit/linking-common");
+
 var _analytics = require("../../utils/analytics");
 
 var _ufoExperiences = require("./ufoExperiences");
 
-var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
+var _helpers = require("../helpers");
+
+var _linkProvider = require("@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
+ */
+var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytics, id, defaultLocation) {
+  var defaultId = id || 'NULL'; // We don't want to trigger a re-render by using useSmartCardState
+
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+      store = _useSmartLinkContext.store;
+
+  var state = (0, _linkingCommon.getUrl)(store, url);
+  var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
+  var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
+  var extractedResourceType = (0, _helpers.getResourceType)(state.details);
+  /** Contains all ui analytics events */
+
   var ui = (0, _react.useMemo)(function () {
     return {
-      authEvent: function authEvent(display, definitionId, extensionKey) {
+      /**
+       * 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: function authEvent(display) {
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
         return dispatchAnalytics((0, _analytics.uiAuthEvent)(display, definitionId, extensionKey));
       },
-      authAlternateAccountEvent: function authAlternateAccountEvent(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: function authAlternateAccountEvent(display) {
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
         return dispatchAnalytics((0, _analytics.uiAuthAlternateAccountEvent)(display, definitionId, extensionKey));
       },
-      cardClickedEvent: function cardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
-        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(display, definitionId, extensionKey, isModifierKeyPressed));
+
+      /**
+       * 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: function cardClickedEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var display = arguments.length > 1 ? arguments[1] : undefined;
+        var status = arguments.length > 2 ? arguments[2] : undefined;
+        var definitionId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedDefinitionId;
+        var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
+        var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
+        var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
+        var destinationProduct = arguments.length > 7 ? arguments[7] : undefined;
+        return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct));
       },
-      actionClickedEvent: function actionClickedEvent(id, extensionKey, actionType, display, invokeType) {
+
+      /**
+       * 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: function actionClickedEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var extensionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedExtensionKey;
+        var actionType = arguments.length > 2 ? arguments[2] : undefined;
+        var display = arguments.length > 3 ? arguments[3] : undefined;
+        var invokeType = arguments.length > 4 ? arguments[4] : undefined;
         (0, _ufoExperiences.startUfoExperience)('smart-link-action-invocation', id, {
           actionType: actionType,
           display: display,
           extensionKey: extensionKey,
           invokeType: invokeType
         });
-        dispatchAnalytics((0, _analytics.uiActionClickedEvent)(extensionKey, actionType, display));
+        dispatchAnalytics((0, _analytics.uiActionClickedEvent)(actionType, extensionKey, display));
       },
-      hoverCardOpenLinkClickedEvent: function 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: function hoverCardOpenLinkClickedEvent(previewDisplay) {
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
+        var previewInvokeMethod = arguments.length > 3 ? arguments[3] : undefined;
         dispatchAnalytics((0, _analytics.uiHoverCardOpenLinkClickedEvent)(previewDisplay, definitionId, extensionKey, previewInvokeMethod));
       },
-      closedAuthEvent: function closedAuthEvent(display, 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: function closedAuthEvent(display) {
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
         return dispatchAnalytics((0, _analytics.uiClosedAuthEvent)(display, definitionId, extensionKey));
       },
-      renderSuccessEvent: function renderSuccessEvent(display, id, 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: function renderSuccessEvent(display, status) {
+        var id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultId;
+        var definitionId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedDefinitionId;
+        var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
         (0, _ufoExperiences.succeedUfoExperience)('smart-link-rendered', id, {
           extensionKey: extensionKey,
           display: display
@@ -47,47 +164,131 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
         (0, _ufoExperiences.succeedUfoExperience)('smart-link-authenticated', id, {
           display: display
         });
-        dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, definitionId, extensionKey));
+        dispatchAnalytics((0, _analytics.uiRenderSuccessEvent)(display, status, definitionId, extensionKey));
       },
-      hoverCardViewedEvent: function hoverCardViewedEvent(hoverDisplay, definitionId, extensionKey, previewInvokeMethod) {
+
+      /**
+       * 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: function hoverCardViewedEvent(hoverDisplay) {
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
+        var previewInvokeMethod = arguments.length > 3 ? arguments[3] : undefined;
         return dispatchAnalytics((0, _analytics.uiHoverCardViewedEvent)(hoverDisplay, definitionId, extensionKey, previewInvokeMethod));
       },
-      hoverCardDismissedEvent: function hoverCardDismissedEvent(hoverDisplay, hoverTime, 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: function hoverCardDismissedEvent(hoverDisplay, hoverTime) {
+        var definitionId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedDefinitionId;
+        var extensionKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedExtensionKey;
+        var previewInvokeMethod = arguments.length > 4 ? arguments[4] : undefined;
         return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(hoverDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
       }
     };
-  }, [dispatchAnalytics]);
+  }, [defaultId, defaultLocation, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all operational analytics events */
+
   var operational = (0, _react.useMemo)(function () {
     return {
-      resolvedEvent: function resolvedEvent(id, definitionId, extensionKey, resourceType) {
-        return dispatchAnalytics((0, _analytics.resolvedEvent)(id, definitionId, extensionKey, resourceType));
-      },
-      unresolvedEvent: function unresolvedEvent(id, status, definitionId, extensionKey, resourceType) {
-        return dispatchAnalytics((0, _analytics.unresolvedEvent)(id, status, definitionId, extensionKey, resourceType));
-      },
-      invokeSucceededEvent: function 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: function invokeSucceededEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var extensionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedExtensionKey;
+        var actionType = arguments.length > 2 ? arguments[2] : undefined;
+        var display = arguments.length > 3 ? arguments[3] : undefined;
         (0, _ufoExperiences.succeedUfoExperience)('smart-link-action-invocation', id);
-        dispatchAnalytics((0, _analytics.invokeSucceededEvent)(id, providerKey, actionType, display));
+        dispatchAnalytics((0, _analytics.invokeSucceededEvent)(id, actionType, display, extensionKey));
       },
-      invokeFailedEvent: function 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: function invokeFailedEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var providerKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedExtensionKey;
+        var actionType = arguments.length > 2 ? arguments[2] : undefined;
+        var display = arguments.length > 3 ? arguments[3] : undefined;
+        var reason = arguments.length > 4 ? arguments[4] : undefined;
         (0, _ufoExperiences.failUfoExperience)('smart-link-action-invocation', id);
-        dispatchAnalytics((0, _analytics.invokeFailedEvent)(id, providerKey, actionType, display, reason));
+        dispatchAnalytics((0, _analytics.invokeFailedEvent)(id, actionType, display, reason, providerKey));
       },
-      connectSucceededEvent: function 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: function connectSucceededEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
         (0, _ufoExperiences.startUfoExperience)('smart-link-authenticated', id, {
           extensionKey: extensionKey,
           status: 'success'
         });
         dispatchAnalytics((0, _analytics.connectSucceededEvent)(definitionId, extensionKey));
       },
-      connectFailedEvent: function 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: function connectFailedEvent() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var definitionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedDefinitionId;
+        var extensionKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedExtensionKey;
+        var reason = arguments.length > 3 ? arguments[3] : undefined;
         (0, _ufoExperiences.startUfoExperience)('smart-link-authenticated', id, {
           extensionKey: extensionKey,
-          status: status
+          status: reason
         });
-        dispatchAnalytics((0, _analytics.connectFailedEvent)(definitionId, extensionKey, status));
+        dispatchAnalytics((0, _analytics.connectFailedEvent)(definitionId, extensionKey, reason));
       },
-      instrument: function 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: function instrument() {
+        var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+        var status = arguments.length > 1 ? arguments[1] : undefined;
+        var definitionId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : extractedDefinitionId;
+        var extensionKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : extractedExtensionKey;
+        var resourceType = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedResourceType;
+        var error = arguments.length > 5 ? arguments[5] : undefined;
         var event = (0, _analytics.instrumentEvent)(id, status, definitionId, extensionKey, resourceType, error);
 
         if (event) {
@@ -95,21 +296,41 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(dispatchAnalytics) {
         }
       }
     };
-  }, [dispatchAnalytics]);
+  }, [defaultId, extractedResourceType, extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all track analytics events */
+
   var track = (0, _react.useMemo)(function () {
     return {
-      appAccountConnected: function appAccountConnected(definitionId, extensionKey) {
+      /**
+       * 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: function appAccountConnected() {
+        var definitionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : extractedDefinitionId;
+        var extensionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedExtensionKey;
         return dispatchAnalytics((0, _analytics.trackAppAccountConnected)(definitionId, extensionKey));
       }
     };
-  }, [dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
+  /** Contains all screen analytics events */
+
   var screen = (0, _react.useMemo)(function () {
     return {
-      authPopupEvent: function authPopupEvent(definitionId, extensionKey) {
+      /**
+       * 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: function authPopupEvent() {
+        var definitionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : extractedDefinitionId;
+        var extensionKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : extractedExtensionKey;
         return dispatchAnalytics((0, _analytics.screenAuthPopupEvent)(definitionId, extensionKey));
       }
     };
-  }, [dispatchAnalytics]);
+  }, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics]);
   return (0, _react.useMemo)(function () {
     return {
       ui: ui,

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

@@ -23,7 +23,7 @@ var _renderers = require("../renderers");
 
 function useSmartLink(id, url, dispatchAnalytics) {
   var state = (0, _store.useSmartCardState)(url);
-  var analytics = (0, _analytics.useSmartLinkAnalytics)(dispatchAnalytics);
+  var analytics = (0, _analytics.useSmartLinkAnalytics)(url, dispatchAnalytics, id);
   var actions = (0, _actions.useSmartCardActions)(id, url, analytics);
   var config = (0, _config.useSmartLinkConfig)();
   var renderers = (0, _renderers.useSmartLinkRenderers)(); // NB: used to propagate errors from hooks to error boundaries.

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

@@ -39,7 +39,7 @@ function useSmartLinkActions(_ref) {
       setActions = _useState2[1];
 
   var linkState = (0, _store.useSmartCardState)(url);
-  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(analyticsHandler);
+  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
   var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
   (0, _react.useEffect)(function () {
     if (!linkState.details) {

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

@@ -26,7 +26,7 @@ function useSmartLinkReload(_ref) {
   var id = (0, _react.useMemo)(function () {
     return (0, _uuid.default)();
   }, []);
-  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(analyticsHandler);
+  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(url, analyticsHandler, id);
   var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
   return linkActions.reload;
 }

package/dist/cjs/state/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "useSmartLink", {
     return _hooks.useSmartLink;
   }
 });
+Object.defineProperty(exports, "useSmartLinkAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.useSmartLinkAnalytics;
+  }
+});
 Object.defineProperty(exports, "useSmartLinkContext", {
   enumerable: true,
   get: function get() {
@@ -36,4 +42,6 @@ Object.defineProperty(exports, "useSmartLinkContext", {
 
 var _linkProvider = require("@atlaskit/link-provider");
 
-var _hooks = require("./hooks");
+var _hooks = require("./hooks");
+
+var _analytics = require("./analytics");

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

@@ -109,7 +109,7 @@ var unresolvedEvent = function unresolvedEvent(id, status, definitionId, extensi
 
 exports.unresolvedEvent = unresolvedEvent;
 
-var invokeSucceededEvent = function invokeSucceededEvent(id, extensionKey, actionType, display) {
+var invokeSucceededEvent = function invokeSucceededEvent(id, actionType, display, extensionKey) {
   var measure = (0, _performance.getMeasure)(id, 'resolved') || {
     duration: undefined
   };
@@ -121,7 +121,7 @@ var invokeSucceededEvent = function invokeSucceededEvent(id, extensionKey, actio
       id: id,
       actionType: actionType,
       display: display,
-      extensionKey: extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration
     })
   };
@@ -129,7 +129,7 @@ var invokeSucceededEvent = function invokeSucceededEvent(id, extensionKey, actio
 
 exports.invokeSucceededEvent = invokeSucceededEvent;
 
-var invokeFailedEvent = function invokeFailedEvent(id, extensionKey, actionType, display, reason) {
+var invokeFailedEvent = function invokeFailedEvent(id, actionType, display, reason, extensionKey) {
   var measure = (0, _performance.getMeasure)(id, 'errored') || {
     duration: undefined
   };
@@ -141,7 +141,7 @@ var invokeFailedEvent = function invokeFailedEvent(id, extensionKey, actionType,
       id: id,
       actionType: actionType,
       display: display,
-      extensionKey: extensionKey,
+      extensionKey: extensionKey || '',
       duration: measure.duration,
       reason: reason
     })
@@ -230,30 +230,34 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
 
 exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
 
-var uiCardClickedEvent = function uiCardClickedEvent(display, definitionId, extensionKey, isModifierKeyPressed) {
+var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
   return {
     action: 'clicked',
     actionSubject: 'smartLink',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      id: id,
+      status: status,
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
       display: display,
-      isModifierKeyPressed: isModifierKeyPressed
+      isModifierKeyPressed: isModifierKeyPressed,
+      location: location,
+      destinationProduct: destinationProduct
     })
   };
 };
 
 exports.uiCardClickedEvent = uiCardClickedEvent;
 
-var uiActionClickedEvent = function uiActionClickedEvent(extensionKey, actionType, display) {
+var uiActionClickedEvent = function uiActionClickedEvent(actionType, extensionKey, display) {
   return {
     action: 'clicked',
     actionSubject: 'smartLinkAction',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
       display: display,
-      extensionKey: extensionKey,
+      extensionKey: extensionKey || '',
       actionType: actionType
     })
   };
@@ -289,12 +293,13 @@ var screenAuthPopupEvent = function screenAuthPopupEvent(definitionId, extension
 
 exports.screenAuthPopupEvent = screenAuthPopupEvent;
 
-var uiRenderSuccessEvent = function uiRenderSuccessEvent(display, definitionId, extensionKey) {
+var uiRenderSuccessEvent = function uiRenderSuccessEvent(display, status, definitionId, extensionKey) {
   return {
     action: 'renderSuccess',
     actionSubject: 'smartLink',
     eventType: 'ui',
     attributes: _objectSpread(_objectSpread({}, context), {}, {
+      status: status,
       definitionId: definitionId || '',
       extensionKey: extensionKey || '',
       display: display

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

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

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

@@ -52,6 +52,7 @@ var CardWithDataRenderer = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          id = _this$props.id,
           appearance = _this$props.appearance,
           data = _this$props.data,
           isSelected = _this$props.isSelected,
@@ -67,6 +68,7 @@ var CardWithDataRenderer = /*#__PURE__*/function (_React$PureComponent) {
 
       if (CardWithDataRenderer.CardContent) {
         return /*#__PURE__*/_react.default.createElement(CardWithDataRenderer.CardContent, {
+          id: id,
           inlinePreloaderStyle: inlinePreloaderStyle,
           appearance: appearance,
           data: data,