HTML quickstart
1. Define your schema
Hypertune uses GraphQL 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
}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.
3. Fetch your flags
Go to the Preview view and enter the following query:
Enter the following query variables:
Hypertune uses GraphQL 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.
4. Use your flags
To show or hide a section depending on your flag value, replace the section's code:
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:
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.
Last updated