Hello, hope you will help That's my code for growthbook, but as a result it all the time shows calendly button I have feature and experiment which have the same names. Please tell me what is wrong ?

/ AB TEST CALENDLY vs WHATSAPP
const abTestElem = document.querySelector('#ab__test');
const whatsapp = "<div class='whatsapp__btn'><a href='***********' target='_blank' rel='nofollow'><img src='/img/WhatsAppButtonGreenSmall.svg' alt='whatsapp'></a></div>"
const calendly = "<div class='calendly__btn'><a href='*************' target='_blank' rel='nofollow'> <img src='/img/calendly.svg' alt='calendly'></a></div>"

document.addEventListener("DOMContentLoaded", async () => {
    const gb = new window.growthbook.GrowthBook({
        apiHost: "<https://cdn.growthbook.io>",
        clientKey: "************",
        enableDevMode: false,
        trackingCallback: (experiment, result) => {
            // Example using Segment
            analytics.track("Experiment Viewed", {
                experimentId: experiment.key,
                variationId: result.key,
            });
        },
        onFeatureUsage: (featureKey, result) => {
            console.log("feature", featureKey, "has value", result.value);
        },
    });

    await gb.loadFeatures({
        autoRefresh: true,
        timeout: 2000,
    });

    const result = gb.run({
        key: "cta_btn_variants",
        variations: ["calendly", "whatsapp"],
        coverage: 1,
        weights: [0.5, 0.5],
    });

    if (result.value === 'whatsapp') {
        abTestElem.innerHTML = whatsapp
        gtag('event', 'cta_click', {
            'event_label': 'whatsapp',
            'value': 100
        });

    } else if (result.value === 'calendly') {
        abTestElem.innerHTML = calendly
        gtag('event', 'cta_click', {
            'event_label': 'calendly',
            'value': 100
        });
    }
});

It looks like you're not setting any user attributes, which are required for test bucketing / randomization. See the docs here which reference attributes in the constructor (you can also use

setAttributes()

): https://docs.growthbook.io/lib/js#step-1-configure-your-app

I just want that half of users will see variant 1 and another half variant 2. What attributes I should add ?

You need at minimum a consistent

userId

(or

sessionId

for anonymous users) that stays with the user across multiple visits. Does your site make either of those fields available? Or are you using any analytics platform that exposes an id?

Finally I'm getting user_id from cookie like this

function get_ga_clientid() {
    let cookie = {};
    document.cookie.split(';').forEach(function(el) {
        let splitCookie = el.split('=');
        let key = splitCookie[0].trim();
        let value = splitCookie[1];
        cookie[key] = value;
    });
    return cookie["_ga"].substring(6);
}

Ah yes, didn't realize you were using GA at first. That works. There are a few different methods that we outline for getting the userId here: https://docs.growthbook.io/guide/GA4-google-analytics#using-gas-client-id

Thanks for that, now I want to get some metrics like how many users clicked on one button or another. In metrics i have some errors. Please help me to fix that