Web 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:
query Content(
$userId: String!,
$userAgent: UserAgent!,
$referer: String!
) {
root(
context: {
environment: "PRODUCTION",
user: {
id: $userId,
userAgent: $userAgent,
referer: $referer
}
}
) {
exampleFlag
userId
}
}Enter the following query variables:
{
"userId": "#UID#",
"userAgent": "#UA#",
"referer": "#REFERER#"
}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:
<script>
var exampleFlag = window.hypertune?.root?.exampleFlag;
if (exampleFlag) {
document.write('<div>This section is only shown when exampleFlag is on.</div>');
}
</script>6. Log events
Switch to the Preview view and enter the following query:
query Content(
$userId: String!,
$userAgent: UserAgent!,
$referer: String!
) {
root(
context: {
environment: "PRODUCTION",
user: {
id: $userId,
userAgent: $userAgent,
referer: $referer
}
}
) {
ctaClick
}
}Enter the following query variables:
{
"userId": "123",
"userAgent": "#UA#",
"referer": "#REFERER#"
}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:
<script>
function queryHypertune(variables) {
...
}
function ctaClick() {
var userId = window.hypertune?.root?.userId;
if (!userId) {
return;
}
queryHypertune({
userId: userId,
userAgent: "#UA#",
referer: "#REFERER#"
});
}
</script>Now you can call the ctaClick function when the user clicks your CTA:
<button onclick="ctaClick();">Sign Up</button>That's it
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