Cómo agregar Google Optimize A / B Testing a su aplicación React en 10 líneas de código

Hola ! Soy Faraz, ingeniero de software en AdHawk.

No pude encontrar demasiados recursos sobre cómo configurar Google Optimize en una aplicación React, así que decidí compartir cómo resolví este problema.

Google Optimize es una herramienta que le permite realizar pruebas A / B en su sitio web y se puede configurar desde el panel de control de Google Optimize. Esto permite que las personas que no son de ingeniería en su empresa puedan configurar y ejecutar experimentos por su cuenta.

Logotipo de Google Optimize

Creando su aplicación React

En este tutorial, crearemos una nueva aplicación React desde cero usando create-react-app y agregaremos Google Optimize. Suponiendo que tiene instalado npm, abra su terminal e ingrese lo siguiente:

npx create-react-app optimiza
cd optimizar
npm start

npx le permite usar create-react-app sin instalarlo globalmente. Tienes acceso a npx con npm.

Ahora debería tener su aplicación React en funcionamiento en su navegador en localhost: 3000

Debería ver esto en su navegador.

Configuración de su experimento de Google Optimize

Siga adelante y cree una cuenta gratuita de Google Optimize en https://optimize.google.com.

Una vez que haya iniciado sesión, cree un nuevo contenedor y asígnele el nombre que desee. Voy a nombrar el mío OptimizeExample.

En la página siguiente, cree su primera experiencia e ingrese los siguientes valores:

Nombre: mi primer experimento

Página del editor: http://localhost.com:3000

Nota: Optimizar no funciona en localhost. Tendrá que editar su archivo de hosts en su máquina y crear un alias, como hice yo. Estoy usando localhost.com. Más información sobre la edición de su archivo de hosts (Mac, Windows y Linux) aquí: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Luego, crea una variante. Por defecto, la variante se llamará Variante 1.

Nuestras dos variantes.

Necesitará una cuenta de Google Analytics para poder vincular Optimizar a ella. Después de vincular su experimento de Optimize a su cuenta de Google Analytics, aparecerá un modal con la etiqueta

De vuelta en su aplicación React, agregue la etiqueta de script que obtuvo a su archivo index.html entre las etiquetas .

Una vez que haya agregado la etiqueta