Mettre en place une visite guidée sur Drupal 8

Des mains tenant une carte

Drupal 8 dispose d'un nouveau module intégré dans son coeur, le module Tour, qui nous permet de mettre en place une aide contextuelle permettant de guider les utilisateurs d'un site Drupal 8 pour leur premiers pas, que ce soit pour la découverte de leur profil utilisateur, des possibilités qui leurs sont offertes, sur la manière de créer un contenu ou encore sur la gestion générale des contenus du site.

Assez peu connu, sans doute parce qu'il ne dispose pas encore d'une interface utilisateur, ce module peut s'avérer très utile pour créer en quelques minutes des aides contextuelles qui feront passer le statut de votre site à une vitesse supérieure, du point de vue des utilisateurs. Moi même, bien que connaissant l'existence du module tour, je n'avais jamais pris vraiment la peine de m'y pencher. Et pourtant quel gain du point du vue expérience utilisateur !

Un module contribué devrait proposer une interface utilisateur pour créer et gérer les différentes étapes d'une aide contextuelle liée à une page, mais en attendant que le module soit complètement opérationnel sur Drupal 8, nous devons créer les différentes éléments de contenu d'une aide contextuelle depuis un fichier de configuration YAML.

La mise en place de visites guidées reste relativement très simple et se réalise en 2 étapes

  • Nous créons notre visite guidée au sein d'un fichier de configuration YAML, lui donnons un identifiant, un label et affectons cette visite guidée à une ou plusieurs routes
  • Puis nous ajoutons autant d'étapes que nécessaires dans ce fichier de configuration, en les affectant à une classe ou un identifiant html présent dans le balisage de la page.

Créons une visite guidée de notre nouveau site

Nous allons créer pour ce faire un nouveau petit module, que nous allons appeler my_tour, et ajoutons le module Tour comme dépendance.

#File my_tour.info.yml

name: 'My Tour'
type: module
description: 'Provide Tours.'
core: 8.x
dependencies:
  - tour
version: 8.x-1.0

Nous allons ajouter notre première visite guidée en créant le fichier tour.tour.front.yml dans le répertoire config/install de notre module. Le nom de ce fichier est important et doit suivre ce modèle : tour.tour.[identifiant].yml. L'identifiant de notre visite guidée devra donc impérativement être front.

La structure de notre module ressemble donc à ceci.

Structure de notre module Drupal 8

Vous noterez la présence du fichier my_tour.features.yml. Vu l'absence d'interface utilisateur, ce fichier va nous permettre de gérer facilement les mises à jour des contenus de la visite guidée. Ce fichier my_tour.features.yml contenant juste la valeur true, nous permet de déclarer notre module comme une feature et nous permettra alors de pouvoir importer à volonté son contenu dans la configuration active de notre site Drupal 8.

En effet notre visite guidée, créée grâce au fichier tour.tour.front.yml, sera installé et chargée au moment de l'installation de notre module. Pour éviter de devoir désinstaller et réinstaller le module pour charger des mises à jour de la visite guidée, nous pouvons donc recourir à Features.

Création de la visite guidée et de ses étapes

Le fichier de configuration d'une visite guidée se compose d'une partie principale déclarant la visite, son identifiant, son label, et les routes sur lesquelles la visite sera active, puis d'une entrée tips contenant toutes les étapes de cette visite. Ci-dessous un exemple d'une visite guidée.

langcode: fr
status: true
id: front
label: 'Bienvenue sur le site'
module: uas_tour
routes:
  - route_name: view.accueil.page_accueil
