Cette page a été traduite par l'API Cloud Translation.

Engagez les utilisateurs avec votre action pour l'Assistant Google

1. Présentation

La plate-forme pour les développeurs Actions on Google vous permet de créer des logiciels afin d'étendre les fonctionnalités de l'Assistant Google, l'assistant personnel virtuel de Google, sur plus d'un milliard d'appareils (enceintes intelligentes, téléphones, voitures, téléviseurs, casques audio, etc.). Les utilisateurs engagent la conversation avec l'Assistant pour accomplir des tâches, comme faire des courses ou réserver une course. Pour obtenir la liste complète des possibilités qui s'offrent à vous, consultez le répertoire Actions. En tant que développeur, vous pouvez utiliser Actions on Google pour créer et gérer facilement des expériences de conversation agréables et efficaces entre les utilisateurs et votre service tiers.

Cet atelier de programmation avancé s'adresse aux lecteurs qui ont déjà créé des actions pour l'Assistant Google. Si vous n'avez aucune expérience du développement avec Actions on Google, nous vous recommandons vivement de vous familiariser avec la plate-forme en suivant nos ateliers de programmation d'introduction ( niveau 1, niveau 2 et niveau 3). Ces modules avancés vous guideront à travers une série de fonctionnalités qui peuvent vous aider à étendre les fonctionnalités de votre action et à élargir votre audience.

Une façon importante de mesurer le succès d'une action est l'engagement utilisateur ou l'efficacité de l'action à faire revenir les utilisateurs après leur première interaction. Pour vous faciliter la tâche, vous pouvez implémenter plusieurs fonctionnalités dans votre action qui permettent aux utilisateurs de revenir dans votre conversation.

Cet atelier de programmation porte sur les fonctionnalités d'engagement utilisateur et les bonnes pratiques à suivre pour Actions on Google.

Ce que vous allez faire

Vous allez améliorer une fonctionnalité déjà créée en l'activant pour:

Envoyez aux utilisateurs une notification quotidienne sur laquelle ils peuvent appuyer pour parler à votre action
Envoyez aux utilisateurs des notifications push qui renvoient à votre action
Créez un lien qui redirige les utilisateurs vers votre action depuis un navigateur Web mobile

Points abordés

Qu'est-ce que l'engagement utilisateur et pourquoi c'est important pour le succès d'une action
Modifier une action pour accroître l'engagement utilisateur
Quelles fonctionnalités d'engagement utilisateur utiliser dans différents types d'actions
Utiliser l'API Actions pour envoyer des notifications via l'Assistant

Prérequis

Vous devez disposer des outils suivants:

Un IDE/éditeur de texte de votre choix, tel que WebStorm, Atom ou Sublime
Un terminal permettant d'exécuter des commandes shell et avec Node.js, npm et git installés
Un navigateur Web tel que Google Chrome
Un environnement de développement local avec l'interface de ligne de commande Firebase
Un appareil mobile (Android ou iOS) avec l'Assistant (vous devez être connecté à l'Assistant avec le compte Google que vous utiliserez pour créer ce projet)

Bien qu'il ne soit pas obligatoire, une bonne connaissance de JavaScript (ES6) est également vivement conseillée pour comprendre le code du webhook.

2. Configurer votre projet

Cette section vous explique comment ajouter des fonctionnalités d'engagement utilisateur à une action complète créée précédemment.

Comprendre l'exemple

L'exemple de cet atelier de programmation est un modèle d'action simple destiné à une salle de sport fictive nommée "Action Gym". L'action fournit des informations sur la salle de sport, y compris une liste de cours qui changent chaque jour. Une action informative de ce type est adaptée à toutes les fonctionnalités d'engagement utilisateur, car la liste alternée des classes fournit différentes informations utiles chaque jour.

Le schéma suivant illustre le flux de conversation de l'exemple Action Gym:

Vous allez apporter de petites modifications à la boîte de dialogue pour qu'elle corresponde mieux aux fonctionnalités d'engagement que vous ajoutez. Cependant, la conception générale de la conversation ne changera pas grand-chose.

Télécharger vos fichiers de base

Exécutez la commande suivante pour cloner le dépôt GitHub pour l'atelier de programmation:

git clone https://github.com/actions-on-google/user-engagement-codelab-nodejs

Configurer votre projet et votre agent

Pour configurer votre projet Actions et l'agent Dialogflow, procédez comme suit:

Ouvrez la Console Actions.
Cliquez sur Nouveau projet.
Saisissez un nom de projet, tel que engagement-codelab.
Cliquez sur Créer un projet.
Au lieu de choisir une catégorie, faites défiler la page jusqu'à la section Autres options et cliquez sur la fiche Conversation.
Cliquez sur Build your Action (Créer votre action) pour développer les options, puis sélectionnez Add Action(s) (Ajouter une ou plusieurs actions).
Cliquez sur Add Your First Action (Ajouter votre première action).
Dans la boîte de dialogue Create Action (Créer une action), sélectionnez Custom Intent (Intent personnalisé), puis cliquez sur Build (Compiler) pour lancer la console Dialogflow.
Sur la page de création d'agent de la console Dialogflow, cliquez sur Créer.
Cliquez sur l'icône en forme de roue dentée dans le panneau de navigation de gauche.
Cliquez sur Exporter et importer, puis sur Restaurer depuis un fichier ZIP.
Importez le fichier agent.zip à partir du répertoire /user-engagement-codelab-nodejs/start/ que vous avez téléchargé précédemment.
Saisissez RESTORE, puis cliquez sur Restaurer.
Cliquez sur OK.

