2

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.

Muskan Rawal
  • 58
  • 1
  • 9

2 Answers2

0

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.

Ryan Le
  • 7,708
  • 1
  • 13
  • 23
  • Could you please give some basic code reference like how I could render component in A/B config? – Muskan Rawal Sep 15 '21 at 06:22
  • Sorry, I don't have a specific setup demo for that. That A/B I was done in my private company account. But you could have the idea above a follow it. – Ryan Le Sep 15 '21 at 06:44
0

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

SilviaGDLR
  • 26
  • 1
  • Thanks SilviaGDLR, but I have found react-optimise npm package, with which you can create Variants without css display property and can also connect it to google optimise using experiment ID . – Muskan Rawal Oct 01 '21 at 08:57