# 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

* [Set up Hypertune](/getting-started/set-up-hypertune.md)
* [Analytics guide](/analytics/guide.md)

## 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**.

<figure><img src="/files/4944f9v6gDvCsgtg3YXT" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/LEvFPsYckNnK4Y8487ho" alt=""><figcaption></figcaption></figure>

Enter a name for the new type and click **Create**.

<figure><img src="/files/kit4JD4qprBX5eUik6Ry" alt=""><figcaption></figcaption></figure>

Click **+ Add** to add a new field to it. Enter a name, set its type, and click **Create**.

<figure><img src="/files/RJlM81JnAFnMYrCjEOQF" alt=""><figcaption></figcaption></figure>

Repeat for each field you want to add. You can switch to the code view to make this easier. Then, click **Save**.

<figure><img src="/files/sbMezMERWR7neIvlOfjS" alt=""><figcaption></figcaption></figure>

```graphql
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**.

<figure><img src="/files/p29TnuXF0zbjMdgiCpkR" alt=""><figcaption></figcaption></figure>

Enter a name, set its type to the one you created earlier, and click **Create**.

<figure><img src="/files/WPu3Qtos6j5SqwJ4jM1R" alt=""><figcaption></figcaption></figure>

Enter the initial configuration, then click **Save**.

<figure><img src="/files/Ib1dWPXRj9AWwtReUddX" alt=""><figcaption></figcaption></figure>

## Access flags to retrieve landing page configuration

Regenerate the client:

{% tabs %}
{% tab title="npm" %}

```bash
npx hypertune
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn hypertune
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm hypertune
```

{% endtab %}
{% endtabs %}

Then use the generated methods for your flags to get the landing page configuration and log your conversion events:

{% code title="app/components/LandingPage.tsx" %}

```typescript
'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>
  )
}
```

{% endcode %}

## 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.

<figure><img src="/files/CG3M7ErhfaTqfwYJKsih" alt=""><figcaption></figcaption></figure>

Make your changes, then open the **Diff** view to review them. Click **Save**.

<figure><img src="/files/d5Zs6it7c58rUgK9mpoy" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/2OvCwgSUciaHI4doItca" alt=""><figcaption></figcaption></figure>

Click **+ Experiment**, and select **New experiment** from the dropdown.

<figure><img src="/files/EIrxttGnXJIAISVhlO4b" alt=""><figcaption></figcaption></figure>

Select **AI loop** as the experiment type, enter a name, set the goal event type that you want to optimize for, and click **Create**.

<figure><img src="/files/DN6w6ec95iBCnUYDVGGB" alt=""><figcaption></figcaption></figure>

An experiment dimension is automatically created and named after the selected flag. Click **Insert**.

<figure><img src="/files/T8N7iBk8wTgJRUfIuvFN" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/DTP8chDtYCC9nMxQA8nJ" alt=""><figcaption></figcaption></figure>

To delete an arm and its variant, select **Delete variant** from the options (**⋯**) button.

<figure><img src="/files/JdMVYa8NYG5SC7CElwWO" alt=""><figcaption></figcaption></figure>

Select the next flag that you want to optimize.

<figure><img src="/files/F2Xi7EtYQx3EiWeGOpkC" alt=""><figcaption></figcaption></figure>

Click **+ Experiment**, select the AI loop you created earlier from the Experiment dropdown. Then select **New dimension** from the Dimension dropdown.

<figure><img src="/files/CWhd2GZeOwErnIV0teIL" alt=""><figcaption></figcaption></figure>

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**.

<figure><img src="/files/AZTXM2jtkseCfjPW7hfj" alt=""><figcaption></figcaption></figure>

Set the variants to the values you want to test.

<figure><img src="/files/CZDWzeuIVPquLVWOMk2C" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/vPBeXS9UhN8HQ1FDCINy" alt=""><figcaption></figcaption></figure>

Click **View changes** to see the changes you made, then click **Save**.

<figure><img src="/files/3dpUd0kldYEaQUIleDDd" alt=""><figcaption></figcaption></figure>

Now Hypertune will automatically learn the best combination of variants for each visitor segment to maximize your goal.

## Next steps

* Build an [impact analysis](/concepts/impact-analyses.md) or [funnel](/concepts/funnels.md) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hypertune.com/landing-page-optimization/guide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