Déployer le fulfillment

Maintenant que votre projet Actions et votre agent Dialogflow sont prêts, déployez votre fichier index.js local à l'aide de la CLI Firebase Functions.

Dans le répertoire /user-engagement-codelab-nodejs/start/functions/ de votre clone de fichiers de base, exécutez les commandes suivantes:

firebase use <PROJECT_ID>

npm install

firebase deploy

Au bout de quelques minutes, le message Deploy complete! (Déploiement terminé) doit s'afficher, ce qui indique que votre webhook a bien été déployé sur Firebase.

Récupérer l'URL de déploiement

Vous devez fournir à Dialogflow l'URL de la fonction Cloud. Pour récupérer cette URL, procédez comme suit:

Ouvrez la Console Firebase.
Dans la liste d'options, sélectionnez votre projet Actions.
Accédez à Développer > Fonctions dans la barre de navigation de gauche. Si vous êtes invité à sélectionner les paramètres de partage des données, vous pouvez ignorer cette option en cliquant sur Le faire plus tard.
Dans l'onglet Tableau de bord, vous devriez voir une entrée pour "fulfillment". en indiquant une URL sous Déclencheur. Enregistrez cette URL. vous devrez les copier dans Dialogflow dans la section suivante.

Définir l'URL de webhook dans Dialogflow

Vous devez maintenant mettre à jour votre agent Dialogflow afin qu'il utilise votre webhook pour le fulfillment. Pour ce faire, procédez comme suit :

Ouvrez la console Dialogflow (vous pouvez fermer la console Firebase si vous le souhaitez).
Cliquez sur Fulfillment dans le panneau de navigation de gauche.
Activez le webhook.
Si elle n'apparaît pas déjà, collez l'URL que vous avez copiée depuis le tableau de bord Firebase.
Cliquez sur Enregistrer.

Vérifier que votre projet est correctement configuré

Les utilisateurs doivent pouvoir appeler votre action pour obtenir des informations sur Action Gym, y compris une réponse textuelle codée en dur avec les horaires d'ouverture et une réponse textuelle indiquant le planning du cours pour chaque jour de la semaine.

Pour tester votre action dans le simulateur Actions:

Dans le volet de navigation de gauche de la console Dialogflow, cliquez sur Integrations (Intégrations) > Assistant Google :
Assurez-vous que l'option Auto-preview changes (Aperçu automatique des modifications) est activée, puis cliquez sur Test (Tester) pour mettre à jour votre projet Actions.
Le simulateur Actions charge votre projet Actions. Pour tester votre action, saisissez Talk to my test app dans le champ Input (Entrée), puis appuyez sur Entrée.
Vous devriez voir une réponse de bienvenue à Action Gym. Essayez de suivre les invites pour poursuivre la conversation tout en vous assurant que votre fulfillment dispose d'une réponse pour chaque entrée.

3. Ajouter des abonnements aux mises à jour quotidiennes

Pour susciter l'intérêt des utilisateurs, la méthode la plus courante consiste à leur proposer des informations au moment le plus utile. Pour ce faire, les utilisateurs ont la possibilité de s'abonner aux informations quotidiennes relatives à un intent, ce qui leur envoie une notification de l'Assistant qui les redirige directement vers le traitement de cet intent.

Au cours de cette étape, vous allez découvrir les abonnements aux mises à jour quotidiennes et les ajouter à l'intent Class List (Liste de classes) de votre action. Une fois que vous avez suivi ces instructions, la conversation de votre action se présente comme suit:

Comment cela engagera-t-il les utilisateurs ?

Les utilisateurs de smartphones connaissent probablement les notifications push, qui fournissent des informations et des mises à jour spécifiques aux applications. Les abonnements aux mises à jour quotidiennes sont un moyen simple d'accéder aux utilisateurs sur des appareils mobiles en dehors de l'Assistant, à condition que l'intention pour laquelle vous envoyez des mises à jour continue d'apporter une valeur ajoutée à l'utilisateur au quotidien.

Les mises à jour quotidiennes peuvent être un outil d'engagement utile, mais elles ne doivent pas nécessairement être intégrées à chaque action. Tenez compte des conseils suivants lorsque vous décidez d'ajouter des abonnements aux mises à jour quotidiennes à une action:

