Skip to content

Guide d'installation

Jump to bottom Edit New page
polmih edited this page Dec 15, 2021 · 9 revisions

Gestionnaire d'invitation, Manuel d'installation

Version non liée à la Boîte à outils de l’expérience Web (BOEW) v1.2.0

Éditeur principal — Service Canada 2021/11/18

English version

Présentation

Le présent guide d’installation décrit le processus étape par étape sur la façon de télécharger, d’installer et de mettre à l’essai la version non liée à la Boîte à outils de l’expérience Web (BOEW) du Gestionnaire d’invitation du gouvernement du Canada.

Le Gestionnaire d’invitation est un outil qui, une fois installé sur votre site Web, vous permettra de créer et de gérer des invitations contextuelles sur votre site Web.

Tout ministère actuellement intégré à Canada.ca et qui utilise Adobe Experience Manager (AEM) comme SGC n’a pas besoin de cette version de l’installation du Gestionnaire d’invitation, car il peut utiliser le Gestionnaire d’invitation actuellement en place sur Canada.ca par l’entremise du Bureau de service de l’Éditeur principal.

Télécharger le Gestionnaire d’invitation du gouvernement du Canada

Pour télécharger l’outil Gestionnaire d’invitation du gouvernement du Canada:

  1. Cliquez sur le lien suivant pour télécharger le fichier invitation-manager.zip et sauvegardezle sur votre lecteur local : https://servicecanada.github.io/invitation-manager/Invitation-manager.zip
  2. Cliquez pour ouvrir le fichier « .zip » ou utilisez n’importe quel outil pour décompresser le fichier et enregistrer son contenu sur votre lecteur local. Dans le fichier ZIP, vous trouverez le dossier « invitation-manager » :

    • Dossier “invitation-manager”:

      • InvitationManager.js
      • Overlay.js
      • Overlay.css
      • config.json
      • im.json

      A screenshot of a browser popup prompting the user to open or save the 'invitation-manager.zip file'

Installer le Gestionnaire d’invitation du gouvernement du Canada

Avant de commencer

Exigences du système: Si votre serveur n’utilise pas la version 2.2.4 ou une version supérieure de la bibliothèque jQuery, vous devrez la mettre à jour.

Remarque sur les environnements de simulation et de production: Nous vous recommandons de suivre ce processus pour la simulation ou le développement de votre site avant de le dupliquer sur votre site de production. Si vous n’avez pas accès à un site Web de simulation ou de développement, vous n’avez qu’à suivre les mêmes étapes pour votre site Web de production, sous réserve que tout changement apporté soit affiché sur votre site.

Télécharger des fichiers sur votre serveur

  1. Copiez et collez le dossier « invitation-manager » (y compris son contenu : InvitationManager.js, Overlay.js, Overlay.css, config.json et im.json) n’importe où dans votre serveur Web. Une fois téléchargés, ces fichiers peuvent demeurer sur votre site Web et n’auront aucune incidence sur le rendement de votre site. L’expérience du visiteur ne sera touchée que lorsqu’une invitation instantanée sera activée.

Configurer vos paramètres

Sauvegarder le fichier im.json

  1. Décidez où vous voulez enregistrer le fichier im.json. Envisager un accès facile pour quiconque créera, modifiera ou supprimera les invitations contextuelles. Si vous souhaitez qu’il reste dans le dossier Gestionnaire d’invitation, aucune mesure n’est requise. Sinon, déplacez le fichier maintenant.
  2. Ouvrir le fichier « config.json » dans le dossier « invitation-manager » et localiser le paramètre dbURL. La valeur doit correspondre au chemin du fichier « im.json » que vous avez déterminé à l’étape 1.
    • Exemple: “/invitation-manager/im.json”.
       
     { 
       "dbURL": "/invitation-manager/im.json",
       "Adobe" : "no"
     }

Activer le suivi des invitations contextuelles

Si Adobe Analytics est déjà mis en œuvre sur votre site, vous pouvez activer le suivi du gestionnaire d’invitations contextuelles dans le fichier « config.json ».

  1. Ouvrez le fichier « config.json » dans le dossier Gestionnaire d’invitation et repérez le paramètre Adobe. La valeur doit correspondre à « oui » ou à « non ».
    1. Saisir « Adobe » : « non », si le suivi d’Adobe Analytics n’a pas été mis en œuvre sur le site de votre ministère: 
           
     { 
       "dbURL": "/invitation-manager/im.json",
       "Adobe" : "no"
     }
    2. Saisir « Adobe » : « oui », si le suivi d’Adobe Analytics a été mis en œuvre sur le site de votre ministère: 
               
         { 
           "dbURL": "/invitation-manager/im.json",
           "Adobe" : "yes"
         }

