https://www.growthbook.io/ logo
Powered by
#ask-questions
Title
# ask-questions
c

clean-city-48510

11/08/2023, 11:13 PM
5. According to your documentation: 'In certain situations, Google Analytics might not load before GrowthBook, not have the DeviceId immediately available, or just be slow to load. In these circumstances, there may be noticeable flickering while everything loads.' We had Optimize implemented directly in the <head> section, and Google Analytics was placed at the end of the </body> (through GTM). Optimize was responsible for generating the UserId and passing it to GA. As I understand, GrowthBook needs to have the UserId to determine which experiment version to serve. Therefore, the best practice is to set our own UserId and send it to GrowthBook and GA4, making it unnecessary to use a custom UserId. This can be achieved as follows:
Copy code
<script>
  (function() {
    // Wait for the SDK to load before starting GrowthBook
    if (window.growthbook) {
      startGrowthbook();
    } else {
      document.querySelector("#growthbook-sdk").addEventListener("load", startGrowthbook);
    }

    function startGrowthbook() {
      if (!window.growthbook) return;
      const getUUID=()=>{let $="gbuuid",e=()=>window.crypto.randomUUID?window.crypto.randomUUID():"10000000-1000-4000-8000-100000000000".replace(/[018]/g,$=>($^crypto.getRandomValues(new Uint8Array(1))[0]&15>>$/4).toString(16)),t=$=>{let e=`; ${document.cookie}`.split(`; ${$}=`);if(2===e.length)return e.pop().split(";").shift()},r=($,e)=>{var t=new Date;t.setTime(t.getTime()+3456e7),document.cookie=$+"="+e+";path=/;expires="+t.toGMTString()};if(t($))return t($);let i=e();return r($,i),i};

      let gbuuid = getUUID();
      let gb = new growthbook.GrowthBook({
        apiHost: "<https://cdn.growthbook.io>",
        clientKey: "sdk-abcd1234",
        // TODO: Add decryptionKey if using encryption
        attributes: {
          id: gbuuid
          //add any other attributes here
        },
        trackingCallback: function(experiment, result) {
          // track with GA4, for example:
          gtag("event", "experiment_viewed", {
            event_category: "experiment",
            experiment_id: experiment.key,
            variation_id: result.variationId,
            gb_user_id: gbuuid,
          });
        }
      });

      // TODO: Instrument DOM with AB test logic
      gb.loadFeatures().then(function() {
        // if you want to do anything after GB loads
      });
    }
  })();
</script>
Is it true?
r

rhythmic-agent-34208

11/09/2023, 1:34 AM
Hi Mario, we'll take a look and get back to you as soon as we can on this.
f

fresh-football-47124

11/09/2023, 9:52 AM
I think thats our example code- and that works
GrowthBook is built to be quick, and you can add attributes after the fact - but flickering may still be a problem
esp if you put GA in the footer
c

clean-city-48510

11/09/2023, 10:55 AM
I don't know why Google Analytics is affecting the page with flickering. 1. I'm initiating GB with attributes like the user's ID and other attributes I want to trigger on. 2. My experiments begin, causing changes to the page. 3. After Google Analytics is loaded, I send an event with the same user ID I sent to GB, along with the ID and variant of the experiment.
Am I correct? In this scenario, everything should work without a flickering effect. GrowthBook sets up the experiment based on attributes and the userId I initialized, and after Google Analytics is loaded, I simply send events for data analysis with the same userId
f

fresh-football-47124

11/10/2023, 9:12 PM
yes, that can work, though I’m not sure how it would work with the delayed trackingCallback
you may have to queue up those events yourself
5 Views
Powered by