1. According to your documentation: 'In certain si...
# ask-questionsc
clean-city-48510
11/08/2023, 11:13 PM5. 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>r
rhythmic-agent-34208
11/09/2023, 1:34 AMHi 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
fresh-football-47124
11/09/2023, 9:52 AM
GrowthBook is built to be quick, and you can add attributes after the fact - but flickering may still be a problem
fresh-football-47124
11/09/2023, 9:52 AM
esp if you put GA in the footer
c
clean-city-48510
11/09/2023, 10:55 AMI 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.
clean-city-48510
11/10/2023, 8:53 AMAm 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
fresh-football-47124
11/10/2023, 9:12 PM
you may have to queue up those events yourself
72 Views