Hidden element (Forms) - A/B Testing example

by support_tint

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Asynchronously load the Tint script -->
    <script async src="https://www.tintup.com/app/dist/tint.js"></script>

    <script>
        // Function to get a random A/B Test variant
        function getRandomAbTestVariant() {
            const variants = ['variant_a', 'variant_b'];
            const randomIndex = Math.floor(Math.random() * variants.length);
            return variants[randomIndex];
        }

        // Generate random A/B Test variant
        const randomAbTestVariant = getRandomAbTestVariant();

        // Display the selected A/B Test variant before the form
        const displayAbTestVariant = document.createElement('p');
        displayAbTestVariant.innerText = `A/B Test Variant: ${randomAbTestVariant}`;

        // Create a new div element to hold the Tint form
        const tintForm = document.createElement('div');

        // Set the teamId attribute to your team's ID
        tintForm.dataset.teamId = '374768'; // Replace with your team ID

        // Set the formId attribute to your form's ID
        tintForm.dataset.formId = '1765'; // Replace with your form ID

        // Set the formValues attribute with the A/B Test variant value
        tintForm.dataset.formValues = `ab_test_variant=${randomAbTestVariant}`;

        // Append the newly created elements in the correct order
        document.body.appendChild(displayAbTestVariant);
        document.body.appendChild(tintForm);
    </script>
</body>
</html>