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:
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.
Hypertune uses for its query language. In the Result panel, you can see the flag that matches your query.