https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
a

aloof-intern-85196

03/04/2024, 10:31 PM
Hello! Our team has been running Growthbook tests for awhile now and are starting to switch over to the Visual Editor tool. Our frontend platform is Gatsby 5. During the experiment set up, I am able to click the "Open Visual Editor" button which leads me to a window with the Visual Editor panel where I make my edits. That all works fine. But when I start the experiment, it never seems to actually run. I've created a very simple Gatsby repo and link to test this out. Here are all the relevant URLs if needed. I also installed the Growthbook Chrome Extension too. The attached screenshot is how I set up the SDK. My GrowthBook Experiment Page Build Link that we're targetting to (hosted by Netlify) GitHub Repo Any help / insight would be appreciated!
h

happy-autumn-40938

03/05/2024, 12:33 AM
It looks like you might be missing an id field (such as a user_id). You will need this for user assignment/randomization in your experiment
a

aloof-intern-85196

03/05/2024, 4:19 PM
Still facing the same issue. Hmm, do you guys have a mock repo anywhere that I can compare it with?
h

happy-autumn-40938

03/05/2024, 7:54 PM
we do have this: https://github.com/growthbook/examples If you're still having trouble, post some sample implementation code that involves setting the hashAttribute (id). Also check out our devtools Chrome extension for easier debugging: https://chromewebstore.google.com/detail/growthbook-devtools/opemhndcehfgipokneipaafbglcecjia
a

aloof-intern-85196

03/07/2024, 7:15 PM
Thanks! And here's some implementation code I've been running on a separate repo.
Copy code
create_UUID = () => {
    let dt = new Date().getTime();
  
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
       let r = (dt + Math.random() * 16) % 16 | 0;
       dt = Math.floor(dt / 16);
       return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}

let visitor_id = localStorage.getItem("growthbook_visitor_id");

if (!visitor_id) {
  visitor_id = create_UUID();
  localStorage.setItem('growthbook_visitor_id', visitor_id)
}

const growthbook = new GrowthBook({
  apiHost: process.env.GATSBY_GROWTHBOOK_API_HOST,
  clientKey: process.env.GATSBY_GROWTHBOOK_CLIENT_KEY,
  enableDevMode: true,
  attributes: {
    id: visitor_id,
    url: window.location.href,
  },
  trackingCallback: (experiment, result) => {
    const params = new URLSearchParams(window.location.search)
    const version = params.get(`gb-${experiment.key}`)

    if (version) return

    localStorage.setItem(`growthbook_experiment_${experiment.key}`, result.key)

    window.analytics.track('Experiment Viewed', {
      experimentId: experiment.key,
      variationId: result.key
    })
  },
});
• I added
url
as an attribute in our Growthbook SDK • Toggled Visual Editor in the Growthbook app's SDK Configuration setting • Added the Growthbook Chrome Extension The docs have been very straightforward and simple. Not sure what I'm exactly missing 😅
h

happy-autumn-40938

03/07/2024, 7:41 PM
does the chrome extension show that experiments were found on the page?
also noticed that your exp targets
<http://localhost:8001/>
. Is this the url you use to access the site?
f

fresh-football-47124

03/08/2024, 7:12 AM
Can you make sure the SDK is passing the visual editor changes? (edit the sdk and check for the 'include the visual editor' is selected
7 Views