@atlaskit/smart-card 26.41.3 → 26.42.1

package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -13,6 +13,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
 import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
 import { useIntl } from 'react-intl-next';
 import extractHostname from '../../../../extractors/common/hostname/extractHostname';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -26,6 +27,9 @@ const FlexibleForbiddenView = ({
   ...props
 }) => {
   var _details$meta;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const intl = useIntl();
   const {
     cardState,
@@ -47,9 +51,10 @@ const FlexibleForbiddenView = ({
     return extractRequestAccessContextImproved({
       jsonLd: cardMetadata,
       url,
-      product: providerName
+      product: providerName,
+      createAnalyticsEvent
     });
-  }, [cardMetadata, providerName, url]);
+  }, [cardMetadata, providerName, url, createAnalyticsEvent]);
   const title = useMemo(() => {
     const descriptor = toMessage(messages.invalid_permissions, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey);
     return intl.formatMessage(descriptor, {

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

@@ -18,6 +18,7 @@ import { EmbedCardErroredView } from './views/ErroredView';
 import ForbiddenView from './views/forbidden-view';
 import NotFoundView from './views/not-found-view';
 import UnauthorizedView from './views/unauthorized-view';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   url,
   cardState: {
@@ -43,6 +44,9 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   iframeUrlType
 }, iframeRef) => {
   var _details$meta, _forbiddenViewProps$c3;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const data = details && details.data || getEmptyJsonLd();
   const meta = details && details.meta;
   const extensionKey = getExtensionKey(details);
@@ -152,7 +156,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         const accessContext = extractRequestAccessContextImproved({
           jsonLd: cardMetadata,
           url,
-          product: (_forbiddenViewProps$c = (_forbiddenViewProps$c2 = forbiddenViewProps.context) === null || _forbiddenViewProps$c2 === void 0 ? void 0 : _forbiddenViewProps$c2.text) !== null && _forbiddenViewProps$c !== void 0 ? _forbiddenViewProps$c : ''
+          product: (_forbiddenViewProps$c = (_forbiddenViewProps$c2 = forbiddenViewProps.context) === null || _forbiddenViewProps$c2 === void 0 ? void 0 : _forbiddenViewProps$c2.text) !== null && _forbiddenViewProps$c !== void 0 ? _forbiddenViewProps$c : '',
+          createAnalyticsEvent
         });
         return /*#__PURE__*/React.createElement(ForbiddenView, {
           context: forbiddenViewProps.context,
@@ -189,7 +194,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         const accessContext = details !== null && details !== void 0 && details.meta ? extractRequestAccessContextImproved({
           jsonLd: details === null || details === void 0 ? void 0 : details.meta,
           url,
-          product: (_notFoundViewProps$co = (_notFoundViewProps$co2 = notFoundViewProps.context) === null || _notFoundViewProps$co2 === void 0 ? void 0 : _notFoundViewProps$co2.text) !== null && _notFoundViewProps$co !== void 0 ? _notFoundViewProps$co : ''
+          product: (_notFoundViewProps$co = (_notFoundViewProps$co2 = notFoundViewProps.context) === null || _notFoundViewProps$co2 === void 0 ? void 0 : _notFoundViewProps$co2.text) !== null && _notFoundViewProps$co !== void 0 ? _notFoundViewProps$co : '',
+          createAnalyticsEvent
         }) : undefined;
         return /*#__PURE__*/React.createElement(NotFoundView, {
           context: notFoundViewProps.context,

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/analytics.js

@@ -0,0 +1,19 @@
+import { ANALYTICS_CHANNEL } from '../../../../../utils/analytics';
+const createTrackRelatedLinksLoadedEventPayload = ({
+  relatedLinksCount
+}) => ({
+  action: 'loaded',
+  actionSubject: 'relatedLinks',
+  eventType: 'track',
+  attributes: {
+    relatedLinksCount
+  }
+});
+export const fireRelatedLinksLoadedEvent = createAnalyticsEvent => attributes => {
+  const payload = createTrackRelatedLinksLoadedEventPayload(attributes);
+  if (payload) {
+    createAnalyticsEvent({
+      ...payload
+    }).fire(ANALYTICS_CHANNEL);
+  }
+};

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/index.js

@@ -2,10 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
 import { di } from 'react-magnetic-di';
 import { css } from '@emotion/react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useRelatedUrls from '../../../../../state/hooks/use-related-urls';
 import { RelatedUrlsBlockErroredView } from './errored';
 import { RelatedUrlsResolvedView } from './resolved';
 import { RelatedUrlsBlockResolvingView } from './resolving';
+import { fireRelatedLinksLoadedEvent } from './analytics';
 /**
  * Represents a block to display related resources of a url
  */
@@ -15,6 +17,9 @@ const RelatedUrlsBlock = ({
   renderers,
   ...blockProps
 }) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const [loadingRelatedUrls, setLoadingRelatedUrls] = useState(true);
   const [err, setErr] = useState();
   const [relatedUrls, setRelatedUrls] = useState();
@@ -22,15 +27,23 @@ const RelatedUrlsBlock = ({
   useEffect(() => {
     const fetchRelatedUrls = async () => {
       try {
+        var _relUrls$resolvedResu, _relUrls$resolvedResu2;
         const relUrls = await getRelatedUrls(url);
         setRelatedUrls(relUrls);
+
+        /**
+         * Fire TrackRelatedLinksLoadedEvent
+         */
+        fireRelatedLinksLoadedEvent(createAnalyticsEvent)({
+          relatedLinksCount: (_relUrls$resolvedResu = (_relUrls$resolvedResu2 = relUrls.resolvedResults) === null || _relUrls$resolvedResu2 === void 0 ? void 0 : _relUrls$resolvedResu2.length) !== null && _relUrls$resolvedResu !== void 0 ? _relUrls$resolvedResu : 0
+        });
       } catch (error) {
         setErr(error);
       }
       setLoadingRelatedUrls(false);
     };
     fetchRelatedUrls();
-  }, [getRelatedUrls, url]);
+  }, [createAnalyticsEvent, getRelatedUrls, url]);
   if (loadingRelatedUrls) {
     return /*#__PURE__*/React.createElement(RelatedUrlsBlockResolvingView, _extends({
       testId: `${testId}-resolving-view`

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 import { messages } from '../../../../../../../messages';
 import { getFormattedMessageAsString } from '../../../../../components/utils';
 import Text from '../../../../elements/text';
-import RelatedUrlItem from './related-url-item';
+import ResolvedResultsStack from './resolved-result-stack';
 const RelatedUrlList = ({
   resolvedResults,
   title,
@@ -19,17 +19,6 @@ const RelatedUrlList = ({
   const chevronClickHandler = useCallback(() => setIsOpen(!isOpen), [isOpen]);
   const ChevronComponent = isOpen ? ChevronUpIcon : ChevronDownIcon;
   const intl = useIntl();
-  const resolvedResultsStack = useMemo(() => {
-    return /*#__PURE__*/React.createElement(Stack, {
-      space: "space.050",
-      testId: `${testId}-items-wrapper`
-    }, resolvedResults.map((resolvedResults, idx) => /*#__PURE__*/React.createElement(RelatedUrlItem, {
-      testId: `${testId}-item`,
-      key: idx,
-      results: resolvedResults,
-      renderers: renderers
-    })));
-  }, [renderers, resolvedResults, testId]);
   return resolvedResults.length > 0 ? /*#__PURE__*/React.createElement(Stack, {
     testId: testId,
     xcss: xcss({
@@ -37,7 +26,11 @@ const RelatedUrlList = ({
     })
   }, /*#__PURE__*/React.createElement(Box, {
     onClick: chevronClickHandler,
-    testId: `${testId}-expand-title`
+    testId: `${testId}-expand-title`,
+    as: "button",
+    backgroundColor: "color.background.neutral.subtle",
+    "aria-expanded": !!isOpen,
+    padding: "space.0"
   }, /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     spread: "space-between"
@@ -51,7 +44,11 @@ const RelatedUrlList = ({
   }), /*#__PURE__*/React.createElement(ChevronComponent, {
     label: getFormattedMessageAsString(intl, title),
     size: 'medium'
-  }))), isOpen && resolvedResultsStack) : /*#__PURE__*/React.createElement(Text, {
+  }))), isOpen && /*#__PURE__*/React.createElement(ResolvedResultsStack, {
+    resolvedResults: resolvedResults,
+    testId: testId,
+    renderers: renderers
+  })) : /*#__PURE__*/React.createElement(Text, {
     testId: testId,
     message: {
       descriptor: messages.related_work_items_not_found

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js

@@ -1,19 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Inline } from '@atlaskit/primitives';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { SmartLinkSize } from '../../../../../../../../constants';
 import extractFlexibleUiContext from '../../../../../../../../extractors/flexible';
 import Icon from '../../../../../elements/icon';
 import Link from '../../../../../elements/link';
+import { fireLinkClickedEvent } from '../../../../../../../../utils/analytics/click';
 const RelatedUrlItem = ({
   results,
   renderers,
   testId
 }) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const flexibleDataContext = useMemo(() => extractFlexibleUiContext({
     response: results,
     renderers
   }), [renderers, results]);
+  const onClick = useCallback(event => {
+    fireLinkClickedEvent(createAnalyticsEvent)(event);
+  }, [createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     space: "space.050",
@@ -26,7 +34,8 @@ const RelatedUrlItem = ({
     text: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.title,
     url: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.url,
     size: SmartLinkSize.Small,
-    maxLines: 1
+    maxLines: 1,
+    onClick: onClick
   }));
 };
 export default RelatedUrlItem;

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/resolved-result-stack/analytics.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
+import { ANALYTICS_CHANNEL } from '../../../../../../../../utils/analytics';
+const createUiRelatedLinksViewedEventPayload = ({
+  relatedLinksCount
+}) => ({
+  action: 'viewed',
+  actionSubject: 'relatedLinks',
+  eventType: 'ui',
+  attributes: {
+    relatedLinksCount
+  }
+});
+export const fireRelatedLinksViewedEvent = createAnalyticsEvent => attributes => {
+  const payload = createUiRelatedLinksViewedEventPayload(attributes);
+  if (payload) {
+    createAnalyticsEvent({
+      ...payload
+    }).fire(ANALYTICS_CHANNEL);
+  }
+};
+export const RelatedUrlItemAnalyticsContext = props => {
+  const {
+    children,
+    details
+  } = props;
+
+  /**
+   * We don't really need the `url` to get the attributes here so set
+   * it to an empty string to just make typescript happy
+   */
+  const attributes = getResolvedAttributes({
+    url: ''
+  }, details);
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      attributes,
+      component: 'relatedLink'
+    }
+  }, children);
+};

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/resolved-result-stack/index.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { Stack, xcss } from '@atlaskit/primitives';
+import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';
+import RelatedUrlItem from '../related-url-item';
+import { RelatedUrlItemAnalyticsContext, fireRelatedLinksViewedEvent } from './analytics';
+const ResolvedResultsStack = ({
+  resolvedResults,
+  testId,
+  renderers
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useEffect(() => {
+    // This event will fire each time the component is loaded
+    fireRelatedLinksViewedEvent(createAnalyticsEvent)({
+      relatedLinksCount: resolvedResults.length
+    });
+  }, [resolvedResults.length, createAnalyticsEvent]);
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050",
+    testId: `${testId}-items-wrapper`,
+    as: "ul",
+    xcss: xcss({
+      paddingLeft: '0px',
+      marginTop: '0px'
+    })
+  }, resolvedResults.map((resolvedResults, idx) => /*#__PURE__*/React.createElement(RelatedUrlItemAnalyticsContext, {
+    details: resolvedResults,
+    key: idx
+  }, /*#__PURE__*/React.createElement(RelatedUrlItem, {
+    testId: `${testId}-item`,
+    results: resolvedResults,
+    renderers: renderers
+  }))));
+};
+const ResolvedResultsStackWithAnalytics = props => {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      component: 'relatedLinksSection'
+    }
+  }, /*#__PURE__*/React.createElement(ResolvedResultsStack, props));
+};
+export default ResolvedResultsStackWithAnalytics;

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/resolved-result-stack/types.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/types.js

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

package/dist/es2019/view/HoverCard/components/views/forbidden/index.js

@@ -10,11 +10,15 @@ import { connectButtonStyles, mainTextStyles, titleBlockStyles } from './styled'
 import { getPreviewBlockStyles } from '../../../styled';
 import { extractRequestAccessContextImproved } from '../../../../../extractors/common/context/extractAccessContext';
 import extractHostname from '../../../../../extractors/common/hostname/extractHostname';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 const HoverCardForbiddenView = ({
   flexibleCardProps,
   testId = 'hover-card-forbidden-view'
 }) => {
   var _cardState$details, _cardState$details2, _extractProvider$text, _extractProvider, _extractRequestAccess;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const {
     cardState,
     url
@@ -31,7 +35,8 @@ const HoverCardForbiddenView = ({
   } = (_extractRequestAccess = extractRequestAccessContextImproved({
     jsonLd: meta,
     url,
-    product
+    product,
+    createAnalyticsEvent
   })) !== null && _extractRequestAccess !== void 0 ? _extractRequestAccess : {};
   if (!titleMessageKey || !descriptiveMessageKey) {
     return null;
@@ -58,9 +63,9 @@ const HoverCardForbiddenView = ({
       hostname
     }
   }))), action && /*#__PURE__*/React.createElement(CustomBlock, {
-    overrideCss: connectButtonStyles,
-    testId: `${testId}-button`
+    overrideCss: connectButtonStyles
   }, /*#__PURE__*/React.createElement(Button, {
+    testId: `${testId}-button`,
     onClick: action === null || action === void 0 ? void 0 : action.promise,
     appearance: "primary",
     isDisabled: buttonDisabled

package/dist/es2019/view/LinkUrl/index.js

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.41.3",
+  packageVersion: "26.42.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/index.js

@@ -14,6 +14,7 @@ import { extractProvider } from '@atlaskit/link-extractors';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { getExtensionKey } from '../../state/helpers';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 export { InlineCardResolvedView, InlineCardResolvingView, InlineCardErroredView, InlineCardForbiddenView, InlineCardUnauthorizedView };
 export const InlineCard = ({
   analytics,
@@ -33,6 +34,9 @@ export const InlineCard = ({
   showServerActions
 }) => {
   var _details$meta, _providerForbidden$te;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const {
     status,
     details
@@ -104,7 +108,8 @@ export const InlineCard = ({
       const requestAccessContext = getBooleanFF('platform.linking-platform.smart-card.cross-join') ? extractRequestAccessContextImproved({
         jsonLd: cardMetadata,
         url,
-        product: (_providerForbidden$te = providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text) !== null && _providerForbidden$te !== void 0 ? _providerForbidden$te : ''
+        product: (_providerForbidden$te = providerForbidden === null || providerForbidden === void 0 ? void 0 : providerForbidden.text) !== null && _providerForbidden$te !== void 0 ? _providerForbidden$te : '',
+        createAnalyticsEvent
       }) : extractRequestAccessContext({
         jsonLd: cardMetadata,
         url,

package/dist/esm/extractors/common/context/extractAccessContext.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { messages } from '../../../messages';
 import { ForbiddenAction } from '../../../view/BlockCard/actions/ForbiddenAction';
 import extractHostname from '../hostname/extractHostname';
+import { ANALYTICS_CHANNEL } from '../../../utils/analytics';
 export var extractRequestAccessContext = function extractRequestAccessContext(_ref) {
   var _jsonLd$requestAccess;
   var jsonLd = _ref.jsonLd,
@@ -50,7 +51,8 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
   var _jsonLd$requestAccess2;
   var jsonLd = _ref2.jsonLd,
     url = _ref2.url,
-    product = _ref2.product;
+    product = _ref2.product,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent;
   var requestAccess = jsonLd !== null && jsonLd !== void 0 && jsonLd.requestAccess ? _objectSpread(_objectSpread({}, jsonLd === null || jsonLd === void 0 ? void 0 : jsonLd.requestAccess), {}, {
     hostname: extractHostname(url)
   }) : undefined;
@@ -61,7 +63,13 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
         descriptiveMessageKey: 'direct_access_description_crossjoin',
         callToActionMessageKey: 'direct_access_crossjoin',
         action: ForbiddenAction(function () {
-          return window.open(url);
+          createAnalyticsEvent({
+            action: 'clicked',
+            actionSubject: 'button',
+            actionSubjectId: 'crossJoin',
+            eventType: 'ui'
+          }).fire(ANALYTICS_CHANNEL);
+          window.open(url);
         }, 'direct_access', messages.direct_access_crossjoin, {
           product: product
         })
@@ -72,7 +80,13 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
         descriptiveMessageKey: 'request_access_description_crossjoin',
         callToActionMessageKey: 'request_access_crossjoin',
         action: ForbiddenAction(function () {
-          return window.open(url);
+          createAnalyticsEvent({
+            action: 'clicked',
+            actionSubject: 'button',
+            actionSubjectId: 'requestAccess',
+            eventType: 'ui'
+          }).fire(ANALYTICS_CHANNEL);
+          window.open(url);
         }, 'request_access', messages.request_access_crossjoin)
       });
     case 'PENDING_REQUEST_EXISTS':
@@ -102,7 +116,13 @@ export var extractRequestAccessContextImproved = function extractRequestAccessCo
         descriptiveMessageKey: 'access_exists_description_crossjoin',
         callToActionMessageKey: 'request_access_crossjoin',
         action: ForbiddenAction(function () {
-          return window.open(url);
+          createAnalyticsEvent({
+            action: 'clicked',
+            actionSubject: 'button',
+            actionSubjectId: 'requestAccess',
+            eventType: 'ui'
+          }).fire(ANALYTICS_CHANNEL);
+          window.open(url);
         }, 'access_exists', messages.request_access_crossjoin)
       });
     case 'FORBIDDEN':

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.41.3"
+  packageVersion: "26.42.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js

@@ -16,6 +16,7 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
 import { extractRequestAccessContextImproved } from '../../../../extractors/common/context/extractAccessContext';
 import { useIntl } from 'react-intl-next';
 import extractHostname from '../../../../extractors/common/hostname/extractHostname';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 
 /**
  * This view represent a Block Card with the 'Forbidden' status.
@@ -29,6 +30,8 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
   var _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-block-forbidden-view' : _ref$testId,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var intl = useIntl();
   var cardState = props.cardState,
     onAuthorize = props.onAuthorize,
@@ -48,9 +51,10 @@ var FlexibleForbiddenView = function FlexibleForbiddenView(_ref) {
     return extractRequestAccessContextImproved({
       jsonLd: cardMetadata,
       url: url,
-      product: providerName
+      product: providerName,
+      createAnalyticsEvent: createAnalyticsEvent
     });
-  }, [cardMetadata, providerName, url]);
+  }, [cardMetadata, providerName, url, createAnalyticsEvent]);
   var title = useMemo(function () {
     var descriptor = toMessage(messages.invalid_permissions, requestAccessContext === null || requestAccessContext === void 0 ? void 0 : requestAccessContext.titleMessageKey);
     return intl.formatMessage(descriptor, {

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

@@ -18,6 +18,7 @@ import { EmbedCardErroredView } from './views/ErroredView';
 import ForbiddenView from './views/forbidden-view';
 import NotFoundView from './views/not-found-view';
 import UnauthorizedView from './views/unauthorized-view';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c3;
   var url = _ref.url,
@@ -41,6 +42,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
     onIframeDwell = _ref.onIframeDwell,
     onIframeFocus = _ref.onIframeFocus,
     iframeUrlType = _ref.iframeUrlType;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var data = details && details.data || getEmptyJsonLd();
   var meta = details && details.meta;
   var extensionKey = getExtensionKey(details);
@@ -150,7 +153,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         var accessContext = extractRequestAccessContextImproved({
           jsonLd: cardMetadata,
           url: url,
-          product: (_forbiddenViewProps$c = (_forbiddenViewProps$c2 = forbiddenViewProps.context) === null || _forbiddenViewProps$c2 === void 0 ? void 0 : _forbiddenViewProps$c2.text) !== null && _forbiddenViewProps$c !== void 0 ? _forbiddenViewProps$c : ''
+          product: (_forbiddenViewProps$c = (_forbiddenViewProps$c2 = forbiddenViewProps.context) === null || _forbiddenViewProps$c2 === void 0 ? void 0 : _forbiddenViewProps$c2.text) !== null && _forbiddenViewProps$c !== void 0 ? _forbiddenViewProps$c : '',
+          createAnalyticsEvent: createAnalyticsEvent
         });
         return /*#__PURE__*/React.createElement(ForbiddenView, {
           context: forbiddenViewProps.context,
@@ -187,7 +191,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         var _accessContext = details !== null && details !== void 0 && details.meta ? extractRequestAccessContextImproved({
           jsonLd: details === null || details === void 0 ? void 0 : details.meta,
           url: url,
-          product: (_notFoundViewProps$co = (_notFoundViewProps$co2 = notFoundViewProps.context) === null || _notFoundViewProps$co2 === void 0 ? void 0 : _notFoundViewProps$co2.text) !== null && _notFoundViewProps$co !== void 0 ? _notFoundViewProps$co : ''
+          product: (_notFoundViewProps$co = (_notFoundViewProps$co2 = notFoundViewProps.context) === null || _notFoundViewProps$co2 === void 0 ? void 0 : _notFoundViewProps$co2.text) !== null && _notFoundViewProps$co !== void 0 ? _notFoundViewProps$co : '',
+          createAnalyticsEvent: createAnalyticsEvent
         }) : undefined;
         return /*#__PURE__*/React.createElement(NotFoundView, {
           context: notFoundViewProps.context,

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/analytics.js

@@ -0,0 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ANALYTICS_CHANNEL } from '../../../../../utils/analytics';
+var createTrackRelatedLinksLoadedEventPayload = function createTrackRelatedLinksLoadedEventPayload(_ref) {
+  var relatedLinksCount = _ref.relatedLinksCount;
+  return {
+    action: 'loaded',
+    actionSubject: 'relatedLinks',
+    eventType: 'track',
+    attributes: {
+      relatedLinksCount: relatedLinksCount
+    }
+  };
+};
+export var fireRelatedLinksLoadedEvent = function fireRelatedLinksLoadedEvent(createAnalyticsEvent) {
+  return function (attributes) {
+    var payload = createTrackRelatedLinksLoadedEventPayload(attributes);
+    if (payload) {
+      createAnalyticsEvent(_objectSpread({}, payload)).fire(ANALYTICS_CHANNEL);
+    }
+  };
+};

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/index.js

@@ -9,10 +9,12 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
 import { di } from 'react-magnetic-di';
 import { css } from '@emotion/react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import useRelatedUrls from '../../../../../state/hooks/use-related-urls';
 import { RelatedUrlsBlockErroredView } from './errored';
 import { RelatedUrlsResolvedView } from './resolved';
 import { RelatedUrlsBlockResolvingView } from './resolving';
+import { fireRelatedLinksLoadedEvent } from './analytics';
 /**
  * Represents a block to display related resources of a url
  */
@@ -22,6 +24,8 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
     url = _ref.url,
     renderers = _ref.renderers,
     blockProps = _objectWithoutProperties(_ref, _excluded);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     loadingRelatedUrls = _useState2[0],
@@ -38,7 +42,7 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
   useEffect(function () {
     var fetchRelatedUrls = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var relUrls;
+        var _relUrls$resolvedResu, _relUrls$resolvedResu2, relUrls;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -48,26 +52,33 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
             case 3:
               relUrls = _context.sent;
               setRelatedUrls(relUrls);
-              _context.next = 10;
+
+              /**
+               * Fire TrackRelatedLinksLoadedEvent
+               */
+              fireRelatedLinksLoadedEvent(createAnalyticsEvent)({
+                relatedLinksCount: (_relUrls$resolvedResu = (_relUrls$resolvedResu2 = relUrls.resolvedResults) === null || _relUrls$resolvedResu2 === void 0 ? void 0 : _relUrls$resolvedResu2.length) !== null && _relUrls$resolvedResu !== void 0 ? _relUrls$resolvedResu : 0
+              });
+              _context.next = 11;
               break;
-            case 7:
-              _context.prev = 7;
+            case 8:
+              _context.prev = 8;
               _context.t0 = _context["catch"](0);
               setErr(_context.t0);
-            case 10:
-              setLoadingRelatedUrls(false);
             case 11:
+              setLoadingRelatedUrls(false);
+            case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 7]]);
+        }, _callee, null, [[0, 8]]);
       }));
       return function fetchRelatedUrls() {
         return _ref2.apply(this, arguments);
       };
     }();
     fetchRelatedUrls();
-  }, [getRelatedUrls, url]);
+  }, [createAnalyticsEvent, getRelatedUrls, url]);
   if (loadingRelatedUrls) {
     return /*#__PURE__*/React.createElement(RelatedUrlsBlockResolvingView, _extends({
       testId: "".concat(testId, "-resolving-view")