1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00

Add unique trackable URLs for Pro/Enterprise feature lead generation (#2684)

Add unique trackable URLs for Pro/Enterprise feature lead generation
This commit is contained in:
sjaanus 2022-12-13 14:35:07 +02:00 committed by GitHub
parent fb06fa9f46
commit 419640fb2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 13 deletions

View File

@ -19,7 +19,7 @@ export const ProjectChangeRequests = () => {
if (isOss() || isPro()) { if (isOss() || isPro()) {
return ( return (
<PageContent sx={{ justifyContent: 'center' }}> <PageContent sx={{ justifyContent: 'center' }}>
<PremiumFeature feature="Change Requests" /> <PremiumFeature feature="change-requests" />
</PageContent> </PageContent>
); );
} }

View File

@ -46,17 +46,20 @@ enum FeaturePlan {
} }
const PremiumFeatures = { const PremiumFeatures = {
['Adding new projects']: { 'adding-new-projects': {
plan: FeaturePlan.PRO, plan: FeaturePlan.PRO,
url: '', url: '',
label: 'Adding new projects',
}, },
['Access']: { access: {
plan: FeaturePlan.PRO, plan: FeaturePlan.PRO,
url: 'https://docs.getunleash.io/reference/rbac', url: 'https://docs.getunleash.io/reference/rbac',
label: 'Access',
}, },
['Change Requests']: { 'change-requests': {
plan: FeaturePlan.ENTERPRISE, plan: FeaturePlan.ENTERPRISE,
url: 'https://docs.getunleash.io/reference/change-requests', url: 'https://docs.getunleash.io/reference/change-requests',
label: 'Change Requests',
}, },
}; };
@ -70,22 +73,22 @@ export interface PremiumFeatureProps {
} }
export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => { export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
const { url, plan } = PremiumFeatures[feature]; const { url, plan, label } = PremiumFeatures[feature];
const tracker = usePlausibleTracker(); const tracker = usePlausibleTracker();
const handleClick = () => { const handleClick = () => {
tracker.trackEvent('upgrade_plan_clicked', { tracker.trackEvent('upgrade_plan_clicked', {
props: { feature }, props: { feature: label },
}); });
}; };
const featureLabel = Boolean(url) ? ( const featureLabel = Boolean(url) ? (
<StyledLink href={url} target="_blank"> <StyledLink href={url} target="_blank">
{feature} {label}
</StyledLink> </StyledLink>
) : ( ) : (
feature label
); );
const featureMessage = ( const featureMessage = (
@ -96,6 +99,8 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
</> </>
); );
const upgradeUrl = `${UPGRADE_URL}?feature=${feature}`;
return ( return (
<PremiumFeatureWrapper tooltip={tooltip}> <PremiumFeatureWrapper tooltip={tooltip}>
<StyledTitle> <StyledTitle>
@ -114,7 +119,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
</StyledBody> </StyledBody>
<StyledButtonContainer> <StyledButtonContainer>
<StyledLink <StyledLink
href={UPGRADE_URL} href={upgradeUrl}
target="_blank" target="_blank"
onClick={handleClick} onClick={handleClick}
> >
@ -137,7 +142,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
<StyledButtonContainer> <StyledButtonContainer>
<Button <Button
variant="outlined" variant="outlined"
href={UPGRADE_URL} href={upgradeUrl}
target="_blank" target="_blank"
onClick={handleClick} onClick={handleClick}
> >

View File

@ -31,7 +31,7 @@ export const ChangeRequestConfiguration = () => {
} }
sx={{ justifyContent: 'center' }} sx={{ justifyContent: 'center' }}
> >
<PremiumFeature feature="Change Requests" /> <PremiumFeature feature="change-requests" />
</PageContent> </PageContent>
); );
} }

View File

@ -24,7 +24,7 @@ export const ProjectAccess = () => {
header={<PageHeader title="Access" />} header={<PageHeader title="Access" />}
sx={{ justifyContent: 'center' }} sx={{ justifyContent: 'center' }}
> >
<PremiumFeature feature="Access" /> <PremiumFeature feature="access" />
</PageContent> </PageContent>
); );
} }

View File

@ -45,7 +45,7 @@ function resolveCreateButtonData(
disabled: true, disabled: true,
tooltip: { tooltip: {
titleComponent: ( titleComponent: (
<PremiumFeature feature="Adding new projects" tooltip /> <PremiumFeature feature="adding-new-projects" tooltip />
), ),
sx: { maxWidth: '320px' }, sx: { maxWidth: '320px' },
variant: 'custom', variant: 'custom',