Assurez-vous que les mises à jour quotidiennes affichent des informations utiles et différentes chaque jour pour l'utilisateur. Si l'utilisateur affiche toujours la même invite lorsqu'il appuie sur une information quotidienne, il se désabonne probablement au bout de quelques jours.
Assurez-vous que votre boîte de dialogue est pertinente pour l'utilisateur s'il accède directement à l'intent de votre mise à jour quotidienne. Votre utilisateur ne commencera pas nécessairement au début de la conversation, il ne devrait donc pas avoir beaucoup de contexte.
Montrez à l'utilisateur les avantages de votre action avant de l'inviter à s'abonner aux mises à jour quotidiennes. L'utilisateur doit se dire : "Je veux ce contenu tous les jours". lorsqu'ils ont la possibilité de s'abonner.
Ne submergez pas l'utilisateur de nombreuses suggestions d'abonnement. Proposez un abonnement à une mise à jour quotidienne juste après avoir montré à l’utilisateur ce à quoi il s’abonnerait, et évitez de le perturber ailleurs.
Faites en sorte que la conversation soit courte après le déclenchement de l'intent de mise à jour. La plupart des mises à jour quotidiennes doivent se limiter à une seule réponse avant de se fermer sans que l'utilisateur ait à intervenir.

Activez les notifications quotidiennes

Les abonnements aux mises à jour quotidiennes peuvent être ajoutés à l'intent d'accueil, qui place l'utilisateur au début de votre conversation, ou à un intent plus spécifique afin de le rediriger vers un endroit profond de la conversation. Pour cet atelier de programmation, l'intent Class List (Liste des classes) est le plus logique, car la boîte de dialogue change tous les jours, et il peut être utile de rappeler aux utilisateurs les cours disponibles.

Pour activer les mises à jour quotidiennes de l'intent Class List (Liste des classes), procédez comme suit:

Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sélectionnez Actions dans la barre de navigation de gauche.
Cliquez sur Liste des cours sous la liste Actions.
Dans la section Engagement utilisateur, activez l'option Voulez-vous proposer des mises à jour quotidiennes aux utilisateurs.
Définissez un titre de contenu descriptif, décrivant la mise à jour quotidienne. Le contexte sera "À quelle heure voulez-vous que je vous envoie votre <titre du contenu> quotidien". Veillez donc à ce que votre titre soit descriptif et à l'oral. Pour cet exemple, définissez le titre du contenu sur list of upcoming Action Gym classes.
Cliquez sur Enregistrer en haut de la page.

Configurer Dialogflow

Suivez ces étapes dans la console Dialogflow pour créer des intents pour le flux d'abonnement de mise à jour quotidienne:

Configurez un nouvel intent pour gérer l'utilisateur qui demande à s'abonner aux informations quotidiennes. Dans la console Dialogflow, cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Setup Updates.
Dans la section Training phrases (Phrases d'entraînement), ajoutez les expressions utilisateur suivantes:

Send daily reminders
Reminder
Remind me
Updates
Upcoming classes

Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Gérer la décision de l'utilisateur

Configurez un nouvel intent pour gérer la réponse de l'utilisateur à l'invite d'abonnement aux mises à jour quotidiennes. Cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Confirm Updates.
Dans la section Événements, ajoutez actions_intent_REGISTER_UPDATE. Cet événement Dialogflow est déclenché lorsque l'utilisateur termine le flux d'abonnement aux mises à jour quotidiennes, qu'il ait fini par s'abonner ou non.
Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Implémenter le fulfillment

Pour implémenter le fulfillment dans votre webhook, procédez comme suit:

Charger les dépendances

Dans le fichier index.js, mettez à jour la fonction require() pour ajouter le package RegisterUpdate à partir du package actions-on-google, de sorte que vos importations se présentent comme suit:

index.js

const {
  dialogflow,
  Suggestions,
  RegisterUpdate,
} = require('actions-on-google');

Mettre à jour les chips de suggestion

Dans le fichier index.js, ajoutez une entrée DAILY à la liste des titres de chips de suggestion afin que votre définition Suggestion se présente comme suit:

index.js

// Suggestion chip titles
const Suggestion = {
  HOURS: 'Ask about hours',
  CLASSES: 'Learn about classes',
  DAILY: 'Send daily reminders',
};

Ajouter un fulfillment pour les nouveaux intents

Lorsque l'utilisateur dit qu'il souhaite s'abonner, lancez le flux d'abonnement aux mises à jour quotidiennes en appelant l'assistant RegisterUpdate avec l'intent cible de la mise à jour (Liste des classes) et le type (DAILY). Une fois le parcours d'abonnement terminé, l'Assistant déclenche l'événement actions_intent_REGISTER_UPDATE avec un argument status, qui indique si l'abonnement a réussi ou non. Proposez à l'utilisateur des invites de suivi qui varient en fonction de l'état de l'abonnement.

Dans le fichier index.js, ajoutez le code suivant:

index.js

// Start opt-in flow for daily updates
app.intent('Setup Updates', (conv) => {
  conv.ask(new RegisterUpdate({
    intent: 'Class List',
    frequency: 'DAILY',
  }));
});

// Confirm outcome of opt-in for daily updates
app.intent('Confirm Updates', (conv, params, registered) => {
  if (registered && registered.status === 'OK') {
     conv.ask(`Gotcha, I'll send you an update everyday with the ` +
     'list of classes. Can I help you with anything else?');
  } else {
    conv.ask(` I won't send you daily reminders. Can I help you with anything else?`);
  }
  if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.HOURS, Suggestion.CLASSES]));
  }
});

Proposer des invites alternatives à l'utilisateur

