Guide
This guide builds on the SDK quickstart and analytics guide and shows you how to:
Create custom object types to model your landing page configuration
Create flags that use those custom object types
Access those flags in your code
Set up a multivariate AI loop to optimize your landing page
Prerequisites
Create custom object types to model your landing page configuration
Go to the Schema view in the dashboard. Click the + button in the top-right of the sidebar. Select Object, enter a name, and click Create.
By default, the new object type has no fields.
Click + Add to add a new field. Enter a name, and select New object type from the dropdown.
Enter a name for the new type and click Create.
Click + Add to add a new field to it. Enter a name, set its type, and click Create.
Repeat for each field you want to add. You can switch to the code view to make this easier. Then, click Save.
type LandingPage {
layout: LandingPageLayout!
hero: Hero!
ctaButton: CTAButton!
benefits: [Benefit!]!
}
type Hero {
headline: String!
subheadline: String!
imageSrc: String!
}
type CTAButton {
buttonSize: ButtonSize!
text: String!
color: String!
}
enum ButtonSize {
small,
medium,
large
}
type Benefit {
icon: String!
title: String!
description: String!
}
enum LandingPageLayout {
default,
split,
grid
}Create flags for your landing page configuration
Go to the Flags view in the dashboard. Click the + button in the top-right of the sidebar and select Flag.
Enter a name, set its type to the one you created earlier, and click Create.
Enter the initial configuration, then click Save.
Access flags to retrieve landing page configuration
Regenerate the client:
npx hypertuneThen use the generated methods for your flags to get the landing page configuration and log your conversion events:
'use client'
import Benefits from './Benefits'
import CTAButton from './CTAButton'
import Hero from './Hero'
import LandingPageContainer from './LandingPageContainer'
import { useHypertune } from '@/generated/hypertune.react'
export default function LandingPage() {
const hypertune = useHypertune()
const landingPage = hypertune.landingPage()
return (
<LandingPageContainer
layout={landingPage.layout({ fallback: 'default' })}
>
<Hero hero={landingPage.hero()} />
<CTAButton
ctaButton={landingPage.ctaButton()}
onSignUp={(method) => {
hypertune.signUp({ args: { properties: { method } } })
}}
/>
<Benefits benefits={landingPage.benefits()} />
</LandingPageContainer>
)
}Update your landing page configuration
Go to the Flags view in the dashboard, expand the top-level flag with your landing page configuration in the left sidebar, and select the nested flag that you want to configure.
Make your changes, then open the Diff view to review them. Click Save.
Set up a multivariate AI loop to optimize your landing page
Go to the Flags view in the dashboard and select the first flag that you want to optimize.
Click + Experiment, and select New experiment from the dropdown.
Select AI loop as the experiment type, enter a name, set the goal event type that you want to optimize for, and click Create.
An experiment dimension is automatically created and named after the selected flag. Click Insert.
By default, the dimension has two arms called Variant 1 and Variant 2. Click + Add variant to add another. Set the variants to the values you want to test.
To delete an arm and its variant, select Delete variant from the options (⋯) button.
Select the next flag that you want to optimize.
Click + Experiment, select the AI loop you created earlier from the Experiment dropdown. Then select New dimension from the Dimension dropdown.
Enter a name for the dimension and set its number of arms. By default, it's named after the selected flag. Click Create, then click Insert.
Set the variants to the values you want to test.
Repeat these steps for each flag you want to optimize, using the same AI loop in each one.
If you go to the Experiments view and select the AI loop, you can see all the dimensions you created.
Click View changes to see the changes you made, then click Save.
Now Hypertune will automatically learn the best combination of variants for each visitor segment to maximize your goal.
Next steps
Build a funnel to view the performance of each variant or combination of variants.
Add new dimensions to the AI loop.
Add new variants to each dimension and remove poorly performing variants.
Last updated