CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-client/javascript-sdk" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.5.2"> <title data-rh="true">JavaScript Client SDK | Statsig Docs</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://docs.statsig.com/img/docs_meta_q3_2023.png"><meta data-rh="true" name="twitter:image" content="https://docs.statsig.com/img/docs_meta_q3_2023.png"><meta data-rh="true" property="og:url" content="https://docs.statsig.com/client/javascript-sdk"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="JavaScript Client SDK | Statsig Docs"><meta data-rh="true" name="description" content="<FeaturePillList"><meta data-rh="true" property="og:description" content="<FeaturePillList"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.statsig.com/client/javascript-sdk"><link data-rh="true" rel="alternate" href="https://docs.statsig.com/client/javascript-sdk" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.statsig.com/client/javascript-sdk" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://JOWHDNMZRN-dsn.algolia.net" crossorigin="anonymous"><link rel="search" type="application/opensearchdescription+xml" title="Statsig Docs" href="/opensearch.xml"> <script>!function(e,t,n,a){e[a]=e[a]||[],e[a].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var r=t.getElementsByTagName(n)[0],o=t.createElement(n);o.async=!0,o.src="https://www.googletagmanager.com/gtm.js?id=GTM-NRDCWNF";var c=t.querySelector("[nonce]");c&&o.setAttribute("nonce",c.nonce||c.getAttribute("nonce")),r.parentNode.insertBefore(o,r)}(window,document,"script","dataLayer")</script> <script async defer="defer" src="https://www.googletagmanager.com/gtag/js?id=G-EM5RHE1RHW"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-EM5RHE1RHW")</script> <script src="https://www.statsig.com/js/single-id.js" onload="setupStatsigSingleId('docs')"></script> <script src="https://cdn.jsdelivr.net/npm/@statsig/js-client@3/build/statsig-js-client+session-replay+web-analytics.min.js?apikey=client-XlqSMkAavOmrePNeWfD0fo2cWcjxkZ0cJZz64w7bfHX"></script> <script>window.statsigTier="production"</script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"> <script src="/js/rapidoc-min.js"></script> <script src="https://cdn.koala.live/v1/daniel/sdk.js"></script> <script src="/js/koala.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css" integrity="sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.e648ac00.css"> <script src="/assets/js/runtime~main.4cb3a12a.js" defer="defer"></script> <script src="/assets/js/main.efba08b8.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo-new.svg" alt="Statsig" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo_white.svg" alt="Statsig" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><div class="navbar__item"><button class="signupCTA CTA" onclick='window.open("https://console.statsig.com","_blank").focus()'>Get Started</button></div></div><div class="navbar__items navbar__items--right"><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--active">New to Statsig?</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item doc-icon sidebar-icon"><a class="menu__link" tabindex="0" href="/">Overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed rocket-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/guides/first-feature">Quickstart Guides</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed lightbulb-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/understanding-platform">Core Concepts & Setup</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item doc-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/sdks/getting-started">SDKs & Frameworks</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/sdks/getting-started">SDK Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/sdks/client-vs-server">Client vs Server SDKs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/concepts/user">Passing a User to SDKs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/client/concepts/initialize">Initializing</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/sdk/debugging">Debugging</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item html-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/client/html-snippet">HTML Snippet</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item js-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/client/javascript-sdk">JavaScript</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item react-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/client/javascript-sdk/react">React</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item next-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/client/javascript-sdk/next-js">Next.js</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item android-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/client/androidClientSDK">Android</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item ios-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/client/iosClientSDK">iOS/tvOS/macOS</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item node-icon sidebar-icon sdk-sidebar-icon"><a class="menu__link" tabindex="0" href="/server-core/node-core">Node Core</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/client/cpp-client-sdk">More Client SDKs</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/server/dotnetSDK">More Server SDKs</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/server-core/legacy-sdks">Legacy Server SDKs</a><button aria-label="Expand sidebar category 'Legacy Server SDKs'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/azureai/introduction">Azure AI</a><button aria-label="Expand sidebar category 'Azure AI'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/guides/node-express-feature-flags">Advanced SDK Methods</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/server/deprecation-notices">Deprecation Notices</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed key-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/http-api">APIs</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed integrations-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/integrations/introduction">Integrations</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed data-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/metrics/101">Data & Metrics</a></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item question-icon sidebar-icon"><a class="menu__link" tabindex="0" href="/faq">FAQs</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Products</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed feature-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/feature-flags/working-with">Feature Flags</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed xp-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/experiments-plus">Experimentation</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed chart-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/product-analytics/overview">Product Analytics</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed web-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/webanalytics/overview">Web Analytics</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed play-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/session-replay/overview">Session Replay</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed whn-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/statsig-warehouse-native/introduction">Warehouse Native</a></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link">Management & Admin</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed team-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/access-management/introduction">Workspace Management</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed template-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/org-admin/organization_policies">Collaboration</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed admin-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/compliance/introduction">Privacy</a><button aria-label="Expand sidebar category 'Privacy'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed infra-icon sidebar-icon"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist" tabindex="0" href="/infrastructure/introduction">Infrastructure Operations</a><button aria-label="Expand sidebar category 'Infrastructure Operations'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">New to Statsig?</span><meta itemprop="position" content="1"></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">SDKs & Frameworks</span><meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">JavaScript</span><meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>JavaScript Client SDK</h1></header><div style="display:flex;flex-wrap:wrap;margin-bottom:20px"><div style="display:block;width:100%"><h2>Supported Features</h2></div><div><a href="#feature-gates" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-flag.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Feature Gates</span></a><a href="#layers" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-experiment.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Experiments</span></a><a href="#dynamic-configs" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-dynamic-config.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Dynamic Configs</span></a><a href="#layers" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-layer.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Layers</span></a><a href="#event-logging" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-analytics.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Event Logging</span></a><a href="#session-replay" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-replay.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Session Replay</span></a><a href="#autocapture" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-web.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Auto Capture</span></a><a href="#parameter-stores" class="feature-pill" style="display:inline-flex;align-items:center;padding:4px 12px;margin:0 4px 4px 0;border-radius:16px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;height:28px"><span style="margin-right:6px;display:flex;align-items:center"><img src="/img/icons/icon-parameter-store.svg" width="16" height="16"></span><span style="display:flex;align-items:center">Parameter Stores</span></a></div></div> <div style="display:flex"><a href="https://github.com/statsig-io/js-client-monorepo" target="_blank" rel="noopener noreferrer" style="font-size:14px;font-weight:600;color:var(--ifm-color-content);display:flex;align-items:center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNTE3OEEyRTk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNTE3OEEyRjk5QTAxMUUyOUExNUJDMTA0NkE4OTA0RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJDOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJEOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FYrpWAAABrNJREFUeNrkW2lsVFUUvjMWirYUkS5BXApUa2vd6gL+wAWjoP5RiW2EUBajAiqSuPADQ0w1UUQTrcFAUUSJEKriEuMWFKuJIElFSS24YNpQK6WoBbuAktbva880M8O8vnfevJm+CSf5cme599xzvnfffffce17AJFjycnLzUVwDXAgUAucBY4BMIEOqdQIdwJ/Az4J64OvWtoONibQvkACHgyiuBe4CbgLOjVNlE/AZsAmoBSE9viQAjueieBCYC5yVoAvWDKwHqkBEmy8IgON09lHgXmCESY4cBaqBlSCieUgIgOPDUCwBngBOM0MjXdL/CyDiv6QRAOcvR7EBKDL+kD3AbJBQl1AC4DjrLwaeBYYbf8m/ciu+BCJ6PScAzp+K4nXgTuNveQuYAxK6PSMAzo9C8TFwtUkN2Q7cDBIOx02AOP8FUGpSSzgf3GBHQsDGec7unwOTTWrKDiGhS02ATHjvALeb1JZ3gRlWE+MpVq0yMzIekRk/1YWP6o7Ors5vHI8AXH1Odl8BaTbKrwd4j10MTAduS8JqkKvA94BPgN0A56htNm2OMyDDKNhuSwCcT5dIrMBG6S4oLI1qezqKBcBjwGiPHW8HVgCr0W97VL/fobjMpv2vQAnaHgv/MdYVXurAeSNPhggRw56BQatRVgL3A0H5+xDwI8Dw9g/5Hlq+clmdDYwF8iV0zpb/GP2tApZHOx4m2xwQUCC+VVqOABg+AUUDkO6AgHkwaL2DJXORxPVNylUnw+gpXObaLXFRlxHoaw7U8uoXQ99vViNgqUPnKQfsKojhdW7GuxDW5JUtIuni432hH4JhLJ7Dq6qwcZiPZnpNXDJPfI0kQEJbjVM5PiIgW3nhlkQQILH9LGWnV/iIAK0ts8TngREwDchVKrnKRwRobckVnwcIKFcq4ONrkY8IWBT2SHUq5eEE3Khs/CRm6Z1+8V5sqVQ26/M5gHuhSJ79TqUFmIhOj/ppwQ8/Rshqb5yiWXFQFhsaWeU352UU0KaXlc2mBI1+Y3OzjyO/Gm2kSAIKFQ2awfQ+v3oP23gL/K5oUhh0GPiEZG8KxP97FHULgsqwtTUFCDioqHsGCRipaHA8BQjQrAcyg4roj5KVAgSMUtRNDyqVj0wBAlQ2koBuRf3xKUBAvqJuN1eCrYpAiHNAltNjpyFYDfL47oix38wdmDA5AvYr+kjzWRgcLVcqnKfsJwGNyk5u9TEBtyjrNwaVgRClTPKA/Db8aVOZslkDG2nD2vEuOkqGlLmYpHcGJLlJu8LjtvJFgx06Jvnq8xC33gUBeUE4waWjduua5wdVPrr6VS6cr6PvoXv5Ixed3g3mH/fB1V9OW1w07fM5IEouUEZR4bIWWJzsTRJ55r8I3ONSRRFs3hsIU8hkgkkulf0CPAx8qElQcuk4beYp9Epgoks138LOvqSPgfyAzIwMZlnFSobgIegc4H3gH6AkxmKDub9Mjb0DeoYDrZ1dne0eO14AvfPx8RXgAYaycahbBvt+GLgFpIM0md3PjqrMTMxpYKxB6p1v+s/n7bbSuMCqldmZyc+fRh9ND+IsAxrmG3C3qtj0J1uP84hLrnwnwJbjEQRIxzw0XB2jER93C9Bog9TjsRgzLpzuJr0BzHV6e8gwf9XoziqdCv1YE/oSTQBHwfem/3w+5syPxuukLtfdO0zk+WIs+YuPKLQ7ohzyWTIix3joPPMTLg1d/Yg5gIL7ogf32U/4WGGhYDr+34J6bUALPpPA62w6XYMOP9BaCv3HoD/PeJubODN6U/eEq4cKTIurttpBAZ4L+87TmKdtOt0ah8FbPXS+WnyLEKskqUy5FaweM5dA2e6w+pNkZuajhfMD3/zYBfDKb3Y6+cWwgytOL7bh98nQ73BEgHReIvd4Roy/a6Cs3CRYJOnq7zjV8HWcybC33mpLLKZIA84FPRYhcSokUNL2Civnjd0MjoZbUCy0+PtNkDDD5wQsFB8sxWm2+GJZd8eSt4HnZXnZ66Nb4CHYYxuxat4XmI1inbHeczskq77DMrK4z8AgK3+Q/L5EEMBn/PzQos0zAsQgvg5XY3TpNKOTSAD3NsrQX63TBqq9PVHM9NgvfXi/06ZSjfNqAoQEHj9Pled+pw8cpw2co6aKbSoJxDlJnYniKdP/sqSVrrEw7IBL/TnG+rSXEy7fYVoG/S1uffDkzVEYypB1qewJRCdb5rp9yxN6mQDZFmOS2wisCIXo8Yin7w7LiKiQEcFYfhOMnBmnzo1CLIO09Qyt47niJxDQ29trTmY56Qn4X4ABAFR7IoDmVT5NAAAAAElFTkSuQmCC" alt="Docusaurus themed image" class="themedComponent_mlkZ themedComponent--light_NVdE" style="height:18px;width:18px;margin-right:6px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlFQkFERkU4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlFQkFERkQ4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJFOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJGOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Kk5lQwAABYxJREFUeNrkm29oVXUYx3+7bM3V1FnbqlltrtXWtYRa1nqxooY5E7EhKWGuaTDBagol9SIMDCKICASj+cISw/DPi16ZBakrUBnoC7nNoTMWy6I1c+LmVq6t78N9jpyu555znt855+536IHPi939/jzP95zznN+/kzc1NaUitirwJJgPasF94DZQDG7hMqNgBFwEZ5kU+AH0R+lcXgQCJMBT4EXwLKgM2N7P4FvwJegCk6YKUA5eB23grogu2C/gc7AN/GGKABTsZtAOZqjc2DjYAT5kUfSNBNCkAGwGo1PTZ6PsQ4FuHLp3QD3YDR5QZtgZsAac1ElYokcGbATHDApesS/kUwf7GEkOKAK7wAvKbNsPXgZjYQowG3wNnlDxsONgCbgchgAU/GHwiIqXUT5o8hLBKwfcDA7FMHgrUR/iGLQEoGTyBWhQ8bUGjiFPR4A3QIuKv7VwLKIcQMnue5Dv0fjT/IwtAM3g+RyMBmkU+BXf3qc5Rx3xqDPBE7LjfkaCheCcj1HYKYe6JeBt8GcEo75L3HaJQ7+nfNQ/x7H9p67TFX4L1Pi4EocdfhsGH4BPwVbwqu0xGwI/8vT2N/77Gv+vAJSCO3n6PJ//Vjz72w62cPtORnfAwx7+1nBsW93ugGow7vOKtPkYa9eDl0Clxji9kuvW+yjb5tPncY7xet3MhjoFt2RzgIlU2DQL/O6017W/Be4BawXJqMCgTH+ToOxajvWG1+AmYVBlBglQKrxwmzIFoB9XCzt91CABpL6sti62JcBiXtKS2GMGCSD1pZxjvi7AKmED9PraYJAAG2yvVL+2yi7AImHl90C3QQJ03/B+97ZF1lCYVlN6BBV/BffykNQkoyF4H5grqJOkO6BR2NF2A4O35gifCOs0JjTW9vYaPPPbJ11LJAFqBRVoDf68wQLQI3BBUL424XPiY1lvDOb/ZwRla0iAOYIKv8dAgEFB2VtJgJmCChMxEEAyHigmAQoFFWbFQIDZgrKF0p2hmTEQQOQjCTAmKD8vBgJUCcqOkQBXBBXosEORwcEXKdmBjCskwICgQr5h0+BMW6i8V7LtNkAC9As7WWqwAM8Jy/cnhBMhspVKvq2eC0uwbxLrSWhMa+dpdJQLW6mRpLtpOlyuMcL7CTwErhoSPG2ApjQEuD3BQ0fp0ZJqlT6pZYpt0wieYh60nuWDGp2+At4xIPgt7IvU0jHzBkFdgD27HWDGNGyGFHHfulaXuTN0IkBjZ8EykJeDwKmPFtAXwN8TTltjrVkKfwcawXJW3G3v8DTYCKoiCLwGvAl6QthpbnU6J5jP2f1uh1Wgxbbxwv0qvT/vtZRGA6wuzs50+Pkb8JdgQtPMq1VJld7bnxtSzhjgJD5hzwEW611OZK6xlSvzeYbAsl3Cx4PK7ozodOl6t93hfJByqbzOVnYh+MdHhxfBLI1bnuoMhRx8imPMKgDR5LG/nrSVfddHpx8HeO4/ClmApsw+snXsdk7gYMat+r5Hp0sDCLAkxOA7nfrI1nGxx2tmQUb5x8FuzgvD4Dw4wNm2MIAA1SEF38cx+RaAeBCMZGlwb44GOyUhBD/CsTj24TatpddXq3L+RIVmXnE4QzjJMaSylvBxFdqzKHsVrDD8Dmj36sOvIx0unewHDRENg4MI0BH2FyP0RcZOlzW3Ib7VLvPqDK0z1PEq7bDmLVwCLgnr0AhvnUp/0eJp0k9m6HO4fUp2nGZODgUY5PzUJVlHkxg1TEfnjxqY8I6yb12SSjqLm7T9/Ax4TaW/+JxuIx862KcL4toBk1QFT1omXZLRHQHaL3Npl/r8jH3QjiGsbJ3kGd/fDo6WBWi31KG9a9xXMgzfw35tVfCR9l52dk8Ibe7htnq57YowfY7i4+lYWUL9z+1fAQYACqstE4NCc18AAAAASUVORK5CYII=" alt="Docusaurus themed image" class="themedComponent_mlkZ themedComponent--dark_xIcU" style="height:18px;width:18px;margin-right:6px">statsig-io/js-client-monorepo</a></div><div style="height:4px"></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="working-with-the-sdk">Working with the SDK<a href="#working-with-the-sdk" class="hash-link" aria-label="Direct link to Working with the SDK" title="Direct link to Working with the SDK"></a></h2> <!-- --> <!-- --> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="feature-gates">Checking a Feature Flag/Gate<a href="#feature-gates" class="hash-link" aria-label="Direct link to Checking a Feature Flag/Gate" title="Direct link to Checking a Feature Flag/Gate"></a></h3> <p>Now that your SDK is initialized, let's check a <a href="/feature-flags/working-with"><strong>Feature Gate</strong></a>. Feature Gates can be used to create logic branches in code that can be rolled out to different users from the Statsig Console. Gates are always <strong>CLOSED</strong> or <strong>OFF</strong> (think <code>return false;</code>) by default.</p> <div><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="dynamic-configs">Reading a Dynamic Config<a href="#dynamic-configs" class="hash-link" aria-label="Direct link to Reading a Dynamic Config" title="Direct link to Reading a Dynamic Config"></a></h3> <p>Feature Gates can be very useful for simple on/off switches, with optional but advanced user targeting. However, if you want to be able send a different set of values (strings, numbers, and etc.) to your clients based on specific user attributes, e.g. country, <strong>Dynamic Configs</strong> can help you with that. The API is very similar to Feature Gates, but you get an entire json object you can configure on the server and you can fetch typed parameters from it. For example:</p> <div><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>See <a href="#typed-getters">Typed Getters</a> to learn more about accessing values.</p></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="layers">Getting a Layer/Experiment<a href="#layers" class="hash-link" aria-label="Direct link to Getting a Layer/Experiment" title="Direct link to Getting a Layer/Experiment"></a></h3> <p>Then we have <strong>Layers/Experiments</strong>, which you can use to run A/B/n experiments. We offer two APIs, but we recommend the use of <a href="/layers">layers</a> to enable quicker iterations with parameter reuse.</p> <div><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>See <a href="#typed-getters">Typed Getters</a> to learn more about accessing values.</p></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="event-logging">Logging an Event<a href="#event-logging" class="hash-link" aria-label="Direct link to Logging an Event" title="Direct link to Logging an Event"></a></h3> <p>Now that you have a Feature Gate or an Experiment set up, you may want to track some custom events and see how your new features or different experiment groups affect these events. This is super easy with Statsig - simply call the Log Event API for the event, and you can additionally provide some value and/or an object of metadata to be logged together with the event:</p> <div><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div> <p>Learn more about identifying users, group analytics, and best practices for logging events in the <a href="/guides/logging-events">logging events guide</a>.</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="typed-getters">Typed Getters<a href="#typed-getters" class="hash-link" aria-label="Direct link to Typed Getters" title="Direct link to Typed Getters"></a></h3> <p>The <code>Layer</code>, <code>Experiment</code> and <code>DynamicConfig</code> objects all support a "typed" <code>get</code> method. This method can help avoid issues where a value is not the type you expect.</p> <p>For example, imagine we have a Dynamic Config with a single <code>number</code> value called <code>"my_value"</code>:</p> <div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// { "my_value": 1 }</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> myDynamicConfig </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getDynamicConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"a_config"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> myFallbackValue </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myDynamicConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"my_value"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"fallback"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// returns: "fallback"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> myTypedValue </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myDynamicConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"my_value"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// returns: 1</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> myRawValue </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myDynamicConfig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"my_value"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// returns: 1</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>Because <code>"my_value"</code> points to a <code>number</code> but in the <code>myFallbackValue</code> case, we are calling <code>.get</code> with a <code>string</code> fallback value, the fallback is being returned.</p> <p>In the <code>myTypedValue</code> case, we are passing a <code>number</code> fallback value, and since <code>"my_value"</code> is also a <code>number</code>, the actual value of <code>1</code> is returned.</p> <p>If typing is not important to you, the fallback argument can be omitted, and the SDK will simply return the value. This is highlighted in the <code>myRawValue</code> case.</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="evaluation-details">Evaluation Details<a href="#evaluation-details" class="hash-link" aria-label="Direct link to Evaluation Details" title="Direct link to Evaluation Details"></a></h3> <p>When you receive a value, it may be useful to know how the SDK came to that result. For this purpose, on every Statsig type there exists a way to check the <code>EvaluationDetails</code> object.</p> <p>This object contains the following fields:</p> <ul> <li><code>Reason</code>: This is a string containing the source as well as whether or not the specific config was found.<!-- --> <ul> <li><code>Network:Recognized</code> means the SDK has the latest values and found an entry for the config.</li> <li><code>Cache:Unrecognized</code> means we are working with cached values, are could not find the given config.</li> <li>For the full list of possible combinations, see the page on <a href="/sdk/debugging">Debugging</a>.</li> </ul> </li> <li><code>lcut</code>: Last Config Update Time - This is the unix timestamp for when <strong>any</strong> configuration in your project changed.<!-- --> <ul> <li><strong>lcut</strong> works as a version number for you project. If it changes, values are deemed out of date and possibly need to be refetched.</li> </ul> </li> <li><code>receivedAt</code>: This is the unix timestamp of when the SDK received these values. This can be useful in knowing how old your cache is.</li> </ul> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="code-examples">Code Examples<a href="#code-examples" class="hash-link" aria-label="Direct link to Code Examples" title="Direct link to Code Examples"></a></h3> <div><p>Prefer seeing it in practice? Included in the open source repository are some <a href="https://github.com/statsig-io/js-client-monorepo/tree/main/samples">Code Examples</a>. View these for common use cases for the SDK. <span> </span></p></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="parameter-stores">Parameter Stores<a href="#parameter-stores" class="hash-link" aria-label="Direct link to Parameter Stores" title="Direct link to Parameter Stores"></a></h2> <p>Parameter Stores hold a set of parameters for your mobile app. These parameters can be remapped between Statsig entities (Feature Gates, Experiments, and Layers), so you can decouple your code from the configuration in Statsig.</p> <p>You can read more about the concept <a href="/client/concepts/parameter-stores">here</a>.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getting-a-parameter-store">Getting a Parameter Store<a href="#getting-a-parameter-store" class="hash-link" aria-label="Direct link to Getting a Parameter Store" title="Direct link to Getting a Parameter Store"></a></h3> <p>To fetch a set of parameters, use the following api:</p> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> homepageStore </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getParameterStore</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"homepage"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="getting-a-parameter">Getting a parameter<a href="#getting-a-parameter" class="hash-link" aria-label="Direct link to Getting a parameter" title="Direct link to Getting a parameter"></a></h3> <p>You can then access parameters like this:</p> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> title </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> homepageStore</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">"title"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// parameter name</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Welcome"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// default value</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> showUpsell </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> homepageStore</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token string" style="color:#e3116c">"upsell_upgrade_now"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="statsig-user">Statsig User<a href="#statsig-user" class="hash-link" aria-label="Direct link to Statsig User" title="Direct link to Statsig User"></a></h2> <!-- --> <span>You should provide a StatsigUser object whenever possible when initializing the SDK, passing as much information as possible in order to take advantage of advanced gate and config conditions (like country or OS/browser level checks).</span> <p>Most of the time, the <code>userID</code> field is needed in order to provide a consistent experience for a given user (see <a href="/guides/first-device-level-experiment">logged-out experiments</a> to understand how to correctly run experiments for logged-out users).</p> <span>If the user is logged out at the SDK init time, you can leave the `userID` out for now, and we will use a stable device ID that we create and store in the local storage for targeting purposes.</span> <p>Besides <code>userID</code>, we also have <code>email</code>, <code>ip</code>, <code>userAgent</code>, <code>country</code>, <code>locale</code> and <code>appVersion</code> as top-level fields on StatsigUser. In addition, you can pass any key-value pairs in an object/dictionary to the <code>custom</code> field and be able to create targeting based on them.</p> <!-- --> <div>Once the user logs in or has an update/changed, make sure to call `updateUser` with the updated `userID` and/or any other updated user attributes:</div> <div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="private-attributes">Private Attributes<a href="#private-attributes" class="hash-link" aria-label="Direct link to Private Attributes" title="Direct link to Private Attributes"></a></h3> <p>Have sensitive user PII data that should not be logged? No problem, we have a solution for it! On the StatsigUser object we also have a field called <code>privateAttributes</code>, which is a simple object/dictionary that you can use to set private user attributes. Any attribute set in <code>privateAttributes</code> will only be used for evaluation/targeting, and removed from any logs before they are sent to Statsig server.</p> <p>For example, if you have feature gates that should only pass for users with emails ending in "@statsig.com", but do not want to log your users' email addresses to Statsig, you can simply add the key-value pair <code>{ email: "my_user@statsig.com" }</code> to <code>privateAttributes</code> on the user and that's it!</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="updating-users">Updating Users<a href="#updating-users" class="hash-link" aria-label="Direct link to Updating Users" title="Direct link to Updating Users"></a></h3> <p>At some point, you will probably need to change the StatsigUser being used by the Statsig client. To do this you can call <code>updateUserSync</code> or <code>updateUserAsync</code>.</p> <p>In advanced use cases, you may want to Prefetch or Bootstrap (Provide) values for the updating of a user. See <a href="/client/javascript-sdk/using-evaluations-data-adapter">Using EvaluationsDataAdapter</a> to learn how this can be achieved.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="prefetching-users">Prefetching Users<a href="#prefetching-users" class="hash-link" aria-label="Direct link to Prefetching Users" title="Direct link to Prefetching Users"></a></h3> <p>In some cases, it can be useful to prefetch values for a given user, such that switching to that user later can be done synchronously.</p> <p>To do this, you would call <code>prefetchData</code> and then later <code>updateUserSync</code>.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="statsig-options">Statsig Options<a href="#statsig-options" class="hash-link" aria-label="Direct link to Statsig Options" title="Direct link to Statsig Options"></a></h2> <div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="disablelogging-boolean"><strong>disableLogging</strong> <code>boolean</code><a href="#disablelogging-boolean" class="hash-link" aria-label="Direct link to disablelogging-boolean" title="Direct link to disablelogging-boolean"></a></h4> <blockquote> <p>Prevents sending any events over the network.</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="disablestorage-boolean"><strong>disableStorage</strong> <code>boolean</code><a href="#disablestorage-boolean" class="hash-link" aria-label="Direct link to disablestorage-boolean" title="Direct link to disablestorage-boolean"></a></h4> <blockquote> <p>Prevents writing anything to storage.</p> <p>Note: caching will not work if storage is disabled</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="networkconfig-object"><strong>networkConfig</strong> <code>object</code><a href="#networkconfig-object" class="hash-link" aria-label="Direct link to networkconfig-object" title="Direct link to networkconfig-object"></a></h4> <blockquote> <p>Allows for fine grained control over which api or urls are hit for specific Statsig network requests</p> </blockquote> <details class="details_lb9f alert alert--info details_b_Ee" data-collapsed="true"><summary>See NetworkConfig object</summary><div><div class="collapsibleContent_i85q"><h4 class="anchor anchorWithStickyNavbar_LWe7" id="api-string"><strong>api</strong> string<a href="#api-string" class="hash-link" aria-label="Direct link to api-string" title="Direct link to api-string"></a></h4> <blockquote> <p>The API to use for all SDK network requests. You should not need to override this unless you have a custom API that implements the Statsig endpoints.</p> <p>Note: You need to include /v1 on the end of your custom API. eg <code>https://my-custom-api.com/v1</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="logeventurl-string"><strong>logEventUrl</strong> string<a href="#logeventurl-string" class="hash-link" aria-label="Direct link to logeventurl-string" title="Direct link to logeventurl-string"></a></h4> <blockquote> <p>The URL used to flush queued events via a POST request. Takes precedence over <code>NetworkConfig.api</code>.</p> <p>default: <code>https://prodregistryv2.org/v1/rgstr</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="networktimeoutms-number"><strong>networkTimeoutMs</strong> number<a href="#networktimeoutms-number" class="hash-link" aria-label="Direct link to networktimeoutms-number" title="Direct link to networktimeoutms-number"></a></h4> <blockquote> <p>The maximum amount of time (in milliseconds) that any network request can take before timing out.</p> <p>default: <code>10,000 ms</code> (10 seconds)</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="preventallnetworktraffic-boolean"><strong>preventAllNetworkTraffic</strong> boolean<a href="#preventallnetworktraffic-boolean" class="hash-link" aria-label="Direct link to preventallnetworktraffic-boolean" title="Direct link to preventallnetworktraffic-boolean"></a></h4> <blockquote> <p>Intended for testing purposes. Prevents any network requests being made.</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="networkoverridefunc-function"><strong>networkOverrideFunc</strong> function<a href="#networkoverridefunc-function" class="hash-link" aria-label="Direct link to networkoverridefunc-function" title="Direct link to networkoverridefunc-function"></a></h4> <blockquote> <p>Overrides the default networking layer used by the Statsig client. By default, the client use <code>fetch</code>, but overriding this you could use <code>axios</code> or raw <code>XMLHttpRequest</code></p> <p>default: <code>fetch</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="initializeurl-string"><strong>initializeUrl</strong> string<a href="#initializeurl-string" class="hash-link" aria-label="Direct link to initializeurl-string" title="Direct link to initializeurl-string"></a></h4> <blockquote> <p>The URL used to fetch the latest evaluations for a given user. Takes precedence over <code>NetworkConfig.api</code>.</p> <p>default: <code>https://featureassets.org/v1/initialize</code></p> </blockquote></div></div></details> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="environment-statsigenvironment"><strong>environment</strong> <code>StatsigEnvironment</code><a href="#environment-statsigenvironment" class="hash-link" aria-label="Direct link to environment-statsigenvironment" title="Direct link to environment-statsigenvironment"></a></h4> <blockquote> <p>An object you can use to set environment variables that apply to all of your users in the same session.</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="loglevel-loglevel"><strong>logLevel</strong> <code>LogLevel</code><a href="#loglevel-loglevel" class="hash-link" aria-label="Direct link to loglevel-loglevel" title="Direct link to loglevel-loglevel"></a></h4> <blockquote> <p>How much information is allowed to be printed to the console.</p> <p>default: <code>LogLevel.Warn</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="loggingbuffermaxsize-number"><strong>loggingBufferMaxSize</strong> <code>number</code><a href="#loggingbuffermaxsize-number" class="hash-link" aria-label="Direct link to loggingbuffermaxsize-number" title="Direct link to loggingbuffermaxsize-number"></a></h4> <blockquote> <p>The maximum number of events to batch before flushing logs to Statsig.</p> <p>default: <code>50</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="loggingintervalms-number"><strong>loggingIntervalMs</strong> <code>number</code><a href="#loggingintervalms-number" class="hash-link" aria-label="Direct link to loggingintervalms-number" title="Direct link to loggingintervalms-number"></a></h4> <blockquote> <p>How often (in milliseconds) to flush logs to Statsig.</p> <p>default: <code>10,000 ms</code> (10 seconds)</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="overrideadapter-overrideadapter"><strong>overrideAdapter</strong> <code>OverrideAdapter</code><a href="#overrideadapter-overrideadapter" class="hash-link" aria-label="Direct link to overrideadapter-overrideadapter" title="Direct link to overrideadapter-overrideadapter"></a></h4> <blockquote> <p>An implementor of OverrideAdapter, used to alter evaluations before its returned to the caller of a check api (checkGate/getExperiment etc).</p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="includecurrentpageurlwithevents-boolean"><strong>includeCurrentPageUrlWithEvents</strong> <code>boolean</code><a href="#includecurrentpageurlwithevents-boolean" class="hash-link" aria-label="Direct link to includecurrentpageurlwithevents-boolean" title="Direct link to includecurrentpageurlwithevents-boolean"></a></h4> <blockquote> <p>(Web only) Should the 'current page' url be included with logged events.</p> <p>default: <code>true</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="disablestatsigencoding-boolean"><strong>disableStatsigEncoding</strong> <code>boolean</code><a href="#disablestatsigencoding-boolean" class="hash-link" aria-label="Direct link to disablestatsigencoding-boolean" title="Direct link to disablestatsigencoding-boolean"></a></h4> <blockquote> <p>Whether or not Statsig should use raw JSON for network requests where possible.</p> <p>default: <code>false</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="disablecompression-boolean"><strong>disableCompression</strong> <code>boolean</code><a href="#disablecompression-boolean" class="hash-link" aria-label="Direct link to disablecompression-boolean" title="Direct link to disablecompression-boolean"></a></h4> <blockquote> <p>Whether or not Statsig should compress JSON bodies for network requests where possible.</p> <p>default: <code>false</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="dataadapter-evaluationsdataadapter"><strong>dataAdapter</strong> <code>EvaluationsDataAdapter</code><a href="#dataadapter-evaluationsdataadapter" class="hash-link" aria-label="Direct link to dataadapter-evaluationsdataadapter" title="Direct link to dataadapter-evaluationsdataadapter"></a></h4> <blockquote> <p>An implementor of EvaluationsDataAdapter, used to customize the initialization/update flow.</p> <p>default: <code>StatsigEvaluationsDataAdapter</code></p> </blockquote> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="customusercachekeyfunc-customcachekeygenerator"><strong>customUserCacheKeyFunc</strong> <code>CustomCacheKeyGenerator</code><a href="#customusercachekeyfunc-customcachekeygenerator" class="hash-link" aria-label="Direct link to customusercachekeyfunc-customcachekeygenerator" title="Direct link to customusercachekeyfunc-customcachekeygenerator"></a></h4> <blockquote> <p>Overrides the default cache key generation. Given the SDKKey and current StatsigUser, return a key to be used for storing values related to that user.</p> <p>default: Cache key is a hash of the <code>sdkKey</code> + <code>user.userID</code> + <code>user.customIDs</code>.</p> </blockquote></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="manual-exposures-">Manual Exposures <a href="#manual-exposures-" class="hash-link" aria-label="Direct link to manual-exposures-" title="Direct link to manual-exposures-"></a></h2> <div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_BuS1"><p>Manually logging exposures can be tricky and may lead to an imbalance in exposure events. For example, only triggering exposures for users in the Test group of an experiment will imbalance the experiment, making it useless.</p></div></div> <p>Added in version <!-- -->, you can now query your gates/experiments without triggering an exposure as well as manually logging your exposures.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Check Gate</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Get Config</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Get Experiment</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Get Layer</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><p>To check a gate without an exposure being logged, call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> result </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">checkGate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_gate_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">disableExposureLog</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><p>Later, if you would like to expose this gate, you can call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">checkGate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_gate_name'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p>To get a dynamic config without an exposure being logged, call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> config </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_dynamic_config_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">disableExposureLog</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><p>Later, if you would like to expose the dynamic config, you can call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getConfig</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_dynamic_config_name'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p>To get an experiment without an exposure being logged, call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> experiment </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getExperiment</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'an_experiment_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">disableExposureLog</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><p>Later, if you would like to expose the experiment, you can call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getExperiment</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'an_experiment_name'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><p>To get a layer parameter without an exposure being logged, call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> layer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getLayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_layer_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">disableExposureLog</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> paramValue </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> layer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_param_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'fallback_value'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><p>Later, if you would like to expose the layer parameter, you can call the following.</p><div><div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> layer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">getLayer</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_layer_name'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> paramValue </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> layer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">get</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_param_name'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'fallback_value'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="shutting-statsig-down">Shutting Statsig Down<a href="#shutting-statsig-down" class="hash-link" aria-label="Direct link to Shutting Statsig Down" title="Direct link to Shutting Statsig Down"></a></h2> <p>In order to save users' data and battery usage, as well as prevent logged events from being dropped, we keep event logs in client cache and flush periodically. Because of this, some events may not have been sent when your app shuts down.</p> <p>To make sure all logged events are properly flushed or saved locally, you should tell Statsig to shutdown when your app is closing:</p> <div><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="stableid">StableID<a href="#stableid" class="hash-link" aria-label="Direct link to StableID" title="Direct link to StableID"></a></h2> <p>StableID is a concept in Statsig that allows us to have a consistent identifier for a single device. This allows Statsig to run <a href="/guides/first-device-level-experiment">experiments on logged out</a> users (users without a UserID) as well as target gates on the device level rather than the user level.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="how-it-works">How it works<a href="#how-it-works" class="hash-link" aria-label="Direct link to How it works" title="Direct link to How it works"></a></h3> <p>When you initialize the SDK for the first time, it checks if a StableID is already present in local storage. If it's missing, the SDK generates a new StableID and saves it in local storage. On subsequent initializations, the SDK retrieves and reuses the previously stored StableID.</p> <p>The StableID is stored in local storage under the key <code>statsig.stable_id.<SDK_KEY_HASH></code>. Each SDK key has its own StableID, meaning that if you're using multiple SDK keys, each one will have a separate StableID.</p> <p>It's important to note that local storage is not shared across different domains or subdomains. This means that if you are working across multiple domains or subdomains, the StableID will be isolated to each domain's local storage.</p> <p>If you need a StableID to persist across domains, you'll need to implement your own mechanism to store and retrieve the StableID, such as using a cookie as <a href="#persisting-stableid-across-subdomain">demonstrated here</a>.</p> <p>The Statsig SDK does not use any cookies itself.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="accessing-the-stableid">Accessing the StableID<a href="#accessing-the-stableid" class="hash-link" aria-label="Direct link to Accessing the StableID" title="Direct link to Accessing the StableID"></a></h3> <p>You can access StableID that the Statsig client is using by calling <code>getContext()</code> and then checking the <code>stableID</code> field.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Javascript</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="overriding-stableid">Overriding StableID<a href="#overriding-stableid" class="hash-link" aria-label="Direct link to Overriding StableID" title="Direct link to Overriding StableID"></a></h3> <p>If your app already has something similar to a StableID and you would prefer to use that instead, you can override the default behavior by simply passing your value in as part of the <code>StatsigUser</code> object.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Javascript</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div></div></div></div> <div class="theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_BuS1"><p>Once overridden, the new StableID will be persisted to local storage so it will be used for future sessions.</p></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="persisting-stableid-across-subdomain">Persisting StableID across subdomain<a href="#persisting-stableid-across-subdomain" class="hash-link" aria-label="Direct link to Persisting StableID across subdomain" title="Direct link to Persisting StableID across subdomain"></a></h3> <p>If you are assigning a user to a test on one subdomain, and tracking behavior for metrics purposes on a different subdomain, you'll need to have this solution in place to ensure Statsig can properly attribute cross-origin behavior to the Test Group assignment that took place on the initial experiment domain.</p> <p>To install, simply paste the first script tag prior to SDK initialization and include code that manually pulls the stableID onto the user object.</p> <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"><!-- cross domain id script --></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token script language-javascript operator" style="color:#393A34">!</span><span class="token script language-javascript keyword" style="color:#00009f">function</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> t</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript string" style="color:#e3116c">"STATSIG_LOCAL_STORAGE_STABLE_ID"</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword" style="color:#00009f">function</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:#d73a49">e</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">if</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">crypto</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">crypto</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">randomUUID</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">return</span><span class="token script language-javascript"> crypto</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">randomUUID</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> </span><span class="token script language-javascript function-variable function" style="color:#d73a49">t</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript arrow operator" style="color:#393A34">=></span><span class="token script language-javascript known-class-name class-name">Math</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">floor</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript number" style="color:#36acaa">65536</span><span class="token script language-javascript operator" style="color:#393A34">*</span><span class="token script language-javascript known-class-name class-name">Math</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">random</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">toString</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript number" style="color:#36acaa">16</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">padStart</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript number" style="color:#36acaa">4</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript string" style="color:#e3116c">"0"</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">return</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">-</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">-4</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">.</span><span class="token script language-javascript template-string interpolation method function property-access" style="color:#d73a49">substring</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation number" style="color:#36acaa">1</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">-</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">-</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">t</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> i</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript keyword null nil" style="color:#00009f">null</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">n</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">getItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">t</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript operator" style="color:#393A34">||</span><span class="token script language-javascript keyword null nil" style="color:#00009f">null</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">if</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript dom variable" style="color:#36acaa">document</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">cookie</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">match</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript regex regex-delimiter" style="color:#36acaa">/</span><span class="token script language-javascript regex regex-source language-regex" style="color:#36acaa">statsiguuid=</span><span class="token script language-javascript regex regex-source language-regex group punctuation" style="color:#393A34">(</span><span class="token script language-javascript regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token script language-javascript regex regex-source language-regex char-class char-set class-name" style="color:#36acaa">\w</span><span class="token script language-javascript regex regex-source language-regex char-class" style="color:#36acaa">-</span><span class="token script language-javascript regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token script language-javascript regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token script language-javascript regex regex-source language-regex group punctuation" style="color:#393A34">)</span><span class="token script language-javascript regex regex-source language-regex" style="color:#36acaa">;</span><span class="token script language-javascript regex regex-source language-regex quantifier number" style="color:#36acaa">?</span><span class="token script language-javascript regex regex-delimiter" style="color:#36acaa">/</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">[</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">i</span><span class="token script language-javascript punctuation" style="color:#393A34">]</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript dom variable" style="color:#36acaa">document</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">cookie</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">match</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript regex regex-delimiter" style="color:#36acaa">/</span><span class="token script language-javascript regex regex-source language-regex" style="color:#36acaa">statsiguuid=</span><span class="token script language-javascript regex regex-source language-regex group punctuation" style="color:#393A34">(</span><span class="token script language-javascript regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">[</span><span class="token script language-javascript regex regex-source language-regex char-class char-set class-name" style="color:#36acaa">\w</span><span class="token script language-javascript regex regex-source language-regex char-class" style="color:#36acaa">-</span><span class="token script language-javascript regex regex-source language-regex char-class char-class-punctuation punctuation" style="color:#393A34">]</span><span class="token script language-javascript regex regex-source language-regex quantifier number" style="color:#36acaa">+</span><span class="token script language-javascript regex regex-source language-regex group punctuation" style="color:#393A34">)</span><span class="token script language-javascript regex regex-source language-regex" style="color:#36acaa">;</span><span class="token script language-javascript regex regex-source language-regex quantifier number" style="color:#36acaa">?</span><span class="token script language-javascript regex regex-delimiter" style="color:#36acaa">/</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">i</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">n</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">i</span><span class="token script language-javascript operator" style="color:#393A34">===</span><span class="token script language-javascript">n</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">else</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:#00009f">if</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">i</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">n</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">i</span><span class="token script language-javascript operator" style="color:#393A34">!==</span><span class="token script language-javascript">n</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">setItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">t</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">i</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">else</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:#00009f">if</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">i</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript operator" style="color:#393A34">!</span><span class="token script language-javascript">n</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">setItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">t</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">i</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword control-flow" style="color:#00009f">else</span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> o</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript function" style="color:#d73a49">e</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">setItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">t</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript">o</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript keyword" style="color:#00009f">function</span><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:#d73a49">t</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript parameter">i</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> n</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript keyword" style="color:#00009f">new</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name">Date</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript">n</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">setMonth</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">n</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">getMonth</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript operator" style="color:#393A34">+</span><span class="token script language-javascript number" style="color:#36acaa">12</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> o</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript dom variable" style="color:#36acaa">window</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">location</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">host</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">split</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript string" style="color:#e3116c">"."</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript">o</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">length</span><span class="token script language-javascript operator" style="color:#393A34">></span><span class="token script language-javascript number" style="color:#36acaa">2</span><span class="token script language-javascript operator" style="color:#393A34">&&</span><span class="token script language-javascript">o</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">shift</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript keyword" style="color:#00009f">let</span><span class="token script language-javascript"> s</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript template-string string" style="color:#e3116c">.</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation">o</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">.</span><span class="token script language-javascript template-string interpolation method function property-access" style="color:#d73a49">join</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation string" style="color:#e3116c">"."</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript dom variable" style="color:#36acaa">document</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">cookie</span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript template-string string" style="color:#e3116c">statsiguuid=</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation">i</span><span class="token script language-javascript template-string interpolation operator" style="color:#393A34">||</span><span class="token script language-javascript template-string interpolation function" style="color:#d73a49">e</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">(</span><span class="token script language-javascript template-string interpolation punctuation" style="color:#393A34">)</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">;Expires=</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation">n</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">;Domain=</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token script language-javascript template-string interpolation">s</span><span class="token script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token script language-javascript template-string string" style="color:#e3116c">;Path=/</span><span class="token script language-javascript template-string template-punctuation string" style="color:#e3116c">`</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript">o</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"><!-- Manually attach stableID to user object --></span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:#00009f">const</span><span class="token script language-javascript"> userObj </span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token script language-javascript keyword control-flow" style="color:#00009f">if</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">getItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript string" style="color:#e3116c">'STATSIG_LOCAL_STORAGE_STABLE_ID'</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"> userObj</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript property-access">customIDs</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript literal-property property" style="color:#36acaa">stableID</span><span class="token script language-javascript operator" style="color:#393A34">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript dom variable" style="color:#36acaa">localStorage</span><span class="token script language-javascript punctuation" style="color:#393A34">.</span><span class="token script language-javascript method function property-access" style="color:#d73a49">getItem</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript string" style="color:#e3116c">'STATSIG_LOCAL_STORAGE_STABLE_ID'</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token script language-javascript keyword" style="color:#00009f">const</span><span class="token script language-javascript"> statsigClient </span><span class="token script language-javascript operator" style="color:#393A34">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:#00009f">new</span><span class="token script language-javascript"> </span><span class="token script language-javascript class-name">Statsig</span><span class="token script language-javascript class-name punctuation" style="color:#393A34">.</span><span class="token script language-javascript class-name">StatsigClient</span><span class="token script language-javascript punctuation" style="color:#393A34">(</span><span class="token script language-javascript string" style="color:#e3116c">'<client-sdk-key>'</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript"> userObj</span><span class="token script language-javascript punctuation" style="color:#393A34">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:#393A34">{</span><span class="token script language-javascript comment" style="color:#999988;font-style:italic">/* OPTIONS */</span><span class="token script language-javascript punctuation" style="color:#393A34">}</span><span class="token script language-javascript punctuation" style="color:#393A34">)</span><span class="token script language-javascript punctuation" style="color:#393A34">;</span><span class="token script language-javascript"></span><br></span><span class="token-line" style="color:#393A34"><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">script</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <center><small>(please use the above code at your discretion and test thoroughly)</small></center> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="keeping-stableid-consistent-across-client--server">Keeping StableID Consistent across Client & Server<a href="#keeping-stableid-consistent-across-client--server" class="hash-link" aria-label="Direct link to Keeping StableID Consistent across Client & Server" title="Direct link to Keeping StableID Consistent across Client & Server"></a></h3> <p>If you have a backend service running a Statsig SDK as well as using the Statsig client in your frontend, you may need to have the same StableID accessible in both environments.</p> <p>It is highly dependent on your setup, but usually you can send the StableID up with any requests from your frontend. If the backend ever receives a request without a StableID, it can generate one and have the client store it (usually as a cookie) for future requests.</p> <p>Because Server SDKs are designed to handle multiple Users, they do not generate their own StableIDs.</p> <p>Here is an example showing how you might use a cookie to share the StableID across client and server and use it bootstrap the client SDK.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="testing">Testing<a href="#testing" class="hash-link" aria-label="Direct link to Testing" title="Direct link to Testing"></a></h2> <p>When writing tests, you can use jest to mock Statsig packages.</p> <p>Consider the following example function. We take in a string as input and based on some Statsig configurations, we edit the string and return the result.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>In our jest test, we can mock the StatsigClient to return the values we want.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="session-replay">Session Replay<a href="#session-replay" class="hash-link" aria-label="Direct link to Session Replay" title="Direct link to Session Replay"></a></h2> <p>By including the <a href="https://www.npmjs.com/package/@statsig/session-replay" target="_blank" rel="noopener noreferrer"><code>@statsig/session-replay</code></a> package in your project, you can automatically capture and log user sessions as videos. This feature is useful for debugging and understanding user behavior. Read more about <a href="/session-replay/overview">Session Replay</a>.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="autocapture">Web Analytics / Auto Capture<a href="#autocapture" class="hash-link" aria-label="Direct link to Web Analytics / Auto Capture" title="Direct link to Web Analytics / Auto Capture"></a></h2> <p>By including the <a href="https://www.npmjs.com/package/@statsig/web-analytics" target="_blank" rel="noopener noreferrer"><code>@statsig/web-analytics</code></a> package in your project, you can automatically capture common web events like clicks and page views. Read more about <a href="/webanalytics/overview">Web Analytics</a>.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="advanced">Advanced<a href="#advanced" class="hash-link" aria-label="Direct link to Advanced" title="Direct link to Advanced"></a></h2> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="async-timeouts">Async timeouts<a href="#async-timeouts" class="hash-link" aria-label="Direct link to Async timeouts" title="Direct link to Async timeouts"></a></h3> <p>For the Statsig client calls that hit the network (initializeAsync and updateUserAsync), it is possible to specify a maximum amount of time (in milliseconds) that the method is allowed to take before the promise is resolved.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>If this timeout is hit, the promise will resolve and cached values will be used (If any are available). The network request will continue and upon a response, will write values to cache so the will be available for subsequent calls.</p> <p>If you'd like to avoid a network request entirely, see <a href="/client/javascript-sdk/init-strategies">initialization strategies</a> for more options.</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="data-adapter">Data Adapter<a href="#data-adapter" class="hash-link" aria-label="Direct link to Data Adapter" title="Direct link to Data Adapter"></a></h3> <p>The <code>EvaluationsDataAdapter</code> type outlines how the <code>StatsigClient</code> should fetch and cache data during initialize and update operations. By default, the <code>StatsigClient</code> uses <code>StatsigEvaluationsDataAdapter</code>, a Statsig provided implementor of the <code>EvaluationsDataAdapter</code> type. <code>StatsigEvaluationsDataAdapter</code> provides ways to fetch data synchronously from Local Storage and asynchronously from Statsig's servers. See <a href="/client/javascript-sdk/using-evaluations-data-adapter">Using EvaluationsDataAdapter</a> to learn more and see example usage.</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="client-event-emitter">Client Event Emitter<a href="#client-event-emitter" class="hash-link" aria-label="Direct link to Client Event Emitter" title="Direct link to Client Event Emitter"></a></h3> <p>It is possible to subscribe to StatsigClientEvents (Not to be confused with <a href="#event-logging">StatsigEvent</a>). These events occur at various stages while using the Statsig client. You can subscribe to specific events by specifying the StatsigClientEvent name, or, all events by using the wildcard token <code>'*'</code>.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>The full list of events and descriptions can be found <a href="https://github.com/statsig-io/js-client-monorepo/blob/main/packages/client-core/src/StatsigClientEventEmitter.ts" target="_blank" rel="noopener noreferrer">here</a>.</p><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="multiple-client-instances">Multiple Client Instances<a href="#multiple-client-instances" class="hash-link" aria-label="Direct link to Multiple Client Instances" title="Direct link to Multiple Client Instances"></a></h3> <p>In some cases, it might be useful to have multiple instances of the Statsig client running.</p> <p>🔥IMPORTANT: You must use <strong>two different SDK keys</strong> for this to work. Various functionality of the Statsig client is keyed on the SDK key being used. Using the same key will lead to collisions.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div><div style="height:4px"></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="partial-user-matching">Partial User Matching<a href="#partial-user-matching" class="hash-link" aria-label="Direct link to Partial User Matching" title="Direct link to Partial User Matching"></a></h3> <p>In some advanced flows, you may have data that you want on your user objects, but do not want to make a network request to re-evaluate the user.</p> <p>To achieve this, you can call <code>updateUserSync</code> with a altered user object and use <code>StatsigOptions.customUserCacheKeyFunc</code> to only match on the original user properties.</p> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> originalUser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> customIDs</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> analyticsID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"some-analytics-id-here"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#d73a49">myCustomCacheKey</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">sdkKey</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token builtin">string</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> user</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token maybe-class-name">StatsigUser</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> analyticsID </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> user</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">customIDs</span><span class="token operator" style="color:#393A34">?.</span><span class="token plain">analyticsID</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">sdkKey:</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">sdkKey</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string string" style="color:#e3116c">:analyticsID:</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">analyticsID</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- Only match on analyticsID</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> myStatsigClient </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">StatsigClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"client-key-here"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> originalUser</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> customUserCacheKeyFunc</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> myCustomCacheKey </span><span class="token comment" style="color:#999988;font-style:italic">// <- Pass in the custom cache key function</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">initializeAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">someAsyncFunctionThatTakesAWhile</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">then</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">newData</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> alteredUser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token spread operator" style="color:#393A34">...</span><span class="token plain">originalUser</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> userID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> newData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">userID</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> email</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> newData</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">email</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">updateUserSync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">alteredUser</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_BuS1"><p>Because we are only using <code>analyticsID</code> in the cache key, we will get cache hits for any user object with this ID. Potentially leading to incorrect evaluations.</p><p>For example, if we had a gate <code>is_internal_user</code> that was evaluating to true for all users with a specific UserID, but we were using a partial cache key, we would get a cache hit for all users with the same <code>analyticsID</code>.</p><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">updateUserAsync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> userID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"internal_user_123"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> customIDs</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> analyticsID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"MY_ANALYTICS_ID"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">checkGate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"is_internal_user"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- returns true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// Somewhere else in the code</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">updateUserSync</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> userID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"prod_user_123"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> customIDs</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> analyticsID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"MY_ANALYTICS_ID"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- Same myAnalyticsID as internal_user_123</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">checkGate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"is_internal_user"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- Still returns true because we got a cache hit from the internal user.</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>If you want to ensure you are always working with the latest values for the current user, you should await the call to <code>updateUserAsync</code>.</p></div></div><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="debugging">Debugging<a href="#debugging" class="hash-link" aria-label="Direct link to Debugging" title="Direct link to Debugging"></a></h2> <p>If you run into issues when implementing Statsig, or are receiving values you do not understand, you can try some of the following to get yourself unstuck.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="enable-debug-logging">Enable Debug Logging<a href="#enable-debug-logging" class="hash-link" aria-label="Direct link to Enable Debug Logging" title="Direct link to Enable Debug Logging"></a></h3> <p>By setting the log level to the most verbose (<code>Debug</code>), the SDK will print more information around the internal operations it is performing.</p> <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> LogLevel</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> StatsigClient</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> StatsigOptions </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@statsig/js-client'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> client </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">new</span><span class="token plain"> </span><span class="token class-name">StatsigClient</span><span class="token punctuation" style="color:#393A34">(</span><span class="token constant" style="color:#36acaa">YOUR_CLIENT_KEY</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> userID</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'a-user'</span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> logLevel</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> LogLevel</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">Debug</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- Print Everything</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="access-__statsig__-global">Access __STATSIG__ Global<a href="#access-__statsig__-global" class="hash-link" aria-label="Direct link to Access __STATSIG__ Global" title="Direct link to Access __STATSIG__ Global"></a></h3> <p>If you see issues appearing, but only for certain environments, it can be useful to open the web browsers debugger and view the Statsig client instance.</p> <ul> <li>Open the web browsers console. In Chrome, this is under <code>View > Developer > JavaScript Console</code>.</li> <li>In the console, enter <code>__STATSIG__</code>. This will print the global Statsig state object, containing all internal state of the SDK.</li> <li>eg <code>__STATSIG__.instance()._logger._queue</code> is the queued events array</li> </ul> <p><img decoding="async" loading="lazy" src="https://github.com/user-attachments/assets/5803cb08-9db4-4056-9b18-26656afe6adb" alt="STATSIG-global" class="img_ev3q"></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="view-network-logs">View Network Logs<a href="#view-network-logs" class="hash-link" aria-label="Direct link to View Network Logs" title="Direct link to View Network Logs"></a></h3> <p>To see all traffic that is being sent via the Statsig SDK, you can filter your browsers network logs to those containing your client SDK key.</p> <p>In Chrome, going to the <code>Network</code> tab of the developer tools and filtering to 'client-' is enough to show all the requests:</p> <p><img decoding="async" loading="lazy" src="https://github.com/user-attachments/assets/5a2b1672-a86f-429d-aa4b-b8c8a578eeae" alt="network-logs" class="img_ev3q"></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="check-evaluation-reason">Check Evaluation Reason<a href="#check-evaluation-reason" class="hash-link" aria-label="Direct link to Check Evaluation Reason" title="Direct link to Check Evaluation Reason"></a></h3> <p>When you get a value that you don't fully understand, you can check the <code>details</code> field to see how that value was received.</p> <p>For example, if you have a feature gate, you can check the <code>.details.reason</code> field:</p> <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> gate </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> myStatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">getFeatureGate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'a_gate'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">gate</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">details</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">reason</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// <- Prints the reason for this evaluation</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>Reasons can be any of the following:</p> <ul> <li><code>Network</code> | <code>NetworkNotModified</code> - The latest value from a network requests</li> <li><code>Cache</code> - Values loaded from local storage</li> <li><code>NoValues</code> - No cache and no successful network request</li> <li><code>Bootstrap</code> - Values found and loaded after a <code>dataAdapter.setData</code> call</li> <li><code>Prefetch</code> - Values found and loaded after a <code>dataAdapter.prefetchData</code> call</li> </ul> <p><code>FeatureGate</code>, <code>DynamicConfig</code>, <code>Experiment</code> and <code>Layer</code> types all have this <code>details</code> object. (Learn more at <a href="/sdk/debugging#reasons">Debugging > Reasons</a>)</p><div style="height:4px"></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="faq">FAQ<a href="#faq" class="hash-link" aria-label="Direct link to FAQ" title="Direct link to FAQ"></a></h2> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="logged-out-experiments">How do I run experiments for logged out users?<a href="#logged-out-experiments" class="hash-link" aria-label="Direct link to How do I run experiments for logged out users?" title="Direct link to How do I run experiments for logged out users?"></a></h4> <p>See the guide on <a href="/guides/first-device-level-experiment">device level experiments</a></p> <div><h4 class="anchor anchorWithStickyNavbar_LWe7" id="does-the-sdk-use-the-browser-local-storage-or-cookies-if-so-for-what-purposes">Does the SDK use the browser local storage or cookies? If so, for what purposes?<a href="#does-the-sdk-use-the-browser-local-storage-or-cookies-if-so-for-what-purposes" class="hash-link" aria-label="Direct link to Does the SDK use the browser local storage or cookies? If so, for what purposes?" title="Direct link to Does the SDK use the browser local storage or cookies? If so, for what purposes?"></a></h4> <p>The SDK does not use any cookies.</p> <p>It does use the local storage for feature targeting and experimentation purposes only. Values for feature gates, dynamic configs and experiments are cached in the local storage, which are used as a backup in the event that your website/app cannot reach the Statsig server to fetch the latest values. If any events were logged but could not be sent to Statsig server due to issues like network failure, we also save them in the local storage to be sent again when network restores.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="can-i-reference-the-sdk-instance-globally">Can I reference the SDK instance globally?<a href="#can-i-reference-the-sdk-instance-globally" class="hash-link" aria-label="Direct link to Can I reference the SDK instance globally?" title="Direct link to Can I reference the SDK instance globally?"></a></h4> <p>Yes, StatsigClient instances can be accessed via the <code>instance()</code> function.</p> <p>For example, if you initialize using a script tag in the head of your webpage, you can use the following to access the StatsigClient and log a custom event.</p> <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access maybe-class-name">Statsig</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">instance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">logEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"test_event"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>or, if you are importing the package:</p> <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> StatsigClient </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@statsig/js-client'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">StatsigClient</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">instance</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">logEvent</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">"test_event"</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>Note: in multi-instance setups, you can specify the SDK key to get a specific instance. eg <code>Statsig.instance('client-YOUR_CLIENT_KEY')</code></p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="how-do-i-handle-gdpr-compliance-and-consent-management">How do I handle GDPR compliance and Consent Management?<a href="#how-do-i-handle-gdpr-compliance-and-consent-management" class="hash-link" aria-label="Direct link to How do I handle GDPR compliance and Consent Management?" title="Direct link to How do I handle GDPR compliance and Consent Management?"></a></h4> <p>In certain use cases, it is necessary to suspend cache and network usage until the user grants specific permissions. You can now start the SDK without storage or logging and enable this only after the user grants permission.</p> <div style="overflow:hidden"><pre tabindex="0" class="codeBlockStandalone_MEMb thin-scrollbar codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><div style="text-align:center;padding:50px 0px 50px 0px">...</div></code></pre></div> <p>The SDK will queue up to 500 events in memory and will retry sending them when logging is enabled.</p></div><div style="height:4px"></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/statsig-io/docs/edit/main/docs/client/javascript-sdk.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2024-10-07T22:18:55.000Z" itemprop="dateModified">Oct 7, 2024</time></b></span></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/client/html-snippet"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">HTML Snippet</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/client/javascript-sdk/react"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">React</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#0" class="table-of-contents__link toc-highlight"><div id="sdk-toc-header" x-last-updated="undefined"><div style="min-height: 65px; cursor: default; padding: 10px 20px; background-color: var(--ifm-navbar-background-color); border-radius: 10px; font-size: 12px; margin-bottom: 15px; color: var(--ifm-color-content);">...</div></div></a></li><li><a href="#working-with-the-sdk" class="table-of-contents__link toc-highlight">Working with the SDK</a><ul><li><a href="#feature-gates" class="table-of-contents__link toc-highlight">Checking a Feature Flag/Gate</a></li><li><a href="#dynamic-configs" class="table-of-contents__link toc-highlight">Reading a Dynamic Config</a></li><li><a href="#layers" class="table-of-contents__link toc-highlight">Getting a Layer/Experiment</a></li><li><a href="#event-logging" class="table-of-contents__link toc-highlight">Logging an Event</a></li><li><a href="#typed-getters" class="table-of-contents__link toc-highlight">Typed Getters</a></li><li><a href="#evaluation-details" class="table-of-contents__link toc-highlight">Evaluation Details</a></li><li><a href="#code-examples" class="table-of-contents__link toc-highlight">Code Examples</a></li></ul></li><li><a href="#parameter-stores" class="table-of-contents__link toc-highlight">Parameter Stores</a><ul><li><a href="#getting-a-parameter-store" class="table-of-contents__link toc-highlight">Getting a Parameter Store</a></li><li><a href="#getting-a-parameter" class="table-of-contents__link toc-highlight">Getting a parameter</a></li></ul></li><li><a href="#statsig-user" class="table-of-contents__link toc-highlight">Statsig User</a><ul><li><a href="#private-attributes" class="table-of-contents__link toc-highlight">Private Attributes</a></li><li><a href="#updating-users" class="table-of-contents__link toc-highlight">Updating Users</a></li><li><a href="#prefetching-users" class="table-of-contents__link toc-highlight">Prefetching Users</a></li></ul></li><li><a href="#statsig-options" class="table-of-contents__link toc-highlight">Statsig Options</a></li><li><a href="#manual-exposures-" class="table-of-contents__link toc-highlight">Manual Exposures <versionbadge></versionbadge></a></li><li><a href="#shutting-statsig-down" class="table-of-contents__link toc-highlight">Shutting Statsig Down</a></li><li><a href="#stableid" class="table-of-contents__link toc-highlight">StableID</a><ul><li><a href="#how-it-works" class="table-of-contents__link toc-highlight">How it works</a></li><li><a href="#accessing-the-stableid" class="table-of-contents__link toc-highlight">Accessing the StableID</a></li><li><a href="#overriding-stableid" class="table-of-contents__link toc-highlight">Overriding StableID</a></li><li><a href="#persisting-stableid-across-subdomain" class="table-of-contents__link toc-highlight">Persisting StableID across subdomain</a></li><li><a href="#keeping-stableid-consistent-across-client--server" class="table-of-contents__link toc-highlight">Keeping StableID Consistent across Client & Server</a></li></ul></li><li><a href="#testing" class="table-of-contents__link toc-highlight">Testing</a></li><li><a href="#session-replay" class="table-of-contents__link toc-highlight">Session Replay</a></li><li><a href="#autocapture" class="table-of-contents__link toc-highlight">Web Analytics / Auto Capture</a></li><li><a href="#advanced" class="table-of-contents__link toc-highlight">Advanced</a><ul><li><a href="#async-timeouts" class="table-of-contents__link toc-highlight">Async timeouts</a></li><li><a href="#data-adapter" class="table-of-contents__link toc-highlight">Data Adapter</a></li><li><a href="#client-event-emitter" class="table-of-contents__link toc-highlight">Client Event Emitter</a></li><li><a href="#multiple-client-instances" class="table-of-contents__link toc-highlight">Multiple Client Instances</a></li><li><a href="#partial-user-matching" class="table-of-contents__link toc-highlight">Partial User Matching</a></li></ul></li><li><a href="#debugging" class="table-of-contents__link toc-highlight">Debugging</a><ul><li><a href="#enable-debug-logging" class="table-of-contents__link toc-highlight">Enable Debug Logging</a></li><li><a href="#access-__statsig__-global" class="table-of-contents__link toc-highlight">Access __STATSIG__ Global</a></li><li><a href="#view-network-logs" class="table-of-contents__link toc-highlight">View Network Logs</a></li><li><a href="#check-evaluation-reason" class="table-of-contents__link toc-highlight">Check Evaluation Reason</a></li></ul></li><li><a href="#faq" class="table-of-contents__link toc-highlight">FAQ</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/faq">FAQ</a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://statsig.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Statsig Home<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://statsig.com/blog" target="_blank" rel="noopener noreferrer" class="footer__link-item">Blog<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://statsig.com/slack" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack Community<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/statsig-io" target="_blank" rel="noopener noreferrer" class="footer__link-item">Code<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright (c) 2025 Statsig, Inc. | Thanks Docusaurus</div></div></div></footer></div> </body> </html>