Votre réponse Class List (Liste de classes) proposera l'abonnement à la mise à jour quotidienne à la fin, mais cela pose problème. Étant donné que cette même réponse est déclenchée lorsque l'utilisateur appuie sur la notification de mise à jour quotidienne, il est toujours invité à s'abonner aux mises à jour quotidiennes, même s'il s'agit simplement d'une notification. Comment pouvez-vous empêcher l'utilisateur de penser qu'il doit se réabonner ?

Heureusement, les arguments de votre objet conv incluent des informations sur le point où l'utilisateur a démarré la conversation. Vous pouvez vérifier les arguments conv pour voir s'ils contiennent une section UPDATES, qui indique que l'utilisateur a lancé la conversation à partir d'une notification de mise à jour quotidienne et modifier la réponse en conséquence. Vous pouvez également utiliser cette branche de conversation pour fermer la boîte de dialogue immédiatement après avoir fourni la liste des classes, conformément à notre bonne pratique qui consiste à raccourcir la mise à jour quotidienne.

Dans le fichier index.js, remplacez le code suivant:

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  const classesMessage =
  `On ${day} we offer the following classes: ${classes}. ` +
  `Can I help you with anything else?`;
  conv.ask(classesMessage);
  if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.HOURS]));
  }
});

par ceci:

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like me to send you daily reminders of upcoming classes, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.HOURS]));
    };
  };
});

Tester vos mises à jour quotidiennes

Dans le terminal, exécutez la commande suivante pour déployer votre code de webhook mis à jour sur Firebase:

firebase deploy

Pour tester votre nouvelle requête personnalisée dans le simulateur d'actions, procédez comme suit:

Dans la console Actions, accédez à Test.
Saisissez Talk to my test app dans le champ Input (Entrée), puis appuyez sur Entrée.
Saisissez Learn about classes et appuyez sur Entrée. La réponse de votre action devrait maintenant proposer d'envoyer des rappels quotidiens.
Saisissez Send daily reminders et appuyez sur Entrée.
Saisissez l'heure à laquelle vous souhaitez que la modification soit effectuée, puis appuyez sur Entrée. À des fins de test, essayez de répondre trois à cinq minutes plus tard que l'heure actuelle.

Sur votre appareil mobile, vous devriez recevoir une notification de l'Assistant aux alentours de l'heure que vous avez indiquée pour les mises à jour. Notez que l'affichage de cette notification peut prendre quelques minutes. Appuyez sur la notification pour obtenir un lien profond directement vers l'intent Class List (Liste des cours) dans l'Assistant, ce qui vous donnera une liste des prochains cours:

4. Ajouter des notifications push

Pour engager les utilisateurs en dehors de votre action, vous pouvez également appeler l'API Actions pour leur envoyer des notifications push. Contrairement aux informations quotidiennes, l'Assistant ne planifie pas automatiquement ces notifications pour que vous puissiez les envoyer quand vous le souhaitez.

Au cours de cette étape, vous allez apprendre à implémenter des notifications push dans votre action en ajoutant un intent Classe annulée et en envoyant des notifications aux utilisateurs pour les avertir d'une annulation de cours. Vous allez également configurer les trois composants suivants, qui sont nécessaires pour envoyer des notifications:

Compte d'API Actions : vous envoyez des notifications à l'utilisateur en envoyant une requête POST à une API. Vous devez donc configurer un compte de service et des identifiants pour interagir avec cette API.
Outil d'aide aux autorisations : vous avez besoin de l'autorisation de l'utilisateur pour accéder à l'ID utilisateur permettant de lui envoyer des notifications push. Dans cet exemple, vous utiliserez une fonction de bibliothèque cliente pour appeler l'assistant d'autorisation et demander cet ID.

Stockage : pour envoyer des notifications push à un utilisateur en dehors d'une conversation, vous devez stocker les ID utilisateur à un endroit qui pourra être rappelé à tout moment. Dans cet exemple, vous allez configurer une base de données Firestore pour stocker les informations de chaque utilisateur.

Après avoir suivi ces instructions, vous ajouterez la boîte de dialogue suivante à la conversation de votre action:

Comment cela engagera-t-il les utilisateurs ?

Les utilisateurs de smartphones connaissent probablement les notifications push, qui fournissent des informations et des mises à jour spécifiques aux applications. Les notifications push constituent un moyen flexible d'accéder aux utilisateurs d'appareils mobiles en dehors de l'Assistant, à condition qu'ils aient une bonne raison de les activer. Grâce aux mises à jour quotidiennes, les utilisateurs savent déjà qu'ils recevront une notification quotidienne. Toutefois, avec les notifications push, les utilisateurs ne savent pas s'ils choisissent de recevoir des notifications peu fréquentes ou s'ils seront gênés de recevoir plusieurs notifications par jour.

Les notifications push peuvent être un outil d'engagement utile, mais elles ne doivent pas nécessairement être intégrées à chaque action. Tenez compte des conseils suivants lorsque vous décidez d'ajouter ou non des notifications push à une action:

Planifiez quelques exemples de programmation pour vos notifications push. Si vous prévoyez de n'envoyer qu'une seule notification push par jour, optez plutôt pour des mises à jour quotidiennes.
Assurez-vous que vos notifications push fournissent des informations utiles à chaque fois qu'elles sont reçues. Vos notifications peuvent également contenir un lien profond vers l'un des intents de votre action. Assurez-vous donc qu'il est utile et pertinent.
Soyez explicite lorsque vous demandez à l'utilisateur de s'abonner aux notifications push. Ils doivent comprendre à quoi s'attendre avec chaque notification push et avoir une idée de leur fréquence d'envoi.

