Skip to main content

Create Your First Experiment

Now that you have Hyppot running, let's create and test your first A/B test experiment in just a few minutes.

Step 1: Create Your First Experiment​

  1. Open the browser and go to the Hyppot Admin Panel: http://localhost:8080/hyppot/panel
  2. Define Conversion Types: Click "Conversion Types Definition" and add a conversion type called "button-click"
  3. Create Experiment:
    • Name: button-color-test
    • Tracked conversions: button-click
    • Add a variable called "button-color" (String type)
  4. Add Variants:
    • Baseline: button-color = "blue", Traffic = 50%
    • Variant: button-color = "red", Traffic = 50%
  5. Configure Conversions: Add "button-click" to tracked conversions
  6. Save and Activate your experiment

Step 2: Test the Integration​

Create a simple HTML file to test your experiment and serve it locally:

  1. Create the test file: Save the following code as hyppot-test.html:
<!DOCTYPE html>
<html>
<head>
    <title>Hyppot Test</title>
    <script src="https://unpkg.com/hyppot@latest/dist/index.umd.js"></script>
</head>
<body>
    <h1>A/B Test Demo</h1>
    <div>User ID: <span id="user-id"> </span></div>
    <button id="test-button">Click Me!</button>
    
    <script>
        // Configure Hyppot
        const { resolver, tracker } = hyppot.configureHyppot((config) => {
            config.prefix = '/hyppot';
        });
        
        // Initialize with a test user ID
        const userId = 'user-' + Math.random().toString(36).substr(2, 9);
        
        resolver.initialize(userId).then(() => {
            document.getElementById("user-id").textContent = userId;

            // Resolve the experiment
            const experiment = resolver.resolve('button-color-test');
            
            if (experiment) {
                // Get the button color from the experiment
                const buttonColor = experiment.getVariableValue('button-color');
                
                // Apply the color
                const button = document.getElementById('test-button');
                button.style.backgroundColor = buttonColor;
                button.style.color = 'white';
                button.style.padding = '10px 20px';
                button.style.border = 'none';
                button.style.borderRadius = '5px';
                button.style.cursor = 'pointer';
                  
                // Track conversion on click
                button.addEventListener('click', async () => {
                    await tracker.trackConversion({
                        conversionType: { type: 'button-click' },
                        user: userId,
                        eventDate: new Date(),
                        metrics: []
                    });
                    alert('Conversion tracked! Button color: ' + buttonColor);
                });
            }
        });
    </script>
</body>
</html>
  1. Serve the file: Since browsers block cross-origin requests from file:// URLs, you need to serve the HTML file from a web server and handle CORS. The simplest approach for testing is to serve the file and proxy requests to Hyppot:
npx local-web-server --port 8000 --rewrite '/hyppot/(.*) -> http://localhost:8080/hyppot/$1'

Step 3: View Results​

  1. Open your HTML file in a browser (refresh a few times with different button colors)
  2. Click the button to generate conversions
  3. Go back to the admin panel: http://localhost:8080/hyppot/panel
  4. Open your experiment and click the "Statistics" tab
  5. You'll see impression and conversion data for both variants

🎉 Congratulations!​

You've successfully:

  • ✅ Created your first A/B test experiment
  • ✅ Integrated it with a web page
  • ✅ Tracked conversions and viewed results

Next Steps​

Now that you have your first experiment running, you can:

  1. Learn about experiments - Understand more details on how to set up experiments
  2. Integrate with your app - Add Hyppot to your existing application
  3. Learn the configuration options - See what are the possible options to configure