Pour obtenir des données sur les invitations contextuelles, consultez le Guide de l’utilisateur pour Adobe Analytics - Rapports sur les invitations contextuelles dans GCpedia.

Si Adobe Analytics n’a pas été mis en œuvre sur votre site, vous ne pouvez pas obtenir des données sur vos invitations contextuelles. Si vous souhaitez qu’Adobe Analytics soit mis en œuvre sur votre site et que vous voulez en apprendre davantage à ce sujet, consultez la page Adobe Analytics – Mise en œuvre sur les sites Web autres que Canada.ca dans GCpédia.

Configurer les paramètres généraux

  1. Ouvrez le fichier "im.json". Ce fichier est la source de données de l’outil Gestionnaire d’invitation et vous permettra de créer, de personnaliser, d’activer et de désactiver toutes les invitations contextuelles. Ce fichier devra être mis à jour avec les données de votre ministère et personnalisé pour votre site Web.

    Le fichier « im.json » est composé de deux sections:

    1. Paramètres généraux: cette section permet de personnaliser les paramètres généraux de l’application de l’outil Gestionnaire d’invitation. Les paramètres suivants devront être mis à jour : 
            
      "settings":
      {
        
        "duration-delay": Number_of_days,
        "page-probability": Value1_less_than_one,
        "site-probability": Value2_less_than_one,
        "blacklist": [
          {"url" : "https://blacklist1.com"},
          {"url" : "https://blacklist2.com"}
         ],
        "whitelist": [
          { "url" : "^whitelistDomain.com\/"}
         ]
        
      },

      Exemple:

            
      {
        "settings":
        {
          "duration-delay": 15,
          "page-probability": 0.7,
          "site-probability": 0.3,
          "blacklist": [{"url" : ""}],
          "whitelist": [{ "url" : "^servicecanada.github.io\/"}]
        },
      • La valeur « duration-delay » contient le nombre de jours entre le moment où le visiteur a vu l’invitation contextuelle originale et le moment où il verra la prochaine invitation contextuelle sur votre site. Ce nombre doit être supérieur à zéro et inférieur ou égal à 365
        • Nous recommandons 15 jours.
      • La valeur de « page-probability » contient la probabilité continue qu’un visiteur voit des invitations contextuelles au niveau de la page. Ce nombre doit être supérieur à 0,0 et inférieur ou égal à 1,0. De plus, la somme de la probabilité de la page et du site ne doit pas dépasser 1,0 (pour 100 %).
        • Nous recommandons 0,7 (pour 70 %).
      • La valeur « site-probability » contient la probabilité mobile qu’un visiteur verra des invitations contextuelles au niveau du site. Ce nombre doit être supérieur à 0,0 et inférieur ou égal à 1,0. De plus, la somme de la probabilité de la page et du site ne doit pas dépasser 1,0 (pour 100 %).
        • Nous recommandons 0,3 (pour 30 %).
      • La valeur « blacklist » contient un tableau d’URL qui représentent la liste noire. Il s’agit des adresses URL des pages sur lesquelles vous ne voulez pas que des invitations contextuelles s’affichent.
        • Ajoutez chaque URL au tableau en suivant l’exemple de syntaxe ci-dessous: 
                      
              "blacklist" : [ 
                { "url" : "www.canada.ca/en/blanklistexample1.html"},
                { "url" : "www.canada.ca/en/blanklistexample2.html"},
                { "url" : "www.canada.ca/en/blanklistexample3.html"} 
              ],
      • La valeur « whitelist » contient un tableau d’URL qui représentent la liste blanche. Liste des domaines de serveur ou des URL sur lesquels vous souhaitez que les invitations contextuelles s’affichent.
        • Ajoutez chacun de vos domaines au tableau en suivant l’exemple de syntaxe ci-dessous: 
                      
              "whitelist" : [ 
                { "url" : "^www.canada.ca\/" },
                { "url" : "^www1.canada.ca\/" },
                { "url" : "^servicecanada.gc.ca\/"} 
              ]
    2. Sondages: cette section comprend les paramètres utilisés pour créer ou personnaliser le fichier html, et pour activer ou désactiver les invitations qui apparaîtront sur votre site. 
      "surveys" : [
{
  "id" : "1",
  "title-en" : "English Title",
  "title-fr" : "Titre Francais",
  "body-en" : "<p>English Description.</p>",
  "body-fr" : "<p>Description en Francais.</p>",
  "link-en" : "https://survey1_link_en",
  "link-fr" : "https://survey1_link_fr",
  "start-on" : "YYYY-MM-DDTHH:mm:ss",
  "end-on" : "YYYY-MM-DDTHH:mm:ss",
  "type" : "Entire site",
  "probability" : Value_less_than_one,
  "yes-en" : "<strong>Yes, <span class='wb-inv'>I will take the exit survey </span>after my visit.</strong>",
  "yes-fr" : "<strong>Oui, <span class='wb-inv'>je vais participer au sondage de départ </span>après ma visite.</strong>",
  "no-en" : "No, <span class='wb-inv'>I do not want to take the exit survey, </span>thank you.",
  "no-fr" : "Non, <span class='wb-inv'>je ne veux pas participer au sondage de départ, </span>merci.",
  "close-en" : "Close: Exit survey (escape key)",
  "close-fr" : "Fermer : Sondage de fin de visite (touche d&apos;échappement)",
  "name" : "Survey_Name",
  "survey-urls" : [
    {"site" : "^site_domain.com"}
  ]
},
{
  "id" : "2",
  "title-en" : "English Title",
  "title-fr" : "Titre Francais",
  "body-en" : "<p>English Description. </p>",
  "body-fr" : "<p>Description en Francais. </p>",
  "link-en" : "http://www1.canada.ca/en/contact/sc_account.html?referrer=logout",
  "link-fr" : "http://www1.canada.ca/fr/contact/mon_dossier_sc.html?referrer=logout",
  "start-on" : "YYYY-MM-DDTHH:mm:ss",
  "end-on" : "YYYY-MM-DDTHH:mm:ss",
  "type" : "Page",
  "probability" : Value_less_than_one,
  "yes-en" : "<strong>Yes,  <span class='wb-inv'>I will take the exit survey </span> after my visit.</strong>",
  "yes-fr" : "<strong>Oui, <span class='wb-inv'>je vais participer au sondage de départ </span> après ma visite.</strong>",
  "no-en" : "No, <span class='wb-inv'>I do not want to take the exit survey, </span> thank you.",
  "no-fr" : "Non, <span class='wb-inv'>je ne veux pas participer au sondage de départ, </span> merci.",
  "close-en" : "Close: Exit survey (escape key)",
  "close-fr" : "Fermer : Sondage de fin de visite (touche d&apos;échappement)",
  "name" : "Survey_Name",
  "survey-urls" : [
    { "url" : "https://domain_example/example-eng.html"},
    { "url" : "https://domain_example/example-fra.html"}
  ]
}
]

    Le tableau de sondages est préfabriqué avec les modèles vierges suivants. Le Guide de publication du Gestionnaire d’invitation explique comment personnaliser ces modèles et publier vos propres invitations contextuelles :

    • Invitation au niveau du site 
              {
          "id" : "1",
          "title-en" : "English Title",
          "title-fr" : "Titre Francais",
          "body-en" : "<p>English Description.</p>",
          "body-fr" : "<p>Description en Francais.</p>",
          "link-en" : "https://survey1_link_en",
          "link-fr" : "https://survey1_link_fr",
          "start-on" : "YYYY-MM-DDTHH:mm:ss",
          "end-on" : "YYYY-MM-DDTHH:mm:ss",
          "type" : "Entire site",
          "probability" : Value_less_than_one,
          "yes-en" : "<strong>Yes, <span class='wb-inv'>I will take the exit survey </span>after my visit.</strong>",
          "yes-fr" : "<strong>Oui, <span class='wb-inv'>je vais participer au sondage de départ </span>après ma visite.</strong>",
          "no-en" : "No, <span class='wb-inv'>I do not want to take the exit survey, </span>thank you.",
          "no-fr" : "Non, <span class='wb-inv'>je ne veux pas participer au sondage de départ, </span>merci.",
          "close-en" : "Close: Exit survey (escape key)",
          "close-fr" : "Fermer : Sondage de fin de visite (touche d&apos;échappement)",
          "name" : "Survey_Name",
          "survey-urls" : [
            {"site" : "^site_domain.com"}
          ]
        },
    • Invitation au niveau de la page 
              {
          "id" : "2",
          "title-en" : "English Title",
          "title-fr" : "Titre Francais",
          "body-en" : "<p>English Description.</p>",
          "body-fr" : "<p>Description en Francais.</p>",
          "link-en" : "http://www1.canada.ca/en/contact/sc_account.html?referrer=logout",
          "link-fr" : "http://www1.canada.ca/fr/contact/mon_dossier_sc.html?referrer=logout",
          "start-on" : "YYYY-MM-DDTHH:mm:ss",
          "end-on" : "YYYY-MM-DDTHH:mm:ss",
          "type" : "Page",
          "probability" : Value_less_than_one,
          "yes-en" : "<strong>Yes,  <span class='wb-inv'>I will take the exit survey </span> after my visit.</strong>",
          "yes-fr" : "<strong>Oui, <span class='wb-inv'>je vais participer au sondage de départ </span> après ma visite.</strong>",
          "no-en" : "No, <span class='wb-inv'>I do not want to take the exit survey, </span> thank you.",
          "no-fr" : "Non, <span class='wb-inv'>je ne veux pas participer au sondage de départ, </span> merci.",
          "close-en" : "Close: Exit survey (escape key)",
          "close-fr" : "Fermer : Sondage de fin de visite (touche d&apos;échappement)",
          "name" : "Survey_Name",
          "survey-urls" : [
            { "url" : "https://domain_example/example-eng.html"},
          { "url" : "https://domain_example/example-fra.html"}
          ]
        }

Ajouter le code de Gestionnaire d’invitation à vos pages Web.

Chaque page de votre site Web doit être mise à jour avec le code html suivant afin de faire référence aux fichiers du Gestionnaire d’invitation.

  1. Ajoutez le code suivant

    à l’en-tête de vos pages Web. Ce lien mènera au fichier « Overlay.css ».

    <!--InvitationManager Files -->

    <link rel="stylesheet" href="/invitation-manager/Overlay.css">

    <!-- End InvitationManager Files -->

  2. Ajoutez le code suivant à la fermeture de

    de vos pages Web. Ce lien mènera aux fichiers « Overlay.js » et « InvitationManager.js ».

    <!-- InvitationManager Files -->

    <script src="/invitation-manager/Overlay.js"></script>

    <script src="/invitation-manager/InvitationManager.js"></script>

    <!-- End InvitationManager Files -->

Mise à l’essai du Gestionnaire d’invitation

Pour tester votre installation, vous devrez créer et publier une invitation à l’essai. Consultez le Guide de publication du Gestionnaire d’invitation pour obtenir des instructions détaillées sur la façon de procéder pour vos serveurs.

Avant de tester:

  • Identifier le nom d’hôte ou les pages sur lesquelles vous souhaitez tester une invitation. Cela devra être fait à la fois sur vos serveurs de simulation et de production (nous recommandons qu’il s’agisse d’une page avec peu ou pas de trafic).
  • Vous devrez créer une invitation de niveau « page » et une invitation de niveau « site » pour le test.

Test général

Étapes à suivre pour tester:

  1. Publier l’invitation à passer un test

  2. Générer une chaîne d’interrogation html

    • En fonction des invitations à l’essai que vous avez créé, modifiez la chaîne d’interrogation URL suivante pour refléter le numéro de sondages et le type de portée que vous avez entrés pour votre invitation à l’enquête:

        ?logim=1&im_scope=page or site&im_surveyid=##&im_nocookiecheck=1&im_nodatecheck=1

  3. Page(s) d’examen

    • Ouvrez votre navigateur et naviguez jusqu’à la page que vous avez incluse dans le tableau des « survey-urls » de l’invitation et incluez la chaîne d’interrogation URL à la fin:

      Exemple:

        https://exampledomain.com/en/1.html?logim=1&im_scope=page&im_surveyid=1&im_nocookiecheck=1&im_nodatecheck=1

  4. Revoir l’invitation

    • L’invitation apparaît:

      • Si l’invitation apparaît sur votre page Web, vous avez installé avec succès le Gestionnaire d’invitation et publié une invitation au sondage sur votre serveur.
      • Assurez-vous d’examiner le texte de l’invitation pour vous assurer qu’il est bien affiché sur votre page Web. Image showing an example of a invitation manager popup

    • L’invitation n’apparaît pas:

  5. Effacez les invitations de test que vous avez créées à partir du fichier « im.json ».

Test lié à Adobe Analytics:

Si Adobe Analytics est déjà mis en œuvre sur votre site et que vous avez activé le suivi du gestionnaire d’invitations contextuelles dans le fichier « config.json », le test suivant peut être réalisé en plus du test général mentionné précédemment. Le test lié à Adobe Analytics sert à vérifier si votre site Web envoie des données à Adobe Analytics. Pour obtenir de plus amples renseignements sur ce test, consultez le manuel sur le processus de test – mise en œuvre d’Adobe Analytics.

Étapes à suivre pour tester:

  1. Ouvrez votre navigateur et inscrivez dans la barre de navigation l’URL de la page qui figure au tableau des « survey-URLs » de l’invitation, et ajoutez ce qui suit à la fin de votre URL: * la chaîne d’interrogation URL, qui sert à générer la fenêtre contextuelle sur demande (consulter la section Test général) * la chaîne d’interrogation &logdtm=1, qui permet d’afficher les données d’analyse recueillies (balises) dans la console..

    Exemple:

    https://exampledomain.com/en/1.html?logim=1&im_scope=page or site&im_surveyid=##&im_nocookiecheck=1&im_nodatecheck=1&logdtm=1

  2. Accédez aux outils de développement, et assurezvous que l’onglet de la console est ouvert et que la fonction « persist logs » (ou « preserve logs ») est activée. Naviguez ensuite vers votre site Web en utilisant l’URL précisée à l’étape 1.

  1. Méthodes pour ouvrir les outils de développement:
    1. Cliquez sur la touche F12 de votre clavier pour ouvrir les outils de développement et sélectionnez l’onglet de la console, OU
    2. Cliquez n’importe où sur la page avec le bouton droit de la souris et sélectionnez « Inspecter » dans le menu déroulant. Choisissez ensuite l’onglet de la console, OU
    3. Ouvrez le menu Options dans votre navigateur et trouvez les outils de développement Web.
  2. Méthodes pour activer la fonction « persist logs » et ainsi veiller à la continuité des balises
    1. Ouvrir les paramètres de la console et s’assurer qu’il y a un crochet ✓ à côté de « persist logs ».

      Chrome/Edge

      Image montrant les étapes pour activer «Preserve Log » en Chrome - Outils de développement Web - Console

      Firefox

      Image montrant les étapes pour activer « Persist Logs » en Firefox - Outils de développement Web - Console

      Safari

      Image montrant les étapes pour activer «Preserve Log » en Safari - Outils de développement Web - Console

  1. Les renseignements suivants devraient s’afficher dans l’onglet de la console lorsque l’invitation apparaît. Assurez - vous que les renseignements correspondent à ceux qui figurent au tableau ci-dessous.

    ADOBE ANALYTICS – CLICS

    Événements event58
    v1 Jour local – recueilli à partir des paramètres de votre navigateur/appareil
    v2 Heure locale arrondie au bloc de 30 minutes le plus près – recueillie à partir des paramètres de votre navigateur/appareil
    v4 Type d’appareil (c.àd. mobile ou de bureau)
    v5 Langue de la page – recueillie à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v11 Titre de la page – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v12 URL de la page
    v15 Créateur de la page – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v57 Nom unique d’une invitation contextuelle (c.àd. abréviation du ministère – nom du sondage – date indiquée dans le fichier im.json)
    v65 Nom de l’application pour le site Web – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v75 Version du code d’Adobe Analytics utilisée sur une page pour recueillir des données d’analyse

  2. Cliquez sur le bouton « Oui, après ma visite » de l’invitation. Lorsque vous cliquez, les renseignements suivants devraient s’afficher dans l’onglet de la console. Assurezvous que les renseignements correspondent à ceux qui figurent au tableau cidessous.
    Image showing an example of a invitation manager popup Yes Button

    ADOBE ANALYTICS – CLICS

    Événements event57
    v1 Jour local – recueilli à partir des paramètres de votre navigateur/appareil
    v2 Heure locale arrondie au bloc de 30 minutes le plus près – recueillie à partir des paramètres de votre navigateur/appareil
    v4 Type d’appareil (c.àd. mobile ou de bureau)
    v5 Langue de la page – recueillie à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v11 Titre de la page – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v12 URL de la page
    v15 Créateur de la page – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v57 Nom unique d’une invitation contextuelle (c.àd. abréviation du ministère – nom du sondage – date indiquée dans le fichier im.json)
    v65 Nom de l’application pour le site Web – recueilli à partir des métadonnées de la page. S’il n’y a aucune métadonnée, aucune valeur ne sera indiquée.
    v75 Version du code l’Adobe Analytics utilisée sur une page pour recueillir des données d’analyse

  3. Répétez les étapes de mise à l’essai cidessus pour vos pages en français.

Après l’installation

Publier des invitations contextuelles

Maintenant que le Gestionnaire d’invitation est installé sur votre site Web, vous êtes prêt à commencer à publier des invitations contextuelles. Consultez le Guide de publication du Gestionnaire d’invitation pour obtenir des instructions détaillées.

Obtenir du soutien

Si vous avez de la difficulté avec l’installation et avez besoin d’aide, communiquez avec nous par l’intermédiaire du Bureau de service de l’Éditeur principal et sélectionnez les catégories suivantes lorsque vous soumettez votre demande:

  • Category: Website surveys
  • Sub-category: Invitation Manager: Support
Add a custom footer
Add a custom sidebar
Clone this wiki locally