Activer l'API Actions

Ouvrez la console Google Cloud, puis sélectionnez le nom de votre projet Actions dans le menu déroulant.

Dans le menu de navigation (☰), accédez à API et Services > Bibliothèque.
Recherchez l'API Actions, puis cliquez sur Activer.

Créer un compte de service

L'API Actions requiert une authentification. Vous devez donc créer un compte de service pour envoyer des requêtes. Pour créer et installer une clé de compte de service pour l'API Actions, procédez comme suit:

Dans le menu de navigation de la console Google Cloud (☰), accédez à API et Services > Identifiants
Cliquez sur Créer des identifiants > Clé de compte de service :
Dans le menu déroulant Compte de service, sélectionnez Nouveau compte de service.
Renseignez les informations suivantes:

Service account name (Nom du compte de service) : service-account
Rôle: Projet > Propriétaire
ID de compte de service : service-account (toujours suivi de @<project_id>.iam.gserviceaccount.com)
Type de clé : "JSON"

Cliquez sur Créer.
Déplacez le fichier JSON téléchargé vers le répertoire /user-engagement-codelab/start/functions/ de votre projet.
Renommez le fichier JSON en service-account.json.

Activer Firestore

Pour envoyer des notifications en dehors de la conversation, vous devez pouvoir stocker des ID utilisateur qui peuvent être référencés à partir de votre code de notification. Dans cet exemple, nous utilisons une base de données Firestore pour stocker les ID des utilisateurs abonnés.

Suivez ces étapes afin de créer une base de données Firestore pour votre action:

Dans la console Firebase, sélectionnez le nom de votre projet Actions.
Dans le volet de navigation de gauche, accédez à Développer > Base de données, puis cliquez sur Créer une base de données.
Sélectionnez Démarrer en mode test.
Cliquez sur Activer.

Configurer Dialogflow

Suivez ces étapes dans la console Dialogflow pour créer le flux d'activation des notifications push:

Inviter l'utilisateur à s'abonner

Configurez un nouvel intent pour gérer l'utilisateur qui demande à s'abonner aux notifications push pour les cours annulés. Dans la console Dialogflow, cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Setup Push Notifications.
Dans la section Training phrases (Phrases d'entraînement), ajoutez les expressions utilisateur suivantes:

Subscribe to notifications
Send notification
Notify me
Send class notifications
Cancelled notifications

Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Gérer la décision de l'utilisateur

Configurez un nouvel intent pour gérer la réponse de l'utilisateur à l'invite d'abonnement aux notifications push. Cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Confirm Push Notifications.
Dans la section Événements, ajoutez actions_intent_PERMISSION. Cet événement Dialogflow est déclenché lorsque l'utilisateur termine le flux d'abonnement aux notifications push, qu'il ait fini par s'abonner ou non.
Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Gérer la notification push

Vous pouvez associer vos notifications push à un intent spécifique afin que les utilisateurs qui appuient sur la notification push soient directement associés à cet intent dans votre action. Dans cet exemple, ajoutez un intent pour les notifications push qui fournit des détails sur les cours annulés.

Pour ajouter un intent à déclencher lorsque l'utilisateur appuie sur une notification push, procédez comme suit:

Dans la console Dialogflow, cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Class Canceled.
Dans la section Training phrases (Phrases d'entraînement), ajoutez Cancelations en tant qu'expression utilisateur.
Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Envoyer des notifications de test en cours de conversation

En production, vous devez disposer d'un script distinct de votre code de traitement des actions qui envoie des notifications push. Pour cet exemple, créez un intent que vous pouvez appeler pour envoyer une notification push lorsque vous parlez à votre action. Cet intent n'est utilisé qu'à des fins de débogage. En pratique, les notifications push ne doivent pas être gérées par votre traitement ni déclenchées dans le cadre de la conversation de votre action.

Pour créer un intent afin de tester les notifications push, procédez comme suit:

À des fins de test et de débogage, configurez un nouvel intent qui vous permet d'envoyer des notifications push aux utilisateurs abonnés. Dans la console Dialogflow, cliquez sur le bouton + à côté de la section Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Test Notification.
Dans la section Training phrases (Phrases d'entraînement), ajoutez Test notification en tant qu'expression utilisateur.
Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
Cliquez sur Enregistrer en haut de la page.

Activer les notifications push

Procédez comme suit afin d'activer les notifications push pour l'intent Classe annulée:

Dans la console Dialogflow, accédez à Integrations (Intégrations) dans la barre de navigation.
Sur la fiche Assistant Google, cliquez sur Integration Settings (Paramètres d'intégration).
Ajoutez ClassCanceled (Classe annulée) en tant qu'intent d'appel implicite. Cette étape est nécessaire pour que Dialogflow reconnaisse que les utilisateurs peuvent démarrer votre conversation avec l'intent Cours annulé (en appuyant sur une notification push).
Cliquez sur Fermer.

Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sélectionnez Actions dans la barre de navigation de gauche.
Cliquez sur Cours annulé dans la liste Actions.
Dans la section Engagement utilisateur, activez l'option Voulez-vous envoyer des notifications push ?
Définissez un titre de contenu descriptif qui décrit la notification push. Le contexte sera "Puis-je envoyer des notifications push pour <titre du contenu> ?". Veillez donc à ce que votre titre soit descriptif et à l'oral. Pour cet exemple, définissez le titre du contenu sur class cancelations.
Cliquez sur Enregistrer en haut de la page.

Implémenter le fulfillment

Pour implémenter le fulfillment dans votre webhook, procédez comme suit:

Charger les dépendances

Dans le fichier index.js, mettez à jour la fonction require() pour ajouter le package UpdatePermission à partir du package actions-on-google, de sorte que vos importations se présentent comme suit:

index.js

const {
  dialogflow,
  Suggestions,
  RegisterUpdate,
  UpdatePermission,
} = require('actions-on-google');

Mettre à jour les chips de suggestion

Dans le fichier index.js, ajoutez une entrée NOTIFICATIONS à la liste des titres de chips de suggestion afin que votre définition Suggestion se présente comme suit:

index.js

// Suggestion chip titles
const Suggestion = {
  HOURS: 'Ask about hours',
  CLASSES: 'Learn about classes',
  DAILY: 'Send daily reminders',
  NOTIFICATIONS: 'Get notifications',
};

Configurer de nouvelles importations

Pour vous connecter à votre base de données Firestore, ajoutez le package firebase-admin ainsi que des constantes pour les champs stockés dans la base de données. Importez également les packages google-auth-library et request pour gérer l'authentification et les requêtes adressées à l'API Actions.

Dans le fichier index.js, ajoutez le code suivant à vos importations:

index.js

// Firebase admin import
const admin = require('firebase-admin');

// Initialize Firestore
admin.initializeApp();
const db = admin.firestore();

// Firestore constants
const FirestoreNames = {
 INTENT: 'intent',
 USER_ID: 'userId',
 USERS: 'users',
};

// Actions API authentication imports
const {auth} = require('google-auth-library');
const request = require('request');

Proposer de configurer des notifications d'annulation de cours

Dans le fichier index.js, remplacez le code suivant:

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like me to send you daily reminders of upcoming classes, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.HOURS]));
    };
  };
});

