I was trying to make a component variant in google optimize instead of just text or color variant, But I could not find any better approach to do this. I want to know how I could connect(configure) the optimize with my code and can create a component variant. For eg: Suppose I have 2 components A and B, and if I want 50% of my traffic to view component A and rest to view component B. How Can I put this conditional rendering of component in google Optimize A/B testing? Stuck in it since a long time, kindly help.
You could both render all of your components on Reactjs, but style them with display: none
Then in google optimize A/B configs, you can choose which component to show or not by remove by adding display: block or back to display: none again.
But this way, there might be a flicker in your page when google optimize taking its effect, so please be cautious about that.
As Ryan Le says you can add component B in your code with display:none, then your code could be similar to:
<componentA>my component A</componentA>
<componentB style="display:none">my component B</componentB>
In your original version users will see only componentA, then in Optimize you create a variant and, for example, you can select componentA and add javascript change begin close label with code similar to:
document.querySlector("componentA").style.display = "none"; //or element.style.display = "none";
document.querySelector("componentB").style.display = "block";
Another way is to hide componentA with visual editor and write in Global JS the line to show componentB.
document.querySelector("componentB").style.display = "block";
And the most complicated way would be to use server-side experiment, you can get more info here: https://developers.google.com/optimize/devguides/experiments