How to make Component Variant in Google Optimize A/B testing in Next js

user_11488254 0
Viewed 961

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.

google-optimize next.js reactjs ab-testing javascript
2 Answers

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.

user_51226150

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

user_108096820
Related