par ceci:

index.js

// Class list intent handler
app.intent('Class List', (conv, {day}) => {
  if (!day) {
    day = DAYS[new Date().getDay()];
  }
  const classes =
  [...new Set(schedule.days[day].map((d) => `${d.name} at ${d.startTime}`))]
  .join(', ');
  let classesMessage = `On ${day} we offer the following classes: ${classes}. `;
  // If the user started the conversation from the context of a daily update,
  // the conv's arguments will contain an 'UPDATES' section.
  let engagement = conv.arguments.get('UPDATES');
  // Check the conv arguments to tailor the conversation based on the context.
  if (engagement) {
    classesMessage += `Hope to see you soon at Action Gym!`;
    conv.close(classesMessage);
  } else {
    classesMessage += `Would you like to receive daily reminders of upcoming classes, subscribe to notifications about cancelations, or can I help you with anything else?`;
    conv.ask(classesMessage);
    if (conv.screen) {
      conv.ask(new Suggestions([Suggestion.DAILY, Suggestion.NOTIFICATIONS,
Suggestion.HOURS]));
    };
  };
});

Ajouter un fulfillment pour les nouveaux intents

Lorsque l'utilisateur dit vouloir s'abonner aux notifications push, appelez l'assistant UpdatePermission pour lui demander l'autorisation. Si l'opération réussit, l'argument PERMISSION est ajouté aux arguments de l'objet conv, que vous pouvez vérifier pour faire pivoter la conversation.

Une fois que vous avez obtenu l'autorisation de l'utilisateur, récupérez l'ID utilisateur dans les arguments de l'objet conv et enregistrez-le dans votre base de données. Vous enverrez ensuite cet ID utilisateur à l'API Actions, qui permet à l'Assistant de déterminer qui reçoit la notification.

Enfin, ajoutez le fulfillment pour l'intent Class Canceled qui est déclenché en appuyant sur la notification push. Dans cet exemple, votre réponse est une chaîne d'espace réservé, bien que dans une version prête pour la production de cette action, votre script de notification fournirait des informations plus dynamiques sur la classe qui a été annulée.

Dans le fichier index.js, ajoutez le code suivant:

index.js

// Call the User Information helper for permission to send push notifications
app.intent('Setup Push Notifications', (conv) => {
 conv.ask('Update permission for setting up push notifications');
 conv.ask(new UpdatePermission({intent: 'Class Canceled'}));
});

// Handle opt-in or rejection of push notifications
app.intent('Confirm Push Notifications', (conv) => {
 if (conv.arguments.get('PERMISSION')) {
   let userId = conv.arguments.get('UPDATES_USER_ID');
   if (!userId) {
     userId = conv.request.conversation.conversationId;
   }
   // Add the current conversation ID and the notification's
   // target intent to the Firestore database.
   return db.collection(FirestoreNames.USERS)
   .add({
     [FirestoreNames.INTENT]: 'Class Canceled',
     [FirestoreNames.USER_ID]: userId,
   })
   .then(() => {
     conv.ask(`Great, I'll notify you whenever there's a class cancelation. ` +
     'Can I help you with anything else?');
   });
 } else {
   conv.ask(`Okay, I won't send you notifications about class cancelations. ` +
     'Can I help you with anything else?');
 }
 if (conv.screen) {
    conv.ask(new Suggestions([Suggestion.CLASSES, Suggestion.HOURS]));
  }
});