tips:
  front-main:
    id: front-main
    plugin: text
    label: 'Bienvenue'
    body: 'Cette visite guidée se lance automatiquement au chargement des pages si elle est disponible. Vous pouvez désactiver ce lancement automatique depuis votre <a href="/user">compte utilisateur</a>, et relancer à tout moment une visite en cliquant sur <stong>Tour</strong> situé en haut à droite de la barre d''outils'
    weight: 1
  front-menu-edition:
    id: front-menu-edition
    plugin: text
    label: 'Menu Edition'
    body: 'Ce menu vous donne accès aux tableaux de bord et lien de création des différents contenus'
    weight: 2
    attributes:
      data-id: toolbar-item-uas-core-toolbar-content
  front-menu-users:
    id: front-menu-users
    plugin: text
    label: 'Menu Utilisateurs'
    body: 'Ce menu vous permet de gérer les utilisateurs du site, d''en créer de nouveaux, de leur attribuer des roles, etc.'
    weight: 3
    attributes:
      data-id: toolbar-item-uas-core-toolbar-users
  front-menu-structure:
    id: front-menu-structure
    plugin: text
    label: 'Menu Structure'
    body: 'Ce menu vous permet de gérer les éléments structurants du site, tels que les menus, le placement des blocs, la gestion des taxonomies (mots clés, catégories, rubriques)'
    weight: 4
    attributes:
      data-id: toolbar-item-uas-core-toolbar-structure
  front-general-help:
    id: front-general-help
    plugin: text
    label: Aide contextuelle
    body: 'Chaque page dispose de sa propre aide contextuelle telle que vous êtes en train de la lire. Pour la consulter il vous suffir de cliquer sur le <strong>? Tour</strong>  en haut à droite'
    weight: 5
    location: left
    attributes:
      data-id: toolbar-tab-tour
  front-general-config:
    id: front-general-config
    plugin: text
    label: 'Configuration par défaut'
    body: 'Lors de sa génération le site est livré avec une configuration par défaut, et des contenus pré-renseignés.'
    weight: 6
  front-general-menu:
    id: front-general-menu
    plugin: text
    label: 'Menu de Navigation principal'
    body: 'Le menu de navigation principal peut contenir des liens vers des contenus, des termes de taxonomy, ou encore certaines vues pre-paramétrés pour certaines focntionnalités types telles que les actualités, les événements, les productions. Vous pouvez gérer ce menu depuis le Menu Structutre, ou encore y accéder depuis le lien contextuel qui apparaît au survol du menu.'
    weight: 7
    attributes:
      data-id: navbar
  front-general-slider:
      id: front-general-slider
      plugin: text
      label: 'Diaporama'
      body: 'Vous disposez d''un type de bloc vous permettant de créer des diaporamas et de les placer sur n''importe quelle page. Vous pouvez retouver les blocs diaporama créés, ainsi que tout autre type de bloc, dans la <a href="/admin/structure/block/block-content">librairie des blocs</a>.'
      weight: 8
      attributes:
        data-id: block-slider-hp
  front-general-block:
    id: front-general-block
    plugin: text
    label: 'Bloc de contenu'
    body: 'Outre les contenus que vous pouvez publier sur le site, vous pouvez aussi créer des blocs de contenu simple et les placer sur les pages qui vous conviennent. La différence majeure entre un contenu et un bloc est que les contenus dispose d''une page dédiée, avec une adresse url, tandis que les blocs doivent nécessairement être placés sur des pages existantes. '
    weight: 8
    attributes:
      data-id: block-presentation-site
  front-general-accueil:
    id: front-general-accueil
    plugin: text
    label: 'Les dernières actualités'
    body: 'Ce bloc qui remonte les derniers contenus publiés sur le site ne peut pas être enlever. Si vous ne souhaitez pas ce bloc il vous suffit de ne mettre aucun contenu en avant sur la page d''accueil. Pour ce faire, aller sur votre tableau de bord, et lancer l''aide contextuelle'
    weight: 9
    location: top
    attributes:
      data-class: 'view-accueil'
  front-footer:
    id: front-footer
    plugin: text
    label: Pied de page
    body: 'Le pied de page contient quelques blocs de menu, dont notamment le menu liens utiles et le menu Pied de page. Vous pouvez personnaliser les liens contenus dans ces menus depuis la gestion des menus.'
    weight: 10
    location: top
    attributes:
      data-class: footer

La partie principale de notre visite se compose des éléments suivants. Nous avons l'identifiant id de la visite guidée, qui doit être identique à l'identifiant contenu dans le nom du fichier YAML, son label, tel qu'il apparaîtra sur la page Aide si le module Help est installé, et les routes sur lesquelles la visite sera active. Ici notre visite sera active sur la page d'accueil du site, qui correspond à une vue dont le nom de la route est view.accueil.page_accueil.

langcode: fr
status: true
id: front
label: 'Bienvenue sur le site'
module: uas_tour
routes:
  - route_name: view.accueil.page_accueil

Les différentes étapes de notre visite guidée se composent des éléments suivants :

  • id : l'identifiant de l'étape
  • plugin: le type de plugin (seul le plugin text est disponible)
  • label: le label apparaîtra comme le titre de l'infobulle affichée
  • body: il contient le contenu html de l'infobulle
  • weight: le poids affecté à l'étape. Les étapes sont affichées par ordre croissant du poids
  • location: paramètre optionnel, vous pouvez préciser où l'infobulle sera positionnée par rapport à l'élément html ciblé. Les valeurs possibles sont top, left, right, bottom
  • attributes : paramètre optionnel. Nous pouvons attacher notre infobulle à une classe html présente dans notre page (en spécifiant data-class: NOM-DE-LA-CLASSE), ou encore à un identifiant html présent sur la page (en spécifiant cette fois data-id). Si nous déclarons un attribut data-class ou data-id, et que cet attribut n'est pas présent sur la page alors l'étape n'est pas affichée. SI par contre nous ne spécifions pas du tout ce paramètre pour notre étape alors celle-ci sera affichée centrée sur la page sans être attachée à un quelconque élément html.
