https://www.growthbook.io/ logo
a

aloof-translator-23445

08/22/2023, 2:53 PM
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 ?
Copy code
/ 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
        });
    }
});
h

happy-autumn-40938

08/22/2023, 4:54 PM
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
a

aloof-translator-23445

08/22/2023, 8:35 PM
I just want that half of users will see variant 1 and another half variant 2. What attributes I should add ?
h

happy-autumn-40938

08/22/2023, 10:37 PM
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?
a

aloof-translator-23445

08/23/2023, 11:10 AM
Finally I'm getting user_id from cookie like this
Copy code
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);
}
h

happy-autumn-40938

08/23/2023, 4:42 PM
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
a

aloof-translator-23445

08/24/2023, 7:49 AM
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
2 Views