// Intent triggered by tapping the push notification
app.intent('Class Canceled', (conv) => {
 conv.ask('Classname at classtime has been canceled.');
});

Ajouter des notifications de test

Pour envoyer une notification push à un utilisateur, envoyez une requête POST à l'API Actions en indiquant l'ID utilisateur, le titre de la notification et l'intent cible. Dans cet exemple, le déclenchement de l'intent de notification de test effectuera une itération dans votre base de données Firestore et enverra des notifications push à tous les utilisateurs abonnés aux notifications.

N'oubliez pas que, dans cet exemple, vous incluez le code qui envoie la notification push dans le fulfillment de votre webhook et déclenchez ce code en appelant un intent de test dans votre conversation. Dans les actions que vous avez l'intention de publier, le code de votre notification push doit exister dans un script distinct de votre traitement.

Dans le fichier index.js, ajoutez le code suivant:

index.js

// Debug intent to trigger a test push notification
app.intent('Test Notification', (conv) => {
 // Use the Actions API to send a Google Assistant push notification.
 let client = auth.fromJSON(require('./service-account.json'));
 client.scopes = ['https://www.googleapis.com/auth/actions.fulfillment.conversation'];
 let notification = {
   userNotification: {
     title: 'Test Notification from Action Gym',
   },
   target: {},
 };
 client.authorize((err, tokens) => {
   if (err) {
     throw new Error(`Auth error: ${err}`);
   }
   // Iterate through Firestore and send push notifications to every user
   // who's currently opted in to canceled class notifications.
   db.collection(FirestoreNames.USERS)
       .where(FirestoreNames.INTENT, '==', 'Class Canceled')
       .get()
       .then((querySnapshot) => {
         querySnapshot.forEach((user) => {
           notification.target = {
             userId: user.get(FirestoreNames.USER_ID),
             intent: user.get(FirestoreNames.INTENT),
           };
           request.post('https://actions.googleapis.com/v2/conversations:send', {
             'auth': {
               'bearer': tokens.access_token,
             },
             'json': true,
             'body': {'customPushMessage': notification, 'isInSandbox': true},
           }, (err, httpResponse, body) => {
             if (err) {
               throw new Error(`API request error: ${err}`);
             }
             console.log(`${httpResponse.statusCode}: ` +
               `${httpResponse.statusMessage}`);
             console.log(JSON.stringify(body));
           });
         });
       })
       .catch((error) => {
         throw new Error(`Firestore query error: ${error}`);
       });
 });
 conv.ask('A notification has been sent to all subscribed users.');
});

Tester vos notifications push

Dans le terminal, exécutez la commande suivante pour déployer votre code de webhook mis à jour sur Firebase:

firebase deploy

Pour tester les notifications dans le simulateur Actions, procédez comme suit:

Dans la console Actions, accédez à l'onglet Test.
Saisissez Talk to my test app dans le champ Input (Entrée), puis appuyez sur Entrée.
Saisissez Learn about classes et appuyez sur Entrée.
Saisissez Get notifications et appuyez sur Entrée.
Si vous n'avez pas encore autorisé votre action à vous envoyer des notifications push, saisissez yes et appuyez sur Entrée.
Saisissez yes et appuyez sur Entrée. Votre compte Google devrait désormais être abonné aux notifications push pour cette action.

Saisissez no, puis appuyez sur Entrée pour quitter.
Saisissez Talk to my test app, puis appuyez sur Entrée pour démarrer une nouvelle conversation.
Saisissez Test notification et appuyez sur Entrée.

Après quelques minutes, vous devriez recevoir une "Notification de test d'Action Gym". Notification push de l'Assistant sur votre appareil mobile. Appuyez sur cette notification pour accéder à l'intent Cours annulé de votre action.

5. Créer une association à l'Assistant

Jusqu'à présent, nous avons abordé les fonctionnalités d'engagement que vous pouvez implémenter pour inciter les utilisateurs à revenir vers votre action. Toutefois, elles ont pour but d'avoir des utilisateurs qui découvrent et utilisent votre action.

Vous pouvez créer un lien Assistant qui redirigera les utilisateurs d'appareils mobiles directement vers votre action sur l'Assistant. Étant donné qu'un lien Assistant est un lien hypertexte standard, vous pouvez l'ajouter à un site Web ou à tout support marketing Web, comme un blog ou un post sur les réseaux sociaux.

Au cours de cette étape, vous allez découvrir ce qu'est un lien Assistant, comment en créer un pour l'intent d'accueil de votre action et comment l'ajouter à un site Web simple à des fins de test.

Comment cela engagera-t-il les utilisateurs ?

