search

HTML quickstart

hashtag
1. Define your schema

Hypertune uses GraphQLarrow-up-right for its schema definition language.

Go to the Schema view, switch to GraphQL mode and paste the following starter schema:

type Query {
  root(context: Context!): Root!
}

input Context {
  environment: Environment!
  user: User!  
}

enum Environment { DEVELOPMENT, STAGING, PRODUCTION }

input User {
  id: String!
  userAgent: UserAgent!
  referer: String!
}

type Root {
  exampleFlag: Boolean!
  userId: String!
  ctaClick: Void!
}

# User agent types

input UserAgent {
  browser: Browser!
  device: Device!
  engine: Engine!
  os: OS!
  cpu: CPU!
}

input Browser {
  name: String! # e.g. Chrome, Edge, Firefox, Safari
  version: String! # dynamic
}

input Device {
  type: String! # e.g. mobile, wearable, tablet
  vendor: String! # e.g. Apple, Google, HP, HTC, Huawei, Microsoft, Motorola, Nokia, Samsung
  model: String! # dynamic
}

input Engine {
  name: String! # e.g. Amaya, EdgeHTML, Gecko
  version: String! # dynamic
}

input OS {
  name: String! # e.g. Android, BlackBerry, Chromium OS, iOS, Mac OS, Windows
  version: String! # dynamic
}

input CPU {
  architecture: String! # e.g. 68k, amd64, arm, arm64
}

hashtag
2. Define your logic

Go to the Logic view and select the "User Id" field. Set it to Context > User > Id.

Now select the "Cta Click" field. Set it to a Log Event expression with a new event type called "CTA Click". Set the Unit ID to Context > User > Id.

Click "Save" in the top right corner.

hashtag
3. Fetch your flags

Go to the Preview view and enter the following query:

Enter the following query variables:

Hypertune uses GraphQLarrow-up-right for its query language. In the Result panel, you can see the flag that matches your query.

The #UID# value for the userId variable is a special placeholder that gets replaced with a randomly generated unique ID.

The #UA# placeholder gets replaced with the user agent and the #REFERER# placeholder gets replaced with your page URL.

Go to the Code Snippets tab in the Result panel and select HTML. Copy the snippet and insert it in the <head> of your page.

hashtag
4. Use your flags

To show or hide a section depending on your flag value, replace the section's code:

hashtag
6. Log events

Switch to the Preview view and enter the following query:

Enter the following query variables:

Go to the Code Snippets tab in the Result panel and select JavaScript. This snippet defines a function named queryHypertune. Copy the snippet and insert it inside a new <script> section after the existing Hypertune snippet. Then define another function named ctaClick that calls queryHypertune to log the CTA Click event:

Now you can call the ctaClick function when the user clicks your CTA:

hashtag
Next steps

Now you can update the logic for exampleFlag from the Hypertune UI without updating your code or waiting for a new build, deployment, or release.

PreviousJavaScript quickstartNextPython quickstart

Last updated