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.). Cet assistant simplifie la vie des utilisateurs qui lui demandent d'accomplir des tâches (par exemple, faire des courses, réserver un chauffeur, etc.). (Pour obtenir la liste complète des possibilités, consultez le répertoire des actions.) En tant que développeur, vous pouvez utiliser Actions on Google pour créer et gérer facilement des échanges agréables et efficaces entre les utilisateurs et votre service tiers.

Cet atelier de programmation est un module avancé. Il est destiné aux lecteurs qui ont déjà créé des actions pour l'Assistant Google. Si vous n'avez pas d'expérience dans le développement avec Actions on Google, nous vous recommandons vivement de suivre nos ateliers de programmation d'introduction ( Niveau 1, Niveau 2 et Niveau 3) pour vous familiariser avec la plate-forme. Ces modules avancés vous guideront à travers une série de fonctionnalités qui peuvent vous aider à étendre les fonctionnalités de vos actions et à élargir votre audience.

L'engagement des utilisateurs est un moyen important de mesurer le succès d'une action. Il permet de déterminer si l'action est efficace pour inciter les utilisateurs à revenir après leur première interaction. Pour faciliter cette 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 aborde les fonctionnalités d'engagement des utilisateurs et les bonnes pratiques pour Actions on Google.

Ce que vous allez faire

Vous allez améliorer une fonctionnalité déjà développée en lui permettant de :

Envoyer aux utilisateurs un récapitulatif quotidien sur lequel ils peuvent appuyer pour parler à votre action
Envoyer aux utilisateurs des notifications push qui renvoient vers votre action
Créer 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 est-il important pour le succès d'une action ?
Modifier une action pour accroître l'engagement des utilisateurs
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 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 même compte Google que celui que vous utiliserez pour créer ce projet)

Une connaissance de JavaScript (ES6) est également vivement recommandée, mais non obligatoire, pour comprendre le code du webhook.

2. Configurer votre projet

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

Comprendre l'échantillon

L'exemple de cet atelier de programmation est une Action simple pour une salle de sport fictive appelé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 comme celle-ci est un bon candidat pour toutes les fonctionnalités d'engagement des utilisateurs, car la liste des cours changeants fournit différentes informations utiles chaque jour.

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

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

Télécharger vos fichiers de base

Exécutez la commande suivante pour cloner le dépôt GitHub de 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 votre 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 Plus d'options, puis cliquez sur la fiche Conversationnel.
Cliquez sur Créer une action pour développer les options, puis sélectionnez 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 (Intention personnalisée), puis cliquez sur Build (Créer) pour lancer la console Dialogflow.
Sur la page de création d'agents 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 votre traitement

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, vous devriez voir le message Deploy complete! (Déploiement terminé), indiquant 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 à Develop > Functions (Développer > Fonctions) dans la barre de navigation de gauche. Si vous êtes invité à "Choisir les paramètres de partage des données", vous pouvez ignorer cette option en cliquant sur Faire ça plus tard.
Dans l'onglet Dashboard (Tableau de bord), vous devriez voir une entrée "fulfillment" (traitement) avec une URL sous Trigger (Déclencheur). Enregistrez cette URL, car vous devrez la copier dans Dialogflow à la section suivante.

Définir l'URL du webhook dans Dialogflow

Vous devez maintenant mettre à jour votre agent Dialogflow pour 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 Webhook.
Collez l'URL que vous avez copiée depuis le tableau de bord Firebase si elle n'apparaît pas déjà.
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 heures d'ouverture et une réponse textuelle qui liste le programme des cours pour chaque jour de la semaine.

Pour tester votre action dans le simulateur Actions :

Dans le panneau de navigation de gauche de la console Dialogflow, cliquez sur Integrations (Intégrations) > Google Assistant.
Assurez-vous que l'option Prévisualiser automatiquement les modifications est activée, puis cliquez sur 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.
Une réponse vous souhaitant la bienvenue dans Action Gym devrait s'afficher. Essayez de suivre les invites pour poursuivre la conversation tout en vous assurant que votre traitement des commandes comporte une réponse pour chaque entrée.

3. Ajouter des abonnements aux informations quotidiennes

Une façon courante d'inciter les utilisateurs à interagir consiste à leur proposer des informations au moment où elles leur sont le plus utiles. Pour ce faire, vous pouvez proposer aux utilisateurs de s'abonner aux mises à jour quotidiennes pour un intent. Ils recevront alors une notification de l'Assistant qui les redirigera directement vers l'exécution de cet intent.

