Estaba tratando de hacer una variante de componente en Google Optimize en lugar de solo una variante de texto o color, pero no pude encontrar un mejor enfoque para hacer esto. Quiero saber cómo podría conectar (configurar) la optimización con mi código y puedo crear una variante de componente. Por ejemplo: Supongamos que tengo 2 componentes A y B, y si quiero que el 50% de mi tráfico vea el componente A y el resto para ver el componente B. ¿Cómo puedo poner esta representación condicional del componente en las pruebas A/B de Google Optimize? Atrapado en él desde hace mucho tiempo, ayuda amablemente.
Ambos pueden renderizar todos sus componentes en Reactjs, pero diseñarlos con display: none
Luego, en Google optimice las configuraciones A/B, puede elegir qué componente mostrar o no eliminar agregando display: block o volver a display: none otra vez.
Pero de esta manera, puede haber un parpadeo en su página cuando Google Optimize surta efecto, así que tenga cuidado al respecto.
Como dice Ryan Le, puede agregar el componente B en su código con display: none, entonces su código podría ser similar a:
<componentA>my component A</componentA> <componentB style="display:none">my component B</componentB>En su versión original, los usuarios solo verán el componente A, luego, en Optimize, usted crea una variante y, por ejemplo, puede seleccionar el componente A y agregar el cambio de javascript, comenzar a cerrar la etiqueta con un código similar a:
document.querySlector("componentA").style.display = "none"; //or element.style.display = "none"; document.querySelector("componentB").style.display = "block";Otra forma es ocultar el componente A con el editor visual y escribir en Global JS la línea para mostrar el componente B.
document.querySelector("componentB").style.display = "block";Y la forma más complicada sería usar un experimento del lado del servidor, puede obtener más información aquí: https://developers.google.com/optimize/devguides/experiments