front-footer:
  id: front-footer
  plugin: text
  label: Pied de page
  body: 'Le pied de page contient quelques blocs de menu, dont notamment le menu liens utiles et le menu Pied de page. Vous pouvez personnaliser les liens contenus dans ces menus depuis la gestion des menus.'
  weight: 10
  location: top
  attributes:
    data-class: footer

And that's all.

Vous disposez désormais d'une visite guidée sur votre page d'accueil. Sur chaque page disposant d'une visite, le bouton de lancement de la visite apparaîtra dans la barre d'outils de Drupal.

Barre d'outil Drupal 8 avec une visite disponible

Lancement automatique d'une visite guidée

Mais pour de nouveaux utilisateurs, peu familiers du site, il peut s'avérer qu'ils mettent un temps certain avant de s'apercevoir de l'existence d'un telle fonctionnalité. S'ils s'en aperçoivent un jour et cliquent sur le bouton Visite.

Selon les cas de figure, il peut être intéressant de lancer automatiquement une visite, si elle existe, au chargement d'une page. Ainsi l'utilisateur détecte immédiatement cette aide contextuelle, il ne peut pas la rater.

Cela peut être réalisé très simplement. La méthode la plus simple peut consister à déclencher une visite si elle existe en fonction d'un paramétrage présent dans le profil de l'utilisateur. Il suffit par exemple d'ajouter un champ booléen aux entités des utilisateurs, par exemple le champ field_tour_disabled, qui par défaut n'est pas coché. Pour désactiver le lancement automatique, l'utilisateur n'aurait alors qu'à cocher cette option dans son profil.

Compte utilisateur

Et il suffit de charger une librairie au chargement des pages si cette option n'est pas cochée.

/**
 * Implements hook_page_attachments().
 */
function my_tour_page_attachments(array &$attachments) {
  // Automatically launch tour if not disabled by user.
  if (\Drupal::currentUser()->hasPermission('access tour')) {
    /** @var \Drupal\user\Entity\User $user */
    $user = User::load(\Drupal::currentUser()->id());
    $tour_disabled = $user->field_tour_disabled->value;
    if (empty($tour_disabled)) {
      $attachments['#attached']['library'][] = 'my_tour/tour';
    }
  }
}

Et le fichier js qui serait contenu dans notre librairie my_tour/tour (cf. La gestion des libraries avec Drupal 8 pour plus de détails) pourrait ressembler à ceci :

(function ($, Drupal) {
  'use strict';
  $(document).ready(function() {
    var help = $('.toolbar-icon-help');
    if (help.length) {
      help.click();
    }
  });
}(jQuery, Drupal));

Notons que nous pourrions également utiliser les cookies de l'utilisateur pour enregistrer cette désactivation, et qu'il existe très certainement beaucoup d'autres méthodes pour parvenir aux mêmes fins.

Ainsi dès qu'une page dispose d'une aide contextuelle (ou une visite guidée), celle-ci est lancée automatiquement.

Une visite guidée lancée automatiquement

Si cela peut paraître légèrement invasif d'un premier abord, il n'en reste pas moins que c'est une méthode redoutable pour informer l'utilisateur de l'existence de ces visites qui peuvent l'aider à appréhender plus facilement et rapidement une nouvelle interface. Lancement automatique qu'il pourra activer / désactiver à volonté.

La documentation est morte ! Vive Tour !

Si le module Tour peut s'avérer au premier abord encore inachevé, car ne disposant pas d'une interface utilisateur, il n'est reste pas moins redoutable d'efficacité. Il permet de rédiger une documentation contextuelle, intégrée directement sur les interfaces utilisateur, donnant aux utilisateurs un accès immédiat à l'information pertinente, plutôt que de les orienter vers une documentation de 300 pages pleine de captures d'écran.

Rédiger les étapes de ces visites peut se faire simplement, au moyen de n'importe quel éditeur de texte.

L'expérience utilisateur de votre projet Drupal 8 représente-il un enjeu majeur pour sa réussite ? N'hésitez pas à consulter un Freelance spécialiste Drupal qui pourra vous aider dans ce sens.

 

Commentaires

Soumis par DuaelFr (non vérifié) le 19/01/2017 à 10:27 - Permalien

C'est super intéressant tout ça !
Par contre je me demande si tu peux utiliser Tour pour les utilisateurs qui n'ont pas accès à la toolbar et, dans ce cas, comment est-ce que tu peux lancer la visite. Une idée ?

Je n'ai pas testé mais on dirait que c'est l'id #toolbar-tab-tour qui sert à déclencher la visite tout simplement. Bien sûr si les utilisateurs ont les droits d'accès aux visites. Il suffirait d'ajouter cet élément. A tester donc. Je suis preneur d'un retour :-)

Ajouter un commentaire