Dans cette étape, vous allez découvrir les abonnements aux mises à jour quotidiennes et les ajouter à l'intention Class List de votre action. Après avoir suivi ces instructions, la conversation de votre action ressemblera au diagramme suivant :

Comment cela va-t-il engager 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 les appareils mobiles en dehors de l'Assistant, à condition que l'intention pour laquelle vous envoyez des mises à jour continue d'apporter de la valeur à l'utilisateur au quotidien.

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

Assurez-vous que les mises à jour quotidiennes permettent à l'utilisateur de voir des informations différentes et utiles chaque jour. Si l'utilisateur reçoit la même invite à chaque fois qu'il appuie sur une mise à jour quotidienne, il se désabonnera probablement au bout de quelques jours.
Assurez-vous que votre boîte de dialogue est compréhensible pour l'utilisateur s'il passe directement à l'intention de votre mise à jour quotidienne. Votre utilisateur ne commencera pas forcément la conversation depuis le début. Il ne faut donc pas s'attendre à ce qu'il ait beaucoup de contexte.
Montrez à l'utilisateur l'intérêt de votre action avant de lui demander de s'abonner aux mises à jour quotidiennes. Votre utilisateur doit se dire "Je veux ce contenu tous les jours" lorsqu'il a la possibilité de s'abonner.
Ne submergez pas l'utilisateur avec des suggestions répétées pour s'abonner. Proposez un abonnement aux mises à jour quotidiennes juste après avoir montré à l'utilisateur ce à quoi il s'abonne, et évitez de l'importuner à ce sujet ailleurs.
Une fois l'intention de mise à jour déclenchée, gardez la conversation courte. La plupart des mises à jour quotidiennes ne doivent comporter qu'une seule réponse, puis se fermer sans nécessiter d'intervention de l'utilisateur.

Activer les informations quotidiennes

Vous pouvez ajouter des abonnements aux mises à jour quotidiennes à l'intent d'accueil, qui place l'utilisateur au début de votre conversation, ou à un intent plus spécifique afin de l'envoyer directement à un endroit précis de la conversation. Pour cet atelier de programmation, l'intention Class List est la plus pertinente, car le dialogue change tous les jours et les utilisateurs peuvent trouver utile de se rappeler les cours disponibles.

Pour activer les mises à jour quotidiennes pour l'intent Liste des cours :

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 dans la liste Actions.
Dans la section Engagement des utilisateurs, activez l'option Souhaitez-vous proposer des mises à jour quotidiennes aux utilisateurs ?.
Définissez un titre de contenu descriptif qui décrit la mise à jour quotidienne. Le contexte sera "À quelle heure voulez-vous que je vous envoie chaque jour ?". Assurez-vous donc que votre titre est à la fois descriptif et correct à l'oral. Dans 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

Dans la console Dialogflow, procédez comme suit pour créer des intents pour le flux d'abonnement aux mises à jour quotidiennes :

Configurez une intention pour gérer la demande d'abonnement aux mises à jour quotidiennes de l'utilisateur. Dans la console Dialogflow, cliquez sur le bouton + à côté de Intents dans le menu de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Setup Updates.
Dans la section 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 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 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 Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Confirm Updates.
Dans la section Events (Événements), ajoutez actions_intent_REGISTER_UPDATE. Cet événement Dialogflow sera déclenché lorsque l'utilisateur aura terminé le processus d'abonnement aux mises à jour quotidiennes, qu'il se soit abonné ou non.
Dans la section Fulfillment, activez l'option Activer l'appel webhook pour cet intent.
Cliquez sur Enregistrer en haut de la page.

Implémenter le traitement

Pour implémenter le traitement 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. Vos importations devraient se présenter comme suit :

index.js

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

Chips de suggestions de mise à jour

Dans le fichier index.js, ajoutez une entrée DAILY à la liste des titres de chips de suggestion. Votre définition Suggestion doit donc ressembler à ceci :

index.js

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

Ajouter l'exécution pour de nouveaux intents

Lorsque l'utilisateur indique qu'il souhaite s'abonner, lancez le flux d'abonnement aux mises à jour quotidiennes en appelant l'assistant RegisterUpdate avec l'intention cible de la mise à jour (Liste des cours) et le type (DAILY). Une fois le flux 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. Proposer à l'utilisateur des invites de suivi qui changent 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 d'autres requêtes à l'utilisateur

Votre réponse Liste des élèves proposera l'abonnement aux mises à jour quotidiennes à la fin, mais cela pose un problème. Étant donné que la même réponse sera déclenchée lorsque l'utilisateur appuiera sur la notification de mise à jour quotidienne, il lui sera toujours demandé de s'abonner aux mises à jour quotidiennes, même s'il vient d'en recevoir une. Comment éviter que l'utilisateur ne pense qu'il doit se réabonner ?

