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.

PreviousRust quickstartNextGraphQL quickstart

Last updated