growthbook / devtools

GrowthBook DevTools extension for Chrome
MIT License
5 stars 5 forks source link

Current Value override doesn't work with Javascript SDK #49

Open ryangall7 opened 11 months ago

ryangall7 commented 11 months ago

I've added the Javascript SDK to our bundle with web pack. The dev tools can read the features and user attributes no problem, but overriding the Current Value in dev tools doesn't seem to change the feature value.

Javascript Setup:

import { GrowthBook } from "@growthbook/growthbook";

const gb = new GrowthBook({
  apiHost: "https://cdn.growthbook.io",
  clientKey: "******************",
  enableDevMode: true,
  subscribeToChanges: true,
  trackingCallback: (experiment, result) => {
    // TODO: Use your real analytics tracking system
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key
    });
  }
});
window.gb = gb; // Expose for debugging

...

gb.setAttributes({
  id: cartToken,
  email: window?.userAttributes?.email,
  customerId: window?.userAttributes?.customerId,
  totalSpent: window?.userAttributes?.totalSpent,
  ordersCount: window?.userAttributes?.ordersCount,
  tags: window?.userAttributes?.tags,
  country: Shopify.country,
  locale: Shopify?.locale,
  currency: Shopify?.currency?.active,
  url: window.location.href,
  userAgent: navigator.userAgent,
  screenWidth: window.innerWidth,
  screenSize: screenSize,
  themeId: Shopify.theme.id,
  themeName: Shopify.theme.name,
  themeRole: Shopify.theme.role
});

//===========================
// setup growthbook
//===========================

export const setupGrowthbook = async function(){

    // Wait for features to be available
    await gb.loadFeatures();

    const value = gb.getFeatureValue("google-top-quality-store");
    console.log("google-top-quality-store", value);

}

Heres the devtools screen:

Screenshot 2023-11-16 at 3 26 55 PM

The feature never shows as a force feature value:

Screenshot 2023-11-16 at 3 28 34 PM

I've been digging through to code to try and find the method by which these are getting set. It seems theres something with messages sent to the window so I started logging any related to GB

window.addEventListener("message", function (event) {
  const data = event.data;
  if(data?.type?.startsWith("GB_")){
    console.log(data);
  }
});

but I only get one message:

{
    attributes: {id: '31295c7d037d94ba9af407aee0fb2eba', email: undefined, customerId: undefined, totalSpent: undefined, ordersCount: undefined, …}
    experiments: {}
    features: { 
        google-top-quality-store : {defaultValue: false, rules: Array(1)}
    }
    overrides: {},
    type: "GB_REFRESH"
}

which also appears to have no overrides.

bttf commented 6 months ago

Hi @ryangall7 Thanks for submitting. I'm unable to reproduce the issue on my local. We've updated the SDK a few times now - it's at 0.36.0 now. Have you tried latest and seen the same results?