Heureusement, les arguments de votre objet conv incluent des informations sur l'endroit où l'utilisateur a commencé la conversation. Vous pouvez vérifier si les arguments conv contiennent une section UPDATES, qui indique que l'utilisateur a commencé 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 cours, ce qui respecte notre bonne pratique consistant à garder la mise à jour quotidienne courte.

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 ce qui suit :

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 informations quotidiennes

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

firebase deploy

Pour tester votre reprompt personnalisé dans le simulateur Actions :

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 voir la mise à jour, 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 à l'heure que vous avez spécifiée pour les informations. Notez que l'affichage de cette notification peut prendre quelques minutes. Appuyez sur la notification. Elle devrait vous rediriger directement vers l'intention Liste des cours dans l'Assistant, qui vous fournit la liste des cours à venir :

4. Ajouter des notifications push

Pour interagir avec les utilisateurs en dehors de votre action, vous pouvez également appeler l'API Actions afin de leur envoyer des notifications push. Contrairement aux informations quotidiennes, ces notifications ne sont pas planifiées automatiquement par l'Assistant. Vous pouvez donc les envoyer à votre guise.

Dans cette étape, vous allez apprendre à implémenter des notifications push dans votre action en ajoutant une intention Cours annulé et en envoyant des notifications aux utilisateurs pour les informer de l'annulation d'un cours. Vous configurerez également les trois composants suivants nécessaires à l'envoi de notifications :

Compte de l'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.
Assistance pour les autorisations : vous avez besoin de l'autorisation de l'utilisateur pour accéder à l'ID utilisateur nécessaire à l'envoi de notifications push. Dans cet exemple, vous allez utiliser 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 dans un endroit où vous pouvez les récupérer à volonté. 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 va-t-il engager 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 sont un moyen flexible d'accéder aux utilisateurs sur les appareils mobiles en dehors de l'Assistant, à condition qu'ils aient une bonne raison de les activer. Les utilisateurs reçoivent déjà des notifications quotidiennes, ils savent donc qu'ils seront informés tous les jours. Avec les notifications push, les utilisateurs ne savent pas s'ils acceptent de recevoir des notifications peu fréquentes ou s'ils seront harcelés avec plusieurs notifications par jour.

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

Planifiez des exemples de plannings pour vos notifications push. Si vous prévoyez d'envoyer une seule notification push par jour, envisagez plutôt d'utiliser les mises à jour quotidiennes.
Assurez-vous que vos notifications push fournissent des informations utiles chaque fois qu'elles sont reçues. Vos notifications peuvent également inclure un lien profond vers l'un des intents de votre Action. Assurez-vous donc que l'intent est utile et pertinent.
Soyez explicite lorsque vous demandez à un utilisateur de s'abonner aux notifications push. Ils doivent savoir à quoi s'attendre avec chaque notification push et avoir une idée de la fréquence à laquelle les notifications sont envoyées.

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 nécessite 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 du 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 stocker les ID utilisateur auxquels votre code de notification peut faire référence. Pour cet exemple, nous utilisons une base de données Firestore pour stocker les ID utilisateur des abonnés.

Pour créer une base de données Firestore pour votre action, procédez comme suit :

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

Configurer Dialogflow

Pour créer le parcours d'activation des notifications push, procédez comme suit dans la console Dialogflow :

Inviter l'utilisateur à s'abonner

Configurez une intention pour gérer la demande de l'utilisateur de s'abonner aux notifications push pour les cours annulés. Dans la console Dialogflow, cliquez sur le bouton + à côté de Intents dans le menu de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Setup Push Notifications.
Dans la section 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 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 intent pour gérer la réponse de l'utilisateur à l'invite d'abonnement aux notifications push. Cliquez sur le bouton + à côté de Intents dans le panneau de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Confirm Push Notifications.
Dans la section Events (Événements), ajoutez actions_intent_PERMISSION. Cet événement Dialogflow est déclenché lorsque l'utilisateur termine le processus d'abonnement aux notifications push, qu'il ait fini par s'abonner ou non.
Dans la section Fulfillment, activez l'option 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 à une intention spécifique. Ainsi, les utilisateurs qui appuient sur la notification push sont redirigés directement vers cette intention dans votre action. Dans cet exemple, ajoutez une intention pour les notifications push qui fournit des informations sur les cours annulés.

Pour ajouter un intent à déclencher lorsque l'utilisateur appuie sur une notification push :

