a6c25b15aa
## Summary (this is the continuation of https://github.com/elastic/kibana/pull/143910, which I started before my parental leave and which is impossible to rebase) With the introduction of more features that are part of licenses, we're also adding more upsells to Kibana. These upsells advertise the feature, they explain which license is required in order to use said feature and they will link the client to the subscription page. Take the upsell for more insights in the alert flyout as an example: <img width="1584" alt="Screenshot 2022-10-18 at 16 39 52" src="https://user-images.githubusercontent.com/68591/197629708-17978c8b-595e-4797-b80a-59c799896509.png"> Upsells come in all different shapes. Somtimes they're just links, sometimes full pages and sometimes interactive popups. They are also used across all solutions in Kibana. There is currently no specific tracking in place for these types of elements yet. Meaning we don't know how many people interact with them, how many custerms see them and how well they perform in terms of conversions. It is technically already possible to analyze clicks on these elements as part of the regular Kibana click tracking but it would require setting up queries with lots of `data-test-subj` and `url` filters for the right click events. Even if we wanted to set up tracking dashboards with that data, we would still not know how often upsells are seen which is necessary to calculate their click-through-rate. That rate can give an indicator if an upsell performs well or if we might want to improve it in the future. For that reason, I'm proposing a dedicated set of tracking methods to capture `impressions` and `clicks` for upsells. No conversion tracking as of yet, but I will get back to that later. This PR introduces the `@kbn/subscription-tracking` package. It leverages the `@kbn/analytics-client` package to send dedicated subscription tracking events. It comes with a set of React components that automatically track impressions and click events. Consumers of those components only need to specify a `subscription context` that gives more details on the type of feature that is advertised and the location of the upsell. ```typescript import { SubscriptionLink } from '@kbn/subscription-tracking'; import type { SubscriptionContextData } from '@kbn/subscription-tracking'; const subscriptionContext: SubscriptionContextData = { feature: 'threat-intelligence', source: 'security__threat-intelligence', }; export const Paywall = () => { return ( <div> <SubscriptionLink subscriptionContext={subscriptionContext}> Upgrade to Platinum to get this feature </SubscriptionLink> </div> ) } ``` The example above uses a `SubscriptionLink` which is a wrapper of `EuiLink` . So it behaves just like a normal link. Alternatively, upsells can also use a `SubscriptionButton` or `SubscriptionButtonEmpty` which wrap `EuiButton` and `EuiButtonEmpty` respectively. When the link is mounted, it will send off an `impression` event with the given `subscriptionContext`. That piece of metadata consists of an identifier of the advertised feature (in this case `threat-intelligence`) and the `source` of the impression (in this case the `threat-intelligence` page in the `security` solution). `source` follows the following format: `{solution-identifier}__location-identifier`. There are no special rules for how to name these identifiers but it's good practise to make sure that `feature` has the same value for all upsells advertising the same feature (e.g. use enums for features to prevent spelling mistakes). Upon interaction with the upsell link/button, a special `click` event is sent, which, again, contains the same subscription context. If you want to use the `subscription-tracking` elements in your solution, you have to set up a `SubscriptionTrackingProvider` in your plugin setup and register the tracking events on startup. This PR contains an example for this setup for the security plugin and some of its sub-plugins. ## Next steps - There are currently no dedicated tracking dashboards for these events which I am planning to set up in the future. - Since I only had a week's worth of time, I did not manage to add conversion tracking. The addition of those events might be a lot harder as well since the current license flow does not integrate seamlessly into Kibana - All upsells currently link to the license management page which currently does not inform customers about our license and cloud offering. It seems to me like a weak link in the subscription funnel and it would be great to improve on that page. - potential improvement: Send `impression` event when the element becomes visible in the viewport instead of when the element is mounted ### Checklist - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| src | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| mocks.tsx | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| types.ts | ||
@kbn/subscription-tracking
This package leverages the @kbn/analytics-client package to send dedicated subscription tracking events.
It provides a set of React components that automatically track impression and click events. Consumers of those components need to specify a subscription context that gives more details on the type of feature that is advertised and the location of the upsell.
import { SubscriptionLink } from '@kbn/subscription-tracking';
import type { SubscriptionContext } from '@kbn/subscription-tracking';
const subscriptionContext: SubscriptionContext = {
feature: 'threat-intelligence',
source: 'security__threat-intelligence',
};
export const Paywall = () => {
return (
<div>
<SubscriptionLink subscriptionContext={subscriptionContext}>
Upgrade to Platinum to get this feature
</SubscriptionLink>
</div>
);
};
The example above uses a SubscriptionLink which is a wrapper of EuiLink . So it behaves just like a normal link. Alternatively, upsells can also use a SubscriptionButton or SubscriptionButtonEmpty which wrap EuiButton and EuiButtonEmpty respectively.
When the link is mounted, it will send off an impression event with the given subscriptionContext. That piece of metadata consists of an identifier of the advertised feature (in this case threat-intelligence) and the source (aka location) of the impression (in this case the threat-intelligence page in the security solution). source follows the following format: {solution-identifier}__location-identifier.
There are no special rules for how to name these identifiers but it's good practise to make sure that feature has the same value for all upsells advertising the same feature (e.g. use enums for features to prevent spelling mistakes).
Upon interaction with the upsell link/button, a special click event is sent, which, again, contains the same subscription context.
If you want to use the subscription-tracking elements in your app, you have to set up a SubscriptionTrackingProvider in your plugin setup and register the tracking events on startup. Have a look at https://github.com/elastic/kibana/pull/143910 for an example of an integration.