Hi guys, we’re trying to use the new JS feature of...
# ask-questions
b
Hi guys, we’re trying to use the new JS feature of the Visual Editor to build AB tests with GTM. We’re having some difficulties so would appreciate any help! 🙏 We’re trying to get an initial experiment live so we can test this feature fully and serve an AB experience to users. We’ve followed this post to setup the SDK and connect it to GTM. It doesn’t really detail how to use experiments with the Visual Editor and GTM, so was wondering if anyone could point us in the right direction? We’ve added some JS and CSS to an experiment with the Visual Editor and started it running (100% traffic to the variant with our changes). It’s mentioned that Visual Editor experiments should automatically run when targeting conditions are met. When using the dev tool Chrome extension, it doesn’t list any experiment as running. It is connecting to Growthbook successfully and we can see an object being returned. Is there something else we need to add/enable to show this experiment on our site? We’re just trying to run a simple JS console log and CSS change in the variant. I’ve made sure to tick the checkbox so our SDK connection includes visual experiments in endpoint’s response. Do we need to add an activation metric? We’ve tried adding a new metric in the UI but it didn’t show in the activation metric dropdown in the experiment. Do we have to add a feature flag to get this experiment to show?
s
Hi Ben, you may need to enable Visual Experiments to be included in your SDK payload. Go to Features > SDKs and select your SDK connection. You should be selecting JavaScript or React as your frontend environment, and should see the options below. Make sure that visual experiments are enabled, and draft too if you'd like to see experiments that haven't started yet. Let me know if this works for you
Oh, I apologize I see that you've already done that. Let me take a look
Is the experiment running or still in draft state?
b
Thanks for the suggestion @swift-helmet-3648, yes the ‘include visual experiments’ switch is already enabled for our SDK connection. Yep the experiment is running. Attached a screenshot of the experiment detail page in case that helps! 🙂
s
I think your URL targeting might not be working as expected - Can you try inputting a URL prepended with
https://
or
http://
?
b
Sure ok, I’ve tried adding a full URL and still nothing. We don’t have any data sources added yet, is that essential to start seeing an experiment do you know?
s
No it's not necessary
Just to confirm - you are navigating to the same URL as defined in the visual experiment? Do you not see the experiment loaded in the Devtools panel?
Could you provide a screenshot of the 'Debug Log' in the from GrowthBook devtools panel for the loaded experiment?
It could be possible that you're not setting some necessary user attributes, like
id
for example.
b
Hi Adnan, yes navigating to the same URL as set in the targeting in the experiment. I’ve attached a screenshot of what I’m seeing in the dev tools panel. Apologies if not correct, I wasn’t entirely sure if this is what you meant by ‘Debug Log’.
For context, here’s our tag right now. I know it will need some improvements like assigning a proper ID for the user etc but as far as I see it should work right now to see a running experiment. Slightly unrelated but is it worth confirming I have the correct details saved in the Chrome extension options? I’ve saved the API host as https://cdn.growthbook.io and copied the API secret from a key setup in Growthbook Settings -> API Keys. Let me know if that’s incorrect, if that might be why I don’t see any experiments in the dev tools panel?
s
Yes, your API host is incorrect. Depending on whether you’re using a self-hosted instance or cloud, it should be the URL to your GrowthBook API Server (for cloud that’ll be https://api.growthbook.io)
b
Ah ok, thanks very much for confirming! Yes we’re using the cloud version so I’ve updated the API host in my extension settings and the GTM tag. Still not seeing the experiment in the Growthbook dev tools panel unfortunately, but when looking in the Network tab I can see data for what Growthbook is loading and our experiment is there (please see attached). Does anything look off there? Can see the CSS and JS change are included in the variations array, I’m assuming we don’t need a DOM mutation for the experiment to run?