Dans la console Dialogflow, cliquez sur le bouton + à côté de Intents dans le menu de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Class Canceled.
Dans la section Phrases d'entraînement, ajoutez Cancelations en tant qu'expression utilisateur.
Dans la section Fulfillment, activez l'option 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 du code d'exécution de votre action qui envoie des notifications push. Pour cet exemple, créez une intention que vous pouvez appeler pour envoyer une notification push lorsque vous parlez à votre Action. Cette intention est uniquement destinée au débogage. En pratique, les notifications push ne doivent pas être gérées par votre fulfillment ni déclenchées dans le cadre de la conversation de votre Action.

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

Pour les tests et le 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 Intents dans le menu de navigation de gauche pour créer un intent.
Nommez ce nouvel intent Test Notification.
Dans la section Phrases d'entraînement, ajoutez Test notification en tant qu'expression utilisateur.
Dans la section Fulfillment, activez l'option Activer l'appel webhook pour cet intent.
Cliquez sur Enregistrer en haut de la page.

Activer les notifications push

Pour activer les notifications push pour l'intention Cours annulé, procédez comme suit :

Dans la console Dialogflow, accédez à Intégrations dans la barre de navigation.
Sur la fiche Assistant Google, cliquez sur Paramètres d'intégration.
Ajoutez Cours annulé en tant qu'intent d'invocation implicite. Cette étape est nécessaire pour que Dialogflow reconnaisse que les utilisateurs peuvent démarrer votre conversation avec l'intention 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 des utilisateurs, activez l'option Souhaitez-vous envoyer des notifications push ?.
Définissez un titre de contenu descriptif pour la notification push. Le contexte sera "Puis-je envoyer des notifications push pour ?". Assurez-vous donc que votre titre est à la fois descriptif et correct à l'oral. Dans cet exemple, définissez le titre du contenu sur class cancelations.
Cliquez sur Enregistrer en haut de la page.

Implémenter le traitement

Pour implémenter le traitement 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. Vos importations devraient se présenter comme suit :

index.js

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

Chips de suggestions de mise à jour

Dans le fichier index.js, ajoutez une entrée NOTIFICATIONS à la liste des titres de chips de suggestion. Votre définition Suggestion doit donc ressembler à ceci :

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 et 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');

Proposition de configurer les 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 ce qui suit :

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 l'exécution pour de nouveaux intents

Lorsque l'utilisateur indique qu'il souhaite s'abonner aux notifications push, appelez l'assistant UpdatePermission pour demander l'autorisation à l'utilisateur. Si l'opération réussit, l'argument PERMISSION est ajouté aux arguments de l'objet conv, que vous pouvez vérifier pour faire évoluer la conversation.

Une fois que vous avez obtenu l'autorisation de l'utilisateur, récupérez son ID à partir des arguments de l'objet conv et enregistrez-le dans votre base de données. Vous enverrez cet ID utilisateur à l'API Actions ultérieurement. C'est ainsi que l'Assistant détermine qui reçoit la notification.

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

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 avec l'ID utilisateur, le titre de la notification et l'intent cible. Dans cet exemple, le déclenchement de l'intention "Test Notification" (Tester la notification) itérera 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 votre webhook de traitement et que vous déclenchez ce code en appelant une intention de test dans votre conversation. Dans les actions que vous souhaitez publier, votre code de notification push doit figurer 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 le code de votre webhook mis à jour sur Firebase :

firebase deploy

Pour tester les notifications dans le simulateur Actions :

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 maintenant être abonné aux notifications push pour cette action.

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

Au bout de quelques minutes, vous devriez recevoir une notification push de l'Assistant "Test Notification from Action Gym" sur votre appareil mobile. En appuyant sur cette notification, vous serez redirigé vers l'intention Cours annulé de votre Action.

5. Créer un lien vers un 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, ces fonctionnalités sont basées sur la présence d'utilisateurs qui découvrent et utilisent votre action.

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

Dans cette étape, vous allez découvrir ce qu'est un lien Assistant, comment en créer un pour l'intention d'accueil de votre action et comment l'ajouter à un site Web simple pour le tester.

Comment cela va-t-il engager les utilisateurs ?

Il peut être difficile d'attirer des utilisateurs vers votre action pour la première fois, surtout lorsqu'ils doivent l'appeler explicitement sur l'Assistant. Un lien Assistant permet de réduire cette friction en donnant aux utilisateurs un lien direct vers votre action. Lorsqu'un utilisateur clique sur votre lien de l'Assistant sur un appareil compatible avec l'Assistant, il est redirigé directement vers votre Action. Lorsqu'un utilisateur ouvre votre lien sur un appareil non mobile ou sur tout autre appareil qui n'est pas compatible avec l'Assistant, il est redirigé vers la fiche de votre annuaire d'actions (si elle a été publiée). Le lien peut donc toujours promouvoir votre action auprès de ces utilisateurs.

