@Growthbook team: We have created variations using...
# experimentation
c
@Growthbook team: We have created variations using the visual editor. We are seeing a lot of flickering. How can we avoid this? We have implemented the code through Google Tag Manager https://cadenceotc.com/pages/morning-after-pill-stores-near-me?88d150f-3f2e-4a0e4-87d0=3 https://cadenceotc.com/pages/morning-after-pill-stores-near-me?88d150f-3f2e-4a0e4-87d0=2
r
Hi Harshit, which SDK are you using?
c
Html Script tag
r
The general approach would be to initially hide the elements you're testing using CSS, and then use JavaScript to reveal them once the user has been assigned a variation. You can set the CSS and JS code using the Visual Editor. Here is a general example for the CSS snippet:
Copy code
/­* CSS ­*/
.your-element-class {
  visibility: hidden;
}
And a general example for the JS snippet:
Copy code
// This is a placeholder function. Replace it with the actual function from GrowthBook SDK
function onExperimentLoaded() {
  var element = document.querySelector('.your-element-class');
  element.style.visibility = 'visible';
}

// Call the function when the user is assigned a variation
onExperimentLoaded();
While this method technically prevents flickering, it can cause a delay in loading the page.
It's also important to handle the case where the experiment fails to load, to prevent the page from staying hidden indefinitely.
We also have a page in our documentation called ​_­_​​_Avoiding Flickering_​.
Also consider using our Edge SDKs for flicker-less visual testing!