Attirer des utilisateurs vers votre action pour la première fois peut s'avérer difficile, en particulier lorsqu'ils doivent appeler explicitement votre action dans l'Assistant. Un lien vers l'Assistant vous facilite la tâche en proposant aux utilisateurs un lien direct vers votre action. Lorsqu'un utilisateur suit votre lien Assistant sur un appareil avec Assistant Google intégré, il est directement redirigé vers votre action. Lorsqu'un utilisateur ouvre votre lien sur un appareil non mobile ou un autre appareil non compatible avec l'Assistant, il est tout de même redirigé vers votre liste Actions Directory (si elle a été publiée) afin que le lien puisse continuer à promouvoir votre action auprès de ces utilisateurs.

Les liens de l'Assistant peuvent être un outil d'engagement utile. Nous vous conseillons donc d'en créer un si vous prévoyez de promouvoir votre action via votre site Web ou vos réseaux sociaux. Tenez compte des conseils suivants avant de créer et de distribuer un lien vers l'Assistant:

Les liens de l'Assistant ne fonctionnent qu'une fois votre action publiée. Tant que votre projet est à l'état de brouillon, l'association ne fonctionne que sur vos propres appareils. Toute autre personne est redirigée vers une page 404 du répertoire Actions.
Vous pouvez autoriser les utilisateurs à tester un lien Assistant avant de le publier en publiant votre action dans un environnement alpha ou bêta. Notez que seuls les utilisateurs qui participent à votre version alpha ou bêta peuvent tester votre lien Assistant.
Assurez-vous que l'intent de destination de votre lien vers l'Assistant donne une bonne première impression aux nouveaux utilisateurs. Votre intent d'accueil est la destination par défaut d'un lien de l'Assistant, car il devrait déjà présenter votre action

Activer les associations de l'Assistant

Suivez les étapes ci-dessous pour créer un lien Assistant pour l'intent de bienvenue:

Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sélectionnez Actions dans la barre de navigation de gauche.
Cliquez sur actions.intent.MAIN sous la liste Actions.
Dans la section Liens, activez l'option Voulez-vous activer une URL pour cette action.
Indiquez un titre de lien descriptif, décrivant votre action. Votre titre doit contenir une simple paire verbe-nom décrivant ce que l'utilisateur peut accomplir avec votre action. Pour cet exemple, définissez Titre de l'association sur learn about Action Gym.
Copiez l'extrait de code HTML situé en bas de cette page et enregistrez-le pour plus tard.
Cliquez sur Enregistrer en haut de la page.

Déployer un site Web test

Pour tester votre lien Assistant, vous pouvez utiliser les outils Firebase afin de déployer un site Web test en plus de votre traitement. Nous avons déjà créé un site Web de test simple pour cet exemple. Il vous suffit d'ajouter le lien vers l'Assistant.

Accédez au répertoire /user-engagement-codelab-nodejs/start/public/ de votre traitement et ouvrez le fichier index.html dans un éditeur de texte.

Dans le fichier index.html, collez l'extrait de code HTML du lien Assistant dans l'élément "body". Le fichier doit ressembler à l'extrait ci-dessous:

index.html

<body>
    <p>
     <a href="https://assistant.google.com/services/invoke/uid/000000efb5f2fd97">🅖 Ask my test app to learn about Action Gym
     </a>
    </p>
</body>

Tester le lien Assistant

Dans le terminal, exécutez la commande suivante pour déployer votre site Web de test sur Firebase:

firebase deploy

Une fois l'exécution de la commande de déploiement terminée, notez l'URL d'hébergement indiquée dans le résultat.

Accédez à cette URL dans le navigateur Web de votre appareil mobile. Le lien de l'Assistant devrait s'afficher sur votre site Web de test. Si vous cliquez sur ce lien sur votre appareil mobile, vous devriez être redirigé vers l'intent d'accueil de votre action dans l'Assistant.

Vous pouvez également essayer d'accéder à l'URL d'hébergement dans un navigateur pour ordinateur. Vous devriez alors accéder à une page 404 dans le répertoire de l'Assistant, car votre action n'est pas publiée.

6. Étapes suivantes

Félicitations !

Vous avez maintenant découvert l'importance de l'engagement utilisateur lors du développement d'une action, les fonctionnalités d'engagement utilisateur disponibles sur la plate-forme et comment ajouter chacune d'elles à une action.

Autres ressources de formation

Explorez ces ressources pour en savoir plus sur l'engagement utilisateur pour votre action:

Engagement utilisateur et Documentation des liens de l'Assistant: documentation officielle d'Actions on Google sur les fonctionnalités abordées dans cet atelier de programmation et sur l'engagement utilisateur en général.
Analyse de la fidélisation des utilisateurs: documentation concernant la fonctionnalité d'analyse de la console Actions qui présente la fidélisation des utilisateurs pour votre action publiée.
Consignes pour concevoir des conversations: bonnes pratiques et consignes pour concevoir des fonctionnalités d'engagement utilisateur.
Dépôt Actions on Google sur GitHub : exemples de code et de bibliothèques
r/GoogleAssistantDev: communauté Reddit officielle des développeurs qui utilisent l'Assistant.

Suivez-nous sur Twitter (@ActionsOnGoogle) pour connaître les dernières informations, et envoyez un tweet à #AoGDevs pour montrer votre création.

Enquête

Avant de nous quitter, veuillez remplir ce formulaire pour nous faire part de votre avis.