Les liens Assistant peuvent être un outil d'engagement utile. Nous vous recommandons donc d'en créer un si vous prévoyez de faire la publicité de votre action sur votre site Web ou sur les réseaux sociaux. Tenez simplement compte des conseils suivants avant de créer et de distribuer un lien Assistant :

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

Activer les liens de l'Assistant

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 dans la liste Actions.
Dans la section Liens, activez l'option Souhaitez-vous activer une URL pour cette action ?.
Définissez un titre de lien descriptif qui décrit votre action. Choisissez un titre simple, composé d'un verbe et d'un nom, qui décrit ce que l'utilisateur peut accomplir avec votre action. Pour cet exemple, définissez le titre du lien sur learn about Action Gym.
Copiez l'extrait de code HTML en bas de cette page et enregistrez-le pour plus tard.
Cliquez sur Enregistrer en haut de la page.

Déployer un site Web de test

Pour tester votre lien Assistant, vous pouvez utiliser les outils Firebase pour déployer un site Web de test en même temps que votre traitement. Nous avons déjà créé un site Web de test simple pour cet exemple. Il vous suffit d'ajouter votre lien Assistant.

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

Dans le fichier index.html, collez l'extrait de code HTML du lien de votre 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 votre lien Assistant

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

firebase deploy

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

Accédez à cette URL dans le navigateur Web de votre appareil mobile. Le lien vers l'Assistant devrait s'afficher sur votre site Web de test. En cliquant sur ce lien sur votre appareil mobile, vous devriez être redirigé vers l'intention 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 être redirigé vers 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 appris l'importance de l'engagement des utilisateurs lors du développement d'une action, les fonctionnalités d'engagement des utilisateurs disponibles sur la plate-forme et comment ajouter chaque fonctionnalité à une action.

Autres ressources de formation

Consultez les ressources suivantes pour en savoir plus sur l'engagement des utilisateurs pour votre action :

Engagement utilisateur et documents sur les 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.
Analytics sur la fidélisation des utilisateurs : documentation sur la fonctionnalité d'analyse de la console Actions qui affiche 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 des utilisateurs.
Dépôt Actions on Google sur GitHub : exemples de code et de bibliothèques
r/GoogleAssistantDev : communauté Reddit officielle des développeurs qui travaillent sur 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 quitter cette page, veuillez remplir ce formulaire pour nous faire part de votre avis.

Engagez les utilisateurs avec votre action pour l'Assistant Google Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Présentation

Ce que vous allez faire

Points abordés

Prérequis

2. Configurer votre projet

Comprendre l'échantillon

Télécharger vos fichiers de base

Configurer votre projet et votre agent

Déployer votre traitement

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

Définir l'URL du webhook dans Dialogflow

Vérifier que votre projet est correctement configuré

3. Ajouter des abonnements aux informations quotidiennes

Comment cela va-t-il engager les utilisateurs ?

Activer les informations quotidiennes

Configurer Dialogflow

Inviter l'utilisateur à s'abonner

Gérer la décision de l'utilisateur

Implémenter le traitement

Charger les dépendances

index.js

Chips de suggestions de mise à jour

index.js

Ajouter l'exécution pour de nouveaux intents

index.js

Proposer d'autres requêtes à l'utilisateur

index.js

index.js

Tester vos informations quotidiennes

4. Ajouter des notifications push

Comment cela va-t-il engager les utilisateurs ?

Activer l'API Actions

Créer un compte de service

Activer Firestore

Configurer Dialogflow

Inviter l'utilisateur à s'abonner

Gérer la décision de l'utilisateur

Gérer la notification push

Envoyer des notifications de test en cours de conversation

Activer les notifications push

Implémenter le traitement

Charger les dépendances

index.js

Chips de suggestions de mise à jour

index.js

Configurer de nouvelles importations

index.js

Proposition de configurer les notifications d'annulation de cours

index.js

index.js

Ajouter l'exécution pour de nouveaux intents

index.js

Ajouter des notifications de test

index.js

Tester vos notifications push

5. Créer un lien vers un assistant

Comment cela va-t-il engager les utilisateurs ?

Activer les liens de l'Assistant

Déployer un site Web de test

index.html

Tester votre lien Assistant

6. Étapes suivantes

Autres ressources de formation

Enquête

Engagez les utilisateurs avec votre action pour l'Assistant Google