Événements d'activation

Activer un test avec un événement personnalisé

Les pages dynamiques et les applications Web monopage chargent généralement les données supplémentaires après le chargement initial de la page. Optimize prend en charge ces implémentations via une fonctionnalité appelée Activation Events (Événements d'activation).

Cet article aborde les points suivants :

Fonctionnement

Les événements d'activation permettent aux tests Optimize de fonctionner sur des pages dynamiques, notamment des sous-sections dynamiques d'applications monopages. Optimize est compatible avec l'activation, la réactivation et la désactivation d'une liste de modifications en fonction de l'état récent.

Les événements d'activation d'Optimize vous permettent de cibler des tests pour des événements mis dans la couche de données (dataLayer) de votre site. Un nom d'événement peut être utilisé dans l'intégralité du site conjointement aux règles de ciblage Optimize supplémentaires pour cibler des actions spécifiques.

Activer un test pour un événement personnalisé

Optimize vous permet d'orchestrer en continu de nouveaux tests en tirant parti d'une combinaison d'événements et de règles de ciblage supplémentaires sans avoir à modifier de façon répétée le code côté client de votre site.

Onglet de ciblage de la page sur les détails d

L'onglet de ciblage d'une page des informations détaillées concernant le test offre la possibilité d'activer un test pour un événement personnalisé.

Quand c'est le cas, le test se lance uniquement lorsqu'un événement de la couche de données est déclenché avec le nom d'événement fourni. Vous pouvez déclencher un tel événement si l'état de la page le permet, en exécutant le code javascript suivant de la page :

dataLayer.push({'event': 'optimize.activate'});

Une fois l'événement visé déclenché, toute condition de ciblage supplémentaire est évaluée et le test passe à l'état "Activé" (la liste de modifications est appliquée) uniquement si toutes les conditions sont exactes.

Exemple

S'il convient d'effectuer des rappels suite à plusieurs appels AJAX avant que votre page soit prête pour le test, vous pouvez déclencher un événement après chaque appel AJAX et inclure également une règle de ciblage JavaScript supplémentaire qui vérifie une certaine valeur de variable. Le test se déclenche lorsque la règle de ciblage JavaScript supplémentaire est exacte et qu'un rappel a fait suite à un appel AJAX.

Réactiver une liste de modifications

Il est possible de configurer un test de telle sorte que toutes les conditions de ciblage soient remplies et que l'événement ciblé soit déclenché plusieurs fois.

Si vous déclenchez l'événement cible plusieurs fois et si les autres conditions de ciblage sont toutes réunies, la liste de modifications est réactivée. Le cas échéant, Optimize vérifie la page pour voir si elle a chargé des éléments supplémentaires qui doivent être changés selon la liste de modifications du test. Optimize met à jour en conséquence les éléments récemment chargés. Les éléments existants ne sont pas modifiés.

Exemple

Prenons une page avec un panier dynamique où un utilisateur a la possibilité de cliquer sur des produits afin de les ajouter au panier. Puis envisageons un test qui :

  • insère une image après chaque produit ajouté au panier ; et qui...
  • insère un message d'offre global en haut de l'écran lorsque l'utilisateur a mis au moins un produit dans le panier.

La page déclenche l'événement d'activation, par exemple shoppingCartChanged, chaque fois qu'un utilisateur ajoute ou supprime un élément de son panier. La condition de page et les modifications appliquées peuvent faire partie du test.

Dans l'exemple ci-dessus, la condition de ciblage inclurait : "Y-a-t-il des produits dans le panier ?"

La première fois que l'utilisateur ajoute un produit, la liste de modifications est activée et Optimize :

  • ajoute une image après l'unique produit du panier ;
  • ajoute le message d'offre global en haut de la page.

La deuxième fois que l'utilisateur ajoute un produit dans le panier, la liste de modifications est réactivée et :

  • ajoute une image après le second produit placé dans le panier.

La seconde fois que l'utilisateur ajoute un produit dans le panier, Optimize n'ajoute pas de deuxième message d'offre à la page ni d'autre image après le premier produit. L'unique élément qui a été modifié est le produit récemment ajouté qui n'était pas présent dans le panier lors de la première application de la liste de modifications du test.

Désactiver une liste de modifications

Vous pouvez utiliser les événements d'activation pour rétablir la liste de modifications d'un test. Par exemple, dans le scénario de panier ci-dessus, nous ne souhaitons pas afficher de code d'offre à un utilisateur qui ne répond plus à la condition de ciblage du test. De la même façon, plusieurs applications Web monopages partagent des composants dans plusieurs sections du site, mais il peut s'avérer nécessaire de limiter les modifications du test à une seule de ces dernières.

Si un événement est déclenché après l'activation d'un test donné et si les conditions de ciblage ne sont plus satisfaites, Optimize rétablit les modifications appliquées précédemment concernant le test. De cette façon, la page retrouve l'état qu'elle avait avant l'activation du test et l'application de la liste de modifications.

Dans l'exemple ci-dessus, le retrait du panier du dernier article signifie que le message d'offre global est également supprimé.

Les modifications JavaScript ne peuvent pas être rétablies automatiquement.

Applications monopage et pages virtuelles

Les critères de ciblage peuvent être utilisés afin de définir des pages virtuelles pour des applications Web monopage. La bonne condition à utiliser dépend du cadre sous-jacent du site, mais la plupart des développeurs d'applications qui s'intègrent dans une même page Web pensent que les fragments d'URL sont l'option la plus simple pour leurs sites.

Dans certains cas, les applications Web ne mappent pas une page virtuelle à un fragment d'URL. Par exemple, certains sites utilisent les interstitiels d'inscription à la newsletter qui sont de parfaits candidats pour des tests A/B. Ces interstitiels (et autres éléments similaires) peuvent être testés en ajoutant des conditions de ciblage supplémentaires au test Optimize. Le ciblage de variable JavaScript peut être utilisé en cas de contenu ou d'éléments spécifiques.

La désactivation est très utile pour les applications monopage qui utilisent des règles CSS afin d'apporter des modifications de style aux composants qui sont réutilisés sur plusieurs pages. Les balises <STYLE> d'une page virtuelle sont effacées de la balise <HEAD> lorsque l'application amorce une transition vers une autre page virtuelle.

Déclencher une activation dans une application monopage

La réactivation d'une liste de modifications ne nécessite pas d'aller-retour supplémentaire vers le serveur Optimize. Ainsi, une approche simple et efficace concernant les événements d'activation consiste à déclencher un événement après une modification apportée à la page.

Par exemple, une application AngularJS pourrait intégrer des événements d'activation en sept lignes de code en déclenchant un événement après chaque boucle récapitulative.

L'extrait de code de l'exemple suivant déclenche un événement après chaque boucle récapitulative dans une application AngularJS :

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?