Wiki pour l'équipe Futée

🎥 Tutoriels vidéos : Introduction à l’AF, Modifications mineures de l’AF

Contexte : l’adaptation futé permet d’adapter le contenu d’un site web en fonction de critères définis. Ex : la zone géographique, le temps qu’il fait, l’heure qu’il est, la saison… 

Pour faire ça, il faut injecter sur le site web le contenu qu’on veut adapter. Ça peut être un ajout d’une section complète, un remplacement d’image ou de texte… Vu que la base de travail est le site en place, on doit écrire le code HTML, CSS, intégrés dans un script Javascript de manière autonome. 

On va mettre ce code dans le site qui contient l’AF : futemarketing.ca (identifiants dans Bitwarden). 

1- Mise en place d’un nouveau site dans l’AF

La première étape est de connecter le site web du client au site de l’AF. 

  • Une fois connecté, aller dans Futé -> Optimisation -> Sites.
  • Cliquer sur ‘Add site’
  • Name : nom du client ;
  • Google Analytics Object : laisser vide ;
  • Google Analytics Dimension : choisir n’importe quelle dimension ;
  • Google API Key : sert pour la géolocalisation donc si on veut utiliser la fonctionnalité on mettra la clé API Google, sinon laisser vide ;
  • Open Weather Map API : sert pour de l’AF en lien avec la météo donc si on a besoin de cette fonctionnalité, mettre : 3c49d931e2349015861087c25910b643
    Sinon, laisser vide ;
  • Excluded IPs : mettre : 142.127.63.187 qui est notre IP statique des bureaux de L’effet Futé pour nous exclure nous-mêmes des statistiques.
  • cocher Published et is Active.
    Décocher Published sert à mettre le site dans les archives quand on est sûrs que l’AF ne sera plus activé. Décocher is Active permet de désactiver l’AF par exemple temporairement. 
  • Enregistrer.
  • Revenir à la liste des sites et là on va voir un script dans la colonne ‘Integration Code’, qu’il va falloir intégrer sur le site web du client. 
  • On peut soit le mettre dans les codes personnalisés d’Elementor dans le Head, soit dans le header.php, ça dépend du site. 

2- Créer la structure des optimisations

Une fois que le site est connecté à l’AF, il faut créer les optimisations.

  • en allant dans Futé -> Optimisation -> Optimisations

  • Cliquer sur ‘Add Optimisation’
  • Name : nom du client ;
  • Sélectionner le site ;
  • Destination : si on veut juste appliquer l’AF pour les personnes qui arrivent juste sur certaines pages ou exclure certaines pages, on les mettrait là. Mais si on ne veut pas ajouter de condition de destination, il faut la retirer parce que c’est un champ obligatoire. Donc aller dans le menu 3 points à droite sur la ligne : ‘retirer’ ;
  • Personas : se sont les groupes de personnes définis selon différents critères qui sont les conditions figurant dans un menu déroulant (ex : météo, date, jour de la semaine, plateforme mobile/desktop, heures…).
    À noter, certaines conditions peuvent être mises soit ici, soit directement dans le code en Javascript.  
  • Dans les personas, il y a les ensembles. Ils servent pour faire des tests AB : ex : groupe A voit telle chose, groupe B voit telle autre. 
    Le mode ‘Géolocalisation’ va permettre d’appliquer l’adaptation en fonction de la latitude et longitude mise dans les différents Groupes (Adaptation Groups) qui sont dans chaque ensemble.
  • Donc sous Adaptation Group, c’est là qu’on va trouver les Adaptations en tant que telles.

 

L’image ci-dessous montre la structure de l’AF :

  • Personnas (on peut ajouter des conditions)
    • Ensembles (on peut ajouter des conditions)
      • Groupes (on peut ajouter des conditions)
        • Adaptations (ici on met le code, on peut ajouter des conditions)

Dans la majorité des cas, la structure sera faite par Amélia ou alors elle fournira dans la tâche des instructions détaillées sur ce qu'il faut mettre à chacune des étapes. 

3- Créer le code de l’optimisation

Une fois que la structure des optimisations est créée, il faut intégrer le code en lui-même.

On voit qu’il y a 3 boutons pour mettre le HTML, le CSS et le JS, mais en pratique, on intègre tout dans le JS Adaptation, parce que c’est plus simple et plus léger. 

 

Les images qu’on va ajouter vont devoir être déposées sur le serveur dans le dossier public_html/images/ dans le dossier du client concerné.

Exemple:
👉 Dans cet exemple, le contenu change selon la langue de la page. Le code détecte la langue et affiche automatiquement le bon contenu (La séparation des langues est faite directement dans le code JavaScript, donc pas besoin de mettre des conditions d’affichage dans l’admin de notre AF)

🧩 Étape 1 : Prépare ton HTML, CSS et JS
Commence par créer ton HTML, ton CSS et ton JavaScript dans des sections séparées.

💬 Astuce : on utilise des apostrophes (‘) autour du code injecté pour éviter les conflits avec les guillemets du HTML.

🔧 Étape 2 : Minifier le HTML
Utilise un outil comme ce minifier HTML pour mettre ton HTML sur une seule ligne. https://kangax.github.io/html-minifier/
Colle ensuite ce HTML minifié dans ton script, à la place des textes HTML minifié pour la version FR et HTML minifié pour la version EN.

🎨 Étape 3 : Minifier le CSS
Faire la même chose pour le CSS. Utilise ce minifier CSS https://www.toptal.com/developers/cssminifier 

Voici un exemple de fonction qui injecte le HTML et le CSS dans ta page grâce au javascript:

				
					js
function insert_html_et_style() {

    var url = window.location.href;
    
    if(!url.includes("/en/")) { // Si ce n’est PAS la version anglaise
        jQuery("body").append('HTML minifié pour la version FR');
    } else {
        jQuery("body").append('HTML minifié pour la version EN');
    }
    
    jQuery("body").append('<style>CSS minifié ici</style>');

}

🚀 Étape 4 : Lancer le script
Tu dois maintenant appeler la fonction quand la page est prête. Teste tout avec l’outil de code personnalisé d’Elementor pour vérifier que ça fonctionne.(Elementor->code personnalisé)
– Sur un staging de préférence

				
					✅ Exemple final simple

js
jQuery(document).ready(function() {
    insert_html_et_style();
    // Tu peux ajouter d’autres fonctions ici si besoin
});

function insert_html_et_style() {
    var url = window.location.href;
    
    if(!url.includes("/en/")) {
        jQuery("body").append('<div class="disponible">DISPONIBLES 24/7</div>');
    } else {
        jQuery("body").append('<div class="disponible">AVAILABLE 24/7</div>');
    }

    jQuery("body").append('<style>.disponible{color:red;}</style>');
}