Comment ajouter Google Optimiser les tests A / B à votre application React en 10 lignes de code

Salut ! Je suis Faraz, ingénieur logiciel chez AdHawk.

Je n'ai pas pu trouver trop de ressources sur la façon de configurer Google Optimize dans une application React. J'ai donc décidé de partager la manière dont j'ai résolu ce problème.

Google Optimize est un outil qui vous permet d'effectuer des tests A / B sur votre site Web, et il est configurable à partir du tableau de bord Google Optimize. Cela permet aux non-ingénieurs de votre entreprise de configurer et d'exécuter des expériences par eux-mêmes.

Google Optimiser le logo

Création de votre application React

Dans ce didacticiel, nous allons créer une nouvelle application React à partir de zéro en utilisant create-react-app et en y ajoutant Google Optimize. En supposant que vous avez installé npm, ouvrez votre terminal et entrez les informations suivantes:

npx create-react-app optimise
cd optimiser
npm start

npx vous permet d'utiliser create-react-app sans l'installer globalement. Vous avez accès à npx avec npm.

Vous devriez maintenant avoir votre application React opérationnelle dans votre navigateur sur localhost: 3000

Vous devriez voir cela dans votre navigateur.

Configuration de votre expérience d'optimisation de Google

Allez-y et créez un compte Google Optimize gratuit sur https://optimize.google.com.

Une fois connecté, créez un nouveau conteneur et nommez-le comme vous le souhaitez. Je nomme le mien OptimizeExample.

Sur la page suivante, créez votre première expérience et entrez les valeurs suivantes:

Nom: Ma première expérience

Page de l'éditeur: http://localhost.com:3000

Remarque: Optimiser ne fonctionne pas sur l'hôte local. Vous devrez modifier votre fichier d'hôtes sur votre ordinateur et créer un alias, comme je l'ai fait. J'utilise localhost.com. Plus d'informations sur la modification de votre fichier d'hôtes (Mac, Windows et Linux) ici: https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/

Ensuite, créez une variante. Par défaut, la variante sera nommée Variante 1.

Nos deux variantes.

Vous aurez besoin d'un compte Google Analytics pour pouvoir y associer Optimiser. Une fois que vous avez associé votre test Optimize à votre compte Google Analytics, un modal apparaît avec la balise

De retour dans votre application React, ajoutez la balise de script que vous avez obtenue à votre fichier index.html entre les balises .

Après avoir ajouté la balise