Utiliser notre moteur de ciblage avec une Single Page Application

Afin d'améliorer l'expérience des visiteurs, les sites Internet sont de plus en plus nombreux à privilégier les Single Page Applications.

Ces applications utilisent des technologies ne nécessitant pas un rechargement de la page pour changer leur contenu et rendent donc l'expérience de navigation plus fluide et plus naturelle. 

Seulement, jusqu'ici notre moteur de ciblage s'exécutait au chargement de la page et vérifiait à ce moment là si les conditions étaient réunies pour engager le visiteur. iAdvize n'était donc pas compatible avec ces sites qui ne se chargent qu'une fois car on ne pouvait vérifier que le visiteur correspondait à une règle de ciblage qu'une fois, au chargement de la page.

Nous avons apporté les modifications nécessaires à notre moteur de ciblage pour changer ce fonctionnement et être compatible avec ces applications.

Comment ?

La solution apportée consiste à être capable de rejouer le moteur de ciblage à chaque fois que l'on détecte une navigation dans l'application, même si cette navigation n'a pas entraîné de rechargement de la page.

(Cliquez sur l'image pour la voir en grand)

C'est le cas, par exemple, dans le tunnel d'inscription d'un client. Une fois entré dans le tunnel, l'ensemble du formulaire est chargé mais n'est affiché que progressivement.

On ne pouvait donc pas cibler en fonction d'erreurs au sein du tunnel par exemple :

Comment utiliser le targeting SPA ?

Il existe deux façons de développer une SPA. Ce choix impacte la façon d'utiliser le targeting SPA dans l' application :

1) SPA avec changement d'URL

C'est la bonne pratique et le standard du web.

Dans ce cas là, il n'y a aucune action particulière à réaliser de notre côté. Tous les critères de ciblage sont utilisables comme pour un site traditionnel. Il faut simplement bien penser à construire sa stratégie de ciblage en se basant sur ces changements d'URL. 

2) SPA sans changement d'URL 

Peu importe les actions réalisées et la navigation dans l'application, l'URL dans la barre d'adresse ne change jamais.

Problème : Dans ce cas là, cela nécessite d'indiquer à iAdvize à quel moment on doit considérer que le visiteur a navigué sur le site, à quel moment il change "d'écran" dans l'application.

La solution à mettre en place : L'objet global javascript iAdvize expose une fonction permettant de déclarer explicitement une navigation au sein de la page courante.
Pour cela il suffit d'utiliser la fonction JavaScript:

<script>
window.iAdvizeInterface = window.iAdvizeInterface || [];
iAdvizeInterface.push(function(iAdvize) {
  iAdvize.navigate("MY_PATH");
});
<script>

• En changeant "path" par le nom de l’écran sur lequel le visiteur souhaite naviguer.
• Cette fonction ne prend en paramètre qu'un seul argument de type String. Cet argument est le nom de la page sur laquelle le visiteur va naviguer.
  
  

Note : Pour des raisons de sécurité et de performance il est impossible de déclencher cette fonction plus d'une fois par seconde. 

Vous pouvez tester directement dans la console de votre navigateur que le "path" est correctement pris en compte après avoir effectué la commande iAdvize.navigate('path').

Exemple : déclencher le ciblage quand un visiteur clique sur un bouton

Objectif :

Sur mon site je souhaite indiquer un changement de page à iAdvize lorsque le visiteur clique sur le bouton "Suivant" d'un formulaire, afin de lui proposer du chat à ce moment.

Dans le code du site, au clic sur le bouton "Suivant", il suffit d'ajouter : 

<script>
window.iAdvizeInterface = window.iAdvizeInterface || [];
iAdvizeInterface.push(function(iAdvize) {
  iAdvize.navigate("/etape-2");
});
<script>

La règle de ciblage qui correspond à ce changement de page : 

Sur le site :

Depuis une page utilisant la fonction iAdvize.navigate(), il est possible de vérifier que l'objet javascript iAdvize a bien pris en compte le changement d'url en exécutant iAdvize.vStats.actualScreen dans la console du navigateur.

Cela va simplement retourner l'url prise en compte par notre moteur de ciblage :

A lire également :

• Contraintes techniques liées à votre site / SPA