@atlaskit/smart-card 19.1.21 → 19.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +7 -3
- package/dist/cjs/state/helpers.js +26 -4
- package/dist/cjs/utils/analytics/analytics.js +3 -2
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/CardWithUrl/component.js +4 -2
- package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +6 -3
- package/dist/es2019/state/helpers.js +25 -3
- package/dist/es2019/utils/analytics/analytics.js +3 -2
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/CardWithUrl/component.js +5 -3
- package/dist/esm/state/analytics/useSmartLinkAnalytics.js +8 -4
- package/dist/esm/state/helpers.js +19 -3
- package/dist/esm/utils/analytics/analytics.js +3 -2
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/CardWithUrl/component.js +5 -3
- package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +3 -1
- package/dist/types/state/helpers.d.ts +3 -0
- package/dist/types/state/hooks/useSmartLink.d.ts +1 -1
- package/dist/types/utils/analytics/analytics.d.ts +1 -1
- package/dist/types/utils/analytics/types.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/smart-card
|
|
2
2
|
|
|
3
|
+
## 19.1.22
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c6978e3a40c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6978e3a40c) - This update adds Destination product and subproduct (core, servicedesk, software, etc.) analytics now available in the Smart Link ui card clicked event. At the time of writing, only Jira links have this functionality.
|
|
8
|
+
|
|
3
9
|
## 19.1.21
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -36,6 +36,8 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
|
|
|
36
36
|
var extractedDefinitionId = (0, _helpers.getDefinitionId)(state.details);
|
|
37
37
|
var extractedExtensionKey = (0, _helpers.getExtensionKey)(state.details);
|
|
38
38
|
var extractedResourceType = (0, _helpers.getResourceType)(state.details);
|
|
39
|
+
var extractedSubproduct = (0, _helpers.getSubproduct)(state.details);
|
|
40
|
+
var extractedProduct = (0, _helpers.getProduct)(state.details);
|
|
39
41
|
/** Contains all ui analytics events */
|
|
40
42
|
|
|
41
43
|
var ui = (0, _react.useMemo)(function () {
|
|
@@ -72,6 +74,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
|
|
|
72
74
|
* This fires an event that represents when a user clicks on a Smart Link.
|
|
73
75
|
* @param id The unique ID for this Smart Link.
|
|
74
76
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
77
|
+
* @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
|
|
75
78
|
* @param definitionId The definitionId of the Smart Link resolver invoked.
|
|
76
79
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
77
80
|
* @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
|
|
@@ -87,8 +90,9 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
|
|
|
87
90
|
var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
|
|
88
91
|
var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
|
|
89
92
|
var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
|
|
90
|
-
var destinationProduct = arguments.length > 7 ? arguments[7] :
|
|
91
|
-
|
|
93
|
+
var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
|
|
94
|
+
var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
|
|
95
|
+
return dispatchAnalytics((0, _analytics.uiCardClickedEvent)(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
|
|
92
96
|
},
|
|
93
97
|
|
|
94
98
|
/**
|
|
@@ -198,7 +202,7 @@ var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchAnalytic
|
|
|
198
202
|
return dispatchAnalytics((0, _analytics.uiHoverCardDismissedEvent)(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
|
|
199
203
|
}
|
|
200
204
|
};
|
|
201
|
-
}, [defaultId, defaultLocation,
|
|
205
|
+
}, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
|
|
202
206
|
/** Contains all operational analytics events */
|
|
203
207
|
|
|
204
208
|
var operational = (0, _react.useMemo)(function () {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getStatus = exports.getServices = exports.getResourceType = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
|
|
6
|
+
exports.isVisible = exports.isFinalState = exports.isAccessible = exports.hasResolved = exports.getSubproduct = exports.getStatus = exports.getServices = exports.getResourceType = exports.getProduct = exports.getExtensionKey = exports.getDefinitionId = exports.getClickUrl = exports.getByDefinitionId = void 0;
|
|
7
7
|
|
|
8
8
|
var _extractVisitUrl = require("../extractors/common/primitives/extractVisitUrl");
|
|
9
9
|
|
|
@@ -32,23 +32,45 @@ var getClickUrl = function getClickUrl(url, jsonLd) {
|
|
|
32
32
|
exports.getClickUrl = getClickUrl;
|
|
33
33
|
|
|
34
34
|
var getDefinitionId = function getDefinitionId(details) {
|
|
35
|
-
|
|
35
|
+
var _details$meta;
|
|
36
|
+
|
|
37
|
+
return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
|
|
36
38
|
};
|
|
37
39
|
|
|
38
40
|
exports.getDefinitionId = getDefinitionId;
|
|
39
41
|
|
|
40
42
|
var getExtensionKey = function getExtensionKey(details) {
|
|
41
|
-
|
|
43
|
+
var _details$meta2;
|
|
44
|
+
|
|
45
|
+
return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
|
|
42
46
|
};
|
|
43
47
|
|
|
44
48
|
exports.getExtensionKey = getExtensionKey;
|
|
45
49
|
|
|
46
50
|
var getResourceType = function getResourceType(details) {
|
|
47
|
-
|
|
51
|
+
var _details$meta3;
|
|
52
|
+
|
|
53
|
+
return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
|
|
48
54
|
};
|
|
49
55
|
|
|
50
56
|
exports.getResourceType = getResourceType;
|
|
51
57
|
|
|
58
|
+
var getProduct = function getProduct(details) {
|
|
59
|
+
var _details$meta4;
|
|
60
|
+
|
|
61
|
+
return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
exports.getProduct = getProduct;
|
|
65
|
+
|
|
66
|
+
var getSubproduct = function getSubproduct(details) {
|
|
67
|
+
var _details$meta5;
|
|
68
|
+
|
|
69
|
+
return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
exports.getSubproduct = getSubproduct;
|
|
73
|
+
|
|
52
74
|
var getServices = function getServices(details) {
|
|
53
75
|
return details && details.meta.auth || [];
|
|
54
76
|
};
|
|
@@ -235,7 +235,7 @@ var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(display,
|
|
|
235
235
|
|
|
236
236
|
exports.uiAuthAlternateAccountEvent = uiAuthAlternateAccountEvent;
|
|
237
237
|
|
|
238
|
-
var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
|
|
238
|
+
var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
|
|
239
239
|
return {
|
|
240
240
|
action: 'clicked',
|
|
241
241
|
actionSubject: 'smartLink',
|
|
@@ -249,7 +249,8 @@ var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, defini
|
|
|
249
249
|
display: display,
|
|
250
250
|
isModifierKeyPressed: isModifierKeyPressed,
|
|
251
251
|
location: location,
|
|
252
|
-
destinationProduct: destinationProduct
|
|
252
|
+
destinationProduct: destinationProduct,
|
|
253
|
+
destinationSubproduct: destinationSubproduct
|
|
253
254
|
})
|
|
254
255
|
};
|
|
255
256
|
};
|
package/dist/cjs/version.json
CHANGED
|
@@ -68,6 +68,8 @@ function CardWithUrlContent(_ref) {
|
|
|
68
68
|
var definitionId = (0, _helpers.getDefinitionId)(state.details);
|
|
69
69
|
var extensionKey = (0, _helpers.getExtensionKey)(state.details);
|
|
70
70
|
var resourceType = (0, _helpers.getResourceType)(state.details);
|
|
71
|
+
var product = (0, _helpers.getProduct)(state.details);
|
|
72
|
+
var subproduct = (0, _helpers.getSubproduct)(state.details);
|
|
71
73
|
var services = (0, _helpers.getServices)(state.details);
|
|
72
74
|
var isFlexibleUi = (0, _react.useMemo)(function () {
|
|
73
75
|
return (0, _flexible.isFlexibleUiCard)(children);
|
|
@@ -79,14 +81,14 @@ function CardWithUrlContent(_ref) {
|
|
|
79
81
|
}, [state.details, url]);
|
|
80
82
|
var handleClickWrapper = (0, _react.useCallback)(function (event) {
|
|
81
83
|
var isModifierKeyPressed = (0, _utils.isSpecialEvent)(event);
|
|
82
|
-
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
|
|
84
|
+
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
|
|
83
85
|
|
|
84
86
|
if (onClick) {
|
|
85
87
|
onClick(event);
|
|
86
88
|
} else if (!isFlexibleUi) {
|
|
87
89
|
handleClick(event);
|
|
88
90
|
}
|
|
89
|
-
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
|
|
91
|
+
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
|
|
90
92
|
var handleAuthorize = (0, _react.useCallback)(function () {
|
|
91
93
|
return actions.authorize(appearance);
|
|
92
94
|
}, [actions, appearance]);
|
|
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
|
|
|
2
2
|
import { getUrl } from '@atlaskit/linking-common';
|
|
3
3
|
import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent, invokeFailedEvent, connectSucceededEvent, connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
|
|
4
4
|
import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
|
|
5
|
-
import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
|
|
5
|
+
import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
|
|
6
6
|
import { useSmartLinkContext } from '@atlaskit/link-provider';
|
|
7
7
|
/**
|
|
8
8
|
* This hook provides usage of Smart Link analytics outside of the Card component.
|
|
@@ -24,6 +24,8 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
|
|
|
24
24
|
const extractedDefinitionId = getDefinitionId(state.details);
|
|
25
25
|
const extractedExtensionKey = getExtensionKey(state.details);
|
|
26
26
|
const extractedResourceType = getResourceType(state.details);
|
|
27
|
+
const extractedSubproduct = getSubproduct(state.details);
|
|
28
|
+
const extractedProduct = getProduct(state.details);
|
|
27
29
|
/** Contains all ui analytics events */
|
|
28
30
|
|
|
29
31
|
const ui = useMemo(() => ({
|
|
@@ -51,6 +53,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
|
|
|
51
53
|
* This fires an event that represents when a user clicks on a Smart Link.
|
|
52
54
|
* @param id The unique ID for this Smart Link.
|
|
53
55
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
56
|
+
* @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
|
|
54
57
|
* @param definitionId The definitionId of the Smart Link resolver invoked.
|
|
55
58
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
56
59
|
* @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
|
|
@@ -58,7 +61,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
|
|
|
58
61
|
* @param destinationProduct The product the Smart Link is linked to.
|
|
59
62
|
* @returns
|
|
60
63
|
*/
|
|
61
|
-
cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct)),
|
|
64
|
+
cardClickedEvent: (id = defaultId, display, status, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey, isModifierKeyPressed, location = defaultLocation, destinationProduct = extractedProduct, destinationSubproduct = extractedSubproduct) => dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct)),
|
|
62
65
|
|
|
63
66
|
/**
|
|
64
67
|
* This fires an event that represents when a user clicks on a Smart Link action.
|
|
@@ -141,7 +144,7 @@ export const useSmartLinkAnalytics = (url, dispatchAnalytics, id, defaultLocatio
|
|
|
141
144
|
* @returns
|
|
142
145
|
*/
|
|
143
146
|
hoverCardDismissedEvent: (previewDisplay, hoverTime, previewInvokeMethod, id = defaultId, definitionId = extractedDefinitionId, extensionKey = extractedExtensionKey) => dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod))
|
|
144
|
-
}), [defaultId, defaultLocation,
|
|
147
|
+
}), [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
|
|
145
148
|
/** Contains all operational analytics events */
|
|
146
149
|
|
|
147
150
|
const operational = useMemo(() => ({
|
|
@@ -19,9 +19,31 @@ export const getClickUrl = (url, jsonLd) => {
|
|
|
19
19
|
|
|
20
20
|
return url;
|
|
21
21
|
};
|
|
22
|
-
export const getDefinitionId = details =>
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
export const getDefinitionId = details => {
|
|
23
|
+
var _details$meta;
|
|
24
|
+
|
|
25
|
+
return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
|
|
26
|
+
};
|
|
27
|
+
export const getExtensionKey = details => {
|
|
28
|
+
var _details$meta2;
|
|
29
|
+
|
|
30
|
+
return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
|
|
31
|
+
};
|
|
32
|
+
export const getResourceType = details => {
|
|
33
|
+
var _details$meta3;
|
|
34
|
+
|
|
35
|
+
return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
|
|
36
|
+
};
|
|
37
|
+
export const getProduct = details => {
|
|
38
|
+
var _details$meta4;
|
|
39
|
+
|
|
40
|
+
return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
|
|
41
|
+
};
|
|
42
|
+
export const getSubproduct = details => {
|
|
43
|
+
var _details$meta5;
|
|
44
|
+
|
|
45
|
+
return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
|
|
46
|
+
};
|
|
25
47
|
export const getServices = details => details && details.meta.auth || [];
|
|
26
48
|
export const hasResolved = details => details && isAccessible(details) && isVisible(details);
|
|
27
49
|
export const isAccessible = ({
|
|
@@ -174,7 +174,7 @@ export const uiAuthAlternateAccountEvent = (display, definitionId, extensionKey)
|
|
|
174
174
|
display
|
|
175
175
|
}
|
|
176
176
|
});
|
|
177
|
-
export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) => ({
|
|
177
|
+
export const uiCardClickedEvent = (id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) => ({
|
|
178
178
|
action: 'clicked',
|
|
179
179
|
actionSubject: 'smartLink',
|
|
180
180
|
actionSubjectId: 'titleGoToLink',
|
|
@@ -187,7 +187,8 @@ export const uiCardClickedEvent = (id, display, status, definitionId, extensionK
|
|
|
187
187
|
display,
|
|
188
188
|
isModifierKeyPressed,
|
|
189
189
|
location,
|
|
190
|
-
destinationProduct
|
|
190
|
+
destinationProduct,
|
|
191
|
+
destinationSubproduct
|
|
191
192
|
}
|
|
192
193
|
});
|
|
193
194
|
export const uiActionClickedEvent = (id, actionType, extensionKey, display) => ({
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import { isSpecialEvent } from '../../utils';
|
|
3
3
|
import * as measure from '../../utils/performance';
|
|
4
|
-
import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
|
|
4
|
+
import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
|
|
5
5
|
import { useSmartLink } from '../../state';
|
|
6
6
|
import { BlockCard } from '../BlockCard';
|
|
7
7
|
import { InlineCard } from '../InlineCard';
|
|
@@ -42,6 +42,8 @@ export function CardWithUrlContent({
|
|
|
42
42
|
const definitionId = getDefinitionId(state.details);
|
|
43
43
|
const extensionKey = getExtensionKey(state.details);
|
|
44
44
|
const resourceType = getResourceType(state.details);
|
|
45
|
+
const product = getProduct(state.details);
|
|
46
|
+
const subproduct = getSubproduct(state.details);
|
|
45
47
|
const services = getServices(state.details);
|
|
46
48
|
let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
|
|
47
49
|
|
|
@@ -51,14 +53,14 @@ export function CardWithUrlContent({
|
|
|
51
53
|
}, [state.details, url]);
|
|
52
54
|
const handleClickWrapper = useCallback(event => {
|
|
53
55
|
const isModifierKeyPressed = isSpecialEvent(event);
|
|
54
|
-
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
|
|
56
|
+
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
|
|
55
57
|
|
|
56
58
|
if (onClick) {
|
|
57
59
|
onClick(event);
|
|
58
60
|
} else if (!isFlexibleUi) {
|
|
59
61
|
handleClick(event);
|
|
60
62
|
}
|
|
61
|
-
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
|
|
63
|
+
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
|
|
62
64
|
const handleAuthorize = useCallback(() => actions.authorize(appearance), [actions, appearance]);
|
|
63
65
|
const handleRetry = useCallback(() => {
|
|
64
66
|
actions.reload();
|
|
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
|
|
|
2
2
|
import { getUrl } from '@atlaskit/linking-common';
|
|
3
3
|
import { uiAuthEvent, uiAuthAlternateAccountEvent, uiCardClickedEvent, uiActionClickedEvent, uiClosedAuthEvent, uiRenderSuccessEvent, uiHoverCardViewedEvent, uiHoverCardDismissedEvent, uiHoverCardOpenLinkClickedEvent, invokeSucceededEvent as _invokeSucceededEvent, invokeFailedEvent as _invokeFailedEvent, connectSucceededEvent as _connectSucceededEvent, connectFailedEvent as _connectFailedEvent, trackAppAccountConnected, screenAuthPopupEvent, instrumentEvent } from '../../utils/analytics';
|
|
4
4
|
import { failUfoExperience, startUfoExperience, succeedUfoExperience } from './ufoExperiences';
|
|
5
|
-
import { getDefinitionId, getExtensionKey, getResourceType } from '../helpers';
|
|
5
|
+
import { getDefinitionId, getExtensionKey, getResourceType, getSubproduct, getProduct } from '../helpers';
|
|
6
6
|
import { useSmartLinkContext } from '@atlaskit/link-provider';
|
|
7
7
|
/**
|
|
8
8
|
* This hook provides usage of Smart Link analytics outside of the Card component.
|
|
@@ -24,6 +24,8 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
|
|
|
24
24
|
var extractedDefinitionId = getDefinitionId(state.details);
|
|
25
25
|
var extractedExtensionKey = getExtensionKey(state.details);
|
|
26
26
|
var extractedResourceType = getResourceType(state.details);
|
|
27
|
+
var extractedSubproduct = getSubproduct(state.details);
|
|
28
|
+
var extractedProduct = getProduct(state.details);
|
|
27
29
|
/** Contains all ui analytics events */
|
|
28
30
|
|
|
29
31
|
var ui = useMemo(function () {
|
|
@@ -60,6 +62,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
|
|
|
60
62
|
* This fires an event that represents when a user clicks on a Smart Link.
|
|
61
63
|
* @param id The unique ID for this Smart Link.
|
|
62
64
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
65
|
+
* @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
|
|
63
66
|
* @param definitionId The definitionId of the Smart Link resolver invoked.
|
|
64
67
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
65
68
|
* @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
|
|
@@ -75,8 +78,9 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
|
|
|
75
78
|
var extensionKey = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : extractedExtensionKey;
|
|
76
79
|
var isModifierKeyPressed = arguments.length > 5 ? arguments[5] : undefined;
|
|
77
80
|
var location = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : defaultLocation;
|
|
78
|
-
var destinationProduct = arguments.length > 7 ? arguments[7] :
|
|
79
|
-
|
|
81
|
+
var destinationProduct = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : extractedProduct;
|
|
82
|
+
var destinationSubproduct = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : extractedSubproduct;
|
|
83
|
+
return dispatchAnalytics(uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct));
|
|
80
84
|
},
|
|
81
85
|
|
|
82
86
|
/**
|
|
@@ -186,7 +190,7 @@ export var useSmartLinkAnalytics = function useSmartLinkAnalytics(url, dispatchA
|
|
|
186
190
|
return dispatchAnalytics(uiHoverCardDismissedEvent(id, previewDisplay, hoverTime, definitionId, extensionKey, previewInvokeMethod));
|
|
187
191
|
}
|
|
188
192
|
};
|
|
189
|
-
}, [defaultId, defaultLocation,
|
|
193
|
+
}, [extractedDefinitionId, extractedExtensionKey, dispatchAnalytics, defaultId, defaultLocation, extractedProduct, extractedSubproduct]);
|
|
190
194
|
/** Contains all operational analytics events */
|
|
191
195
|
|
|
192
196
|
var operational = useMemo(function () {
|
|
@@ -18,13 +18,29 @@ export var getClickUrl = function getClickUrl(url, jsonLd) {
|
|
|
18
18
|
return url;
|
|
19
19
|
};
|
|
20
20
|
export var getDefinitionId = function getDefinitionId(details) {
|
|
21
|
-
|
|
21
|
+
var _details$meta;
|
|
22
|
+
|
|
23
|
+
return details === null || details === void 0 ? void 0 : (_details$meta = details.meta) === null || _details$meta === void 0 ? void 0 : _details$meta.definitionId;
|
|
22
24
|
};
|
|
23
25
|
export var getExtensionKey = function getExtensionKey(details) {
|
|
24
|
-
|
|
26
|
+
var _details$meta2;
|
|
27
|
+
|
|
28
|
+
return details === null || details === void 0 ? void 0 : (_details$meta2 = details.meta) === null || _details$meta2 === void 0 ? void 0 : _details$meta2.key;
|
|
25
29
|
};
|
|
26
30
|
export var getResourceType = function getResourceType(details) {
|
|
27
|
-
|
|
31
|
+
var _details$meta3;
|
|
32
|
+
|
|
33
|
+
return details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.resourceType;
|
|
34
|
+
};
|
|
35
|
+
export var getProduct = function getProduct(details) {
|
|
36
|
+
var _details$meta4;
|
|
37
|
+
|
|
38
|
+
return details === null || details === void 0 ? void 0 : (_details$meta4 = details.meta) === null || _details$meta4 === void 0 ? void 0 : _details$meta4.product;
|
|
39
|
+
};
|
|
40
|
+
export var getSubproduct = function getSubproduct(details) {
|
|
41
|
+
var _details$meta5;
|
|
42
|
+
|
|
43
|
+
return details === null || details === void 0 ? void 0 : (_details$meta5 = details.meta) === null || _details$meta5 === void 0 ? void 0 : _details$meta5.subproduct;
|
|
28
44
|
};
|
|
29
45
|
export var getServices = function getServices(details) {
|
|
30
46
|
return details && details.meta.auth || [];
|
|
@@ -187,7 +187,7 @@ export var uiAuthAlternateAccountEvent = function uiAuthAlternateAccountEvent(di
|
|
|
187
187
|
})
|
|
188
188
|
};
|
|
189
189
|
};
|
|
190
|
-
export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct) {
|
|
190
|
+
export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status, definitionId, extensionKey, isModifierKeyPressed, location, destinationProduct, destinationSubproduct) {
|
|
191
191
|
return {
|
|
192
192
|
action: 'clicked',
|
|
193
193
|
actionSubject: 'smartLink',
|
|
@@ -201,7 +201,8 @@ export var uiCardClickedEvent = function uiCardClickedEvent(id, display, status,
|
|
|
201
201
|
display: display,
|
|
202
202
|
isModifierKeyPressed: isModifierKeyPressed,
|
|
203
203
|
location: location,
|
|
204
|
-
destinationProduct: destinationProduct
|
|
204
|
+
destinationProduct: destinationProduct,
|
|
205
|
+
destinationSubproduct: destinationSubproduct
|
|
205
206
|
})
|
|
206
207
|
};
|
|
207
208
|
};
|
package/dist/esm/version.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useEffect, useCallback, useMemo } from 'react';
|
|
2
2
|
import { isSpecialEvent } from '../../utils';
|
|
3
3
|
import * as measure from '../../utils/performance';
|
|
4
|
-
import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey } from '../../state/helpers';
|
|
4
|
+
import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
|
|
5
5
|
import { useSmartLink } from '../../state';
|
|
6
6
|
import { BlockCard } from '../BlockCard';
|
|
7
7
|
import { InlineCard } from '../InlineCard';
|
|
@@ -42,6 +42,8 @@ export function CardWithUrlContent(_ref) {
|
|
|
42
42
|
var definitionId = getDefinitionId(state.details);
|
|
43
43
|
var extensionKey = getExtensionKey(state.details);
|
|
44
44
|
var resourceType = getResourceType(state.details);
|
|
45
|
+
var product = getProduct(state.details);
|
|
46
|
+
var subproduct = getSubproduct(state.details);
|
|
45
47
|
var services = getServices(state.details);
|
|
46
48
|
var isFlexibleUi = useMemo(function () {
|
|
47
49
|
return isFlexibleUiCard(children);
|
|
@@ -53,14 +55,14 @@ export function CardWithUrlContent(_ref) {
|
|
|
53
55
|
}, [state.details, url]);
|
|
54
56
|
var handleClickWrapper = useCallback(function (event) {
|
|
55
57
|
var isModifierKeyPressed = isSpecialEvent(event);
|
|
56
|
-
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed);
|
|
58
|
+
analytics.ui.cardClickedEvent(id, isFlexibleUi ? 'flexible' : appearance, state.status, definitionId, extensionKey, isModifierKeyPressed, undefined, product, subproduct);
|
|
57
59
|
|
|
58
60
|
if (onClick) {
|
|
59
61
|
onClick(event);
|
|
60
62
|
} else if (!isFlexibleUi) {
|
|
61
63
|
handleClick(event);
|
|
62
64
|
}
|
|
63
|
-
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi]);
|
|
65
|
+
}, [id, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, handleClick, isFlexibleUi, product, subproduct]);
|
|
64
66
|
var handleAuthorize = useCallback(function () {
|
|
65
67
|
return actions.authorize(appearance);
|
|
66
68
|
}, [actions, appearance]);
|
|
@@ -3,6 +3,7 @@ import { AnalyticsHandler } from '../../utils/types';
|
|
|
3
3
|
import { CardInnerAppearance } from '../../view/Card/types';
|
|
4
4
|
import { PreviewDisplay, PreviewInvokeMethod } from '../../view/HoverCard/types';
|
|
5
5
|
import { InvokeType } from '../../model/invoke-opts';
|
|
6
|
+
import { DestinationProduct, DestinationSubproduct } from '../../utils/analytics/types';
|
|
6
7
|
/**
|
|
7
8
|
* This hook provides usage of Smart Link analytics outside of the Card component.
|
|
8
9
|
* Can be provided to Card via the analyticsEvents prop to change the analytics events.
|
|
@@ -36,6 +37,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
|
|
|
36
37
|
* This fires an event that represents when a user clicks on a Smart Link.
|
|
37
38
|
* @param id The unique ID for this Smart Link.
|
|
38
39
|
* @param display Whether the card was an Inline, Block, Embed or Flexible UI.
|
|
40
|
+
* @param status What status the Smart Link is currently in (e.g. resolved, unresolved)
|
|
39
41
|
* @param definitionId The definitionId of the Smart Link resolver invoked.
|
|
40
42
|
* @param extensionKey The extensionKey of the Smart Link resovler invoked.
|
|
41
43
|
* @param isModifierKeyPressed Whether a modifier key was pressed when clicking the Smart Link.
|
|
@@ -43,7 +45,7 @@ export declare const useSmartLinkAnalytics: (url: string, dispatchAnalytics: Ana
|
|
|
43
45
|
* @param destinationProduct The product the Smart Link is linked to.
|
|
44
46
|
* @returns
|
|
45
47
|
*/
|
|
46
|
-
cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
|
|
48
|
+
cardClickedEvent: (id: string | undefined, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: DestinationProduct | string | undefined, destinationSubproduct?: DestinationSubproduct | string | undefined) => void;
|
|
47
49
|
/**
|
|
48
50
|
* This fires an event that represents when a user clicks on a Smart Link action.
|
|
49
51
|
* Note: This also starts the UFO smart-link-action-invocation experience.
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { JsonLd } from 'json-ld-types';
|
|
2
2
|
import { CardType, CardStore } from '@atlaskit/linking-common';
|
|
3
|
+
import { DestinationProduct, DestinationSubproduct } from '../utils/analytics/types';
|
|
3
4
|
export declare const getByDefinitionId: (definitionId: string | undefined, store: CardStore) => string[];
|
|
4
5
|
export declare const getClickUrl: (url: string, jsonLd?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string;
|
|
5
6
|
export declare const getDefinitionId: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
|
|
6
7
|
export declare const getExtensionKey: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
|
|
7
8
|
export declare const getResourceType: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => string | undefined;
|
|
9
|
+
export declare const getProduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationProduct | string | undefined;
|
|
10
|
+
export declare const getSubproduct: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => DestinationSubproduct | string | undefined;
|
|
8
11
|
export declare const getServices: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => JsonLd.Primitives.AuthService[];
|
|
9
12
|
export declare const hasResolved: (details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined) => boolean | undefined;
|
|
10
13
|
export declare const isAccessible: ({ meta: { access } }: JsonLd.Response) => boolean;
|
|
@@ -12,7 +12,7 @@ export declare function useSmartLink(id: string, url: string, dispatchAnalytics:
|
|
|
12
12
|
ui: {
|
|
13
13
|
authEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
|
|
14
14
|
authAlternateAccountEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
|
|
15
|
-
cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => void;
|
|
15
|
+
cardClickedEvent: (id: string | undefined, display: import("../../view/Card/types").CardInnerAppearance, status: import("@atlaskit/linking-common/types").CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => void;
|
|
16
16
|
actionClickedEvent: (id: string | undefined, extensionKey: string | undefined, actionType: string, display: import("../../view/Card/types").CardInnerAppearance, invokeType: import("../../model/invoke-opts").InvokeType) => void;
|
|
17
17
|
hoverCardOpenLinkClickedEvent: (previewDisplay: import("../../view/HoverCard/types").PreviewDisplay, definitionId?: string | undefined, extensionKey?: string | undefined, previewInvokeMethod?: import("../../view/HoverCard/types").PreviewInvokeMethod | undefined) => void;
|
|
18
18
|
closedAuthEvent: (display: import("../../view/Card/types").CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => void;
|
|
@@ -23,7 +23,7 @@ export declare const connectFailedEvent: (definitionId?: string | undefined, ext
|
|
|
23
23
|
export declare const trackAppAccountConnected: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
|
|
24
24
|
export declare const uiAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
|
|
25
25
|
export declare const uiAuthAlternateAccountEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
|
|
26
|
-
export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined) => AnalyticsPayload;
|
|
26
|
+
export declare const uiCardClickedEvent: (id: string, display: CardInnerAppearance, status: CardType, definitionId?: string | undefined, extensionKey?: string | undefined, isModifierKeyPressed?: boolean | undefined, location?: string | undefined, destinationProduct?: string | undefined, destinationSubproduct?: string | undefined) => AnalyticsPayload;
|
|
27
27
|
export declare const uiActionClickedEvent: (id: string, actionType: string, extensionKey?: string | undefined, display?: CardInnerAppearance | undefined) => AnalyticsPayload;
|
|
28
28
|
export declare const uiClosedAuthEvent: (display: CardInnerAppearance, definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
|
|
29
29
|
export declare const screenAuthPopupEvent: (definitionId?: string | undefined, extensionKey?: string | undefined) => AnalyticsPayload;
|