Suscitez l'intérêt des 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 actions possibles, 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.

Il s'agit d'un module de programmation avancé 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). 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'une des façons les plus efficaces de mesurer la réussite d'une action est de susciter son engagement ou de savoir si cette action incite les utilisateurs à revenir après leur première interaction. Pour vous faciliter la tâche, vous pouvez implémenter plusieurs fonctionnalités dans votre action permettant aux utilisateurs de revenir dans votre conversation.

Cet atelier de programmation aborde les fonctionnalités liées à l'engagement utilisateur et les bonnes pratiques à appliquer pour Actions on Google.

A3fc0061bd01a75.png 961ef6e27dc72da2.png

Ce que vous allez faire

Vous allez améliorer une fonctionnalité qui a déjà été créée en l'autorisant à:

  • Envoyez aux utilisateurs des informations quotidiennes sur lesquelles ils peuvent appuyer pour parler à votre action
  • Envoyer aux utilisateurs des notifications push contenant un lien vers votre action
  • Créer un lien qui redirige les utilisateurs vers votre action depuis un navigateur Web mobile

Points abordés

  • Importance de l'engagement des utilisateurs et importance de la réussite d'une action
  • Modifier une action pour accroître l'engagement utilisateur
  • les fonctionnalités d'engagement utilisateur à utiliser dans différents types d'actions.
  • Envoyer des notifications via l'Assistant à l'aide de l'API Actions

Ce dont vous avez besoin

Vous devez disposer des outils suivants:

  • Un IDE/éditeur de texte de votre choix, tel que WebStorm, Atom ou Sublime
  • Un terminal pour exécuter des commandes d'interface système, 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 de Firebase
  • Un appareil mobile (Android ou iOS) avec Assistant (vous devez être connecté à l'Assistant avec le compte Google que vous utiliserez pour créer ce projet).

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

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 utilisé dans 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 alternent chaque jour. Ce type d'action est pertinent pour toutes les fonctionnalités liées à l'engagement des utilisateurs. En effet, la liste alternée des classes fournit des informations utiles différentes chaque jour.

Le schéma suivant illustre le flux de conversation de l'échantillon d'action du gymnase:

e2d6e4ad98948cf3.png

Vous apporterez de légères modifications à la boîte de dialogue pour mieux répondre aux besoins des fonctionnalités d'engagement que vous ajoutez. Toutefois, le design général de la conversation ne change 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:

  1. Ouvrez la Console Actions.
  2. Cliquez sur Nouveau projet.
  3. Saisissez un nom de projet, par exemple engagement-codelab.
  4. Cliquez sur Créer un projet.
  5. Plutôt que de sélectionner une catégorie, faites défiler la page jusqu'à la section Autres options et cliquez sur la fiche Conversation conversationnelle.
  6. Cliquez sur Créer une action pour développer les options et sélectionnez Ajouter une ou plusieurs actions.
  7. Cliquez sur Ajouter votre première action.
  8. Dans la boîte de dialogue Create Action (Créer une action), sélectionnez Custom Intent (Intent personnalisé), puis cliquez sur Build (Créer) pour lancer la console Dialogflow.
  9. Sur la page de création d'agents de la console Dialogflow, cliquez sur Créer.
  10. Dans le panneau de navigation de gauche, cliquez sur l'icône en forme de roue dentée 6bf56243a8a11a3b.png.
  11. Cliquez sur Exporter et importer, puis sur Restaurer à partir d'un fichier ZIP.
  12. Importez le fichier agent.zip à partir du répertoire /user-engagement-codelab-nodejs/start/ que vous avez téléchargé précédemment.
  13. Saisissez RESTORE, puis cliquez sur Restore (Restaurer).
  14. Cliquez sur OK.

Déployer le 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.

Exécutez la commande suivante dans le répertoire /user-engagement-codelab-nodejs/start/functions/ de vos fichiers de base pour cloner:

firebase use <PROJECT_ID>
npm install
firebase deploy

Au bout de quelques minutes, vous devriez voir le message Deploy complete! (Opération terminée), qui indique que le webhook a bien été déployé sur Firebase.

Récupérez l'URL de déploiement.

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

  1. Ouvrez la Console Firebase.
  2. Dans la liste d'options, sélectionnez votre projet Actions.
  3. Accédez à Develop > Functions 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 Plus tard.
  4. Dans l'onglet Dashboard (Tableau de bord), vous devriez voir une entrée pour "fulfillment" avec une URL sous Trigger (Déclencheur). Enregistrez cette URL. Vous devrez la copier dans Dialogflow dans la section suivante.

1741a329947975db.png

Définir l'URL du webhook dans Dialogflow

Vous devez maintenant mettre à jour votre agent Dialogflow pour utiliser votre webhook à des fins de fulfillment. Pour ce faire, procédez comme suit :

  1. Ouvrez la console Dialogflow (vous pouvez la fermer si vous le souhaitez).
  2. Dans le panneau de navigation de gauche, cliquez sur Fulfillment.
  3. Activez le Webhook.
  4. Collez l'URL que vous avez copiée depuis le tableau de bord Firebase si elle ne s'affiche pas.
  5. 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 qui répertorie le planning de la classe pour chaque jour de la semaine.

Pour tester votre action dans le simulateur de la console Actions:

  1. Dans le panneau de navigation de gauche de la console Dialogflow, cliquez sur Integrations (Intégrations) > Assistant Google.
  2. Assurez-vous que l'option Prévisualiser automatiquement les modifications est activée et cliquez sur Tester pour mettre à jour votre projet Actions.
  3. 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.
  4. Vous devriez voir une réponse de bienvenue dans Action Gym. Essayez de suivre les invites pour poursuivre la conversation tout en vous assurant que votre traitement contient une réponse pour chaque entrée.

60acf1ff87b1a87f.png

3. Ajouter des abonnements à des mises à jour quotidiennes

Pour attirer l'attention des utilisateurs, il est souvent possible de leur fournir des informations au moment le plus utile. Pour ce faire, les utilisateurs peuvent s'abonner aux mises à jour quotidiennes d'un intent afin de recevoir une notification de l'Assistant qui renvoie directement vers son traitement.

Au cours de cette étape, vous découvrirez les abonnements quotidiens et les ajouterez à l'intent List List de votre action. Une fois que vous avez suivi les instructions ci-dessous, la conversation de votre action se présente comme suit:

F48891C8118f7436.png

Qu'est-ce que cela implique pour vos utilisateurs ?

Les utilisateurs de smartphones connaissent probablement les notifications push, qui fournissent des informations et des mises à jour spécifiques aux applications. Les abonnements de mise à jour quotidienne constituent un moyen simple d'accéder aux appareils mobiles en dehors de l'Assistant, à condition que vous souhaitiez envoyer des mises à jour chaque jour afin de toujours apporter de la valeur à l'utilisateur.

Les mises à jour quotidiennes peuvent s'avérer utiles, mais ne doivent pas nécessairement être intégrées dans chaque action. Pour savoir si vous devez ajouter des abonnements à des mises à jour quotidiennes à une action, suivez ces conseils:

  • Assurez-vous que les mises à jour quotidiennes permettront à l'utilisateur de consulter différentes informations utiles chaque jour. Si l'utilisateur appuie sur la mise à jour quotidienne à chaque fois, il se désabonne probablement après deux jours.
  • Assurez-vous que votre boîte de dialogue est logique pour les utilisateurs s'ils accèdent directement à l'intent de la mise à jour quotidienne. L'utilisateur ne commence pas nécessairement au début de la conversation. Il ne doit donc pas avoir beaucoup de contexte.
  • Montrez à l'utilisateur les avantages de votre action avant de lui proposer de s'abonner aux mises à jour quotidiennes. Les internautes doivent penser à ce contenu tous les jours et lorsqu'ils ont la possibilité de s'abonner.
  • N'envoyez pas de suggestions répétées d'abonnés. proposer un abonnement à des mises à jour quotidiennes juste après avoir montré à l'utilisateur ce à quoi il s'abonne ;
  • Maintenez la conversation courte après le déclenchement de l'intent de mise à jour. La plupart des mises à jour quotidiennes ne doivent comprendre qu'une seule réponse, puis se fermer sans nécessiter d'intervention de l'utilisateur.

Activer les notifications quotidiennes

Vous pouvez ajouter des abonnements de mise à jour quotidiennes à l'intent de bienvenue, qui place l'utilisateur au début de votre conversation, ou à un intent plus spécifique afin de les lier à un point profond de la conversation. Dans cet atelier de programmation, l'intent Class List (Liste de classes) devient plus pertinent, car la boîte de dialogue change tous les jours. Il peut être utile de rappeler aux utilisateurs les classes disponibles.

Procédez comme suit pour activer les mises à jour quotidiennes de l'intent Class List:

  1. Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sur Actions dans la barre de navigation de gauche.
  2. Dans la liste Actions, cliquez sur Classe.
  3. Dans la section Engagement utilisateur, activez l'option Souhaite proposer des mises à jour quotidiennes aux utilisateurs.
  4. Définissez un titre de contenu descriptif. Le contexte sera &quot Pour cet exemple, définissez le titre du contenu sur list of upcoming Action Gym classes.
  5. Cliquez sur Enregistrer en haut de la page.

C00885cc30e14d68.png

Configurer Dialogflow

Pour créer des intents pour le flux d'abonnement quotidien pour la mise à jour, procédez comme suit dans la console Dialogflow:

Inviter l'utilisateur à s'abonner

  1. Configurez un nouvel intent pour gérer le fait que l'utilisateur demande à s'abonner aux mises à jour quotidiennes. Dans la console Dialogflow, cliquez sur le bouton + à côté de Intents dans le menu de navigation de gauche pour créer un intent.
  2. Nommez ce nouvel intent Setup Updates.
  3. Sous la section Expressions d'entraînement, ajoutez les expressions utilisateur suivantes :
  • Send daily reminders
  • Reminder
  • Remind me
  • Updates
  • Upcoming classes
  1. Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
  2. Cliquez sur Enregistrer en haut de la page.

5c70faa02136a0.png

Gérer la décision de l'utilisateur

  1. 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 Intents dans le menu de navigation de gauche pour créer un intent.
  2. Nommez ce nouvel intent Confirm Updates.
  3. Dans la section Événements, ajoutez actions_intent_REGISTER_UPDATE. Cet événement Dialogflow est déclenché par l'utilisateur qui termine le flux d'abonnement quotidien sur la mise à jour, qu'il ait fini de s'abonner ou non.
  4. Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
  5. Cliquez sur Enregistrer en haut de la page.

B871c2bdadac8abc.png

Appliquer le traitement

Pour mettre en œuvre le traitement dans votre webhook, procédez comme suit:

Charger des dépendances

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

index.js

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

Mettre à jour les chips de suggestion

b2f84ff91b0e1396.png Dans le fichier index.js, ajoutez une entrée DAILY à la liste des titres de chips de suggestion, comme suit:

index.js

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

Ajouter le traitement pour les nouveaux intents

Lorsque l'utilisateur indique qu'il souhaite s'abonner, démarrez le flux d'abonnement pour les mises à jour quotidiennes en appelant l'outil d'aide RegisterUpdate avec l'intent cible de mise à jour (List List) 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 des invites de suivi à l'utilisateur, qui varient en fonction de l'état de leur abonnement

b2f84ff91b0e1396.png 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 invites à l'utilisateur

Votre réponse à la liste de cours proposera une mise à jour quotidienne, mais cela pose problème. Même si la même réponse est déclenchée lorsque l'utilisateur appuie sur la notification de mise à jour quotidienne, il sera toujours invité à s'abonner aux mises à jour quotidiennes même s'il s'agit d'une seule mise à jour. 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 lieu où l'utilisateur a lancé la conversation. Vous pouvez vérifier les arguments conv pour voir s'ils contiennent une section UPDATES, qui indique que l'utilisateur a démarré la conversation à partir d'une notification de mise à jour quotidienne et modifier la réponse en conséquence. Vous pouvez également utiliser cette branche "conversation" pour fermer la boîte de dialogue immédiatement après avoir fourni la liste des classes, ce qui constitue une bonne pratique qui consiste à garantir une mise à jour quotidienne courte.

b2f84ff91b0e1396.png 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:

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 invite personnalisée dans le simulateur Actions:

  1. Dans la console Actions, accédez à Test.
  2. Saisissez Talk to my test app dans le champ Input (Entrée), puis appuyez sur Entrée.
  3. Saisissez Learn about classes et appuyez sur Entrée. La réponse de votre action devrait maintenant proposer d'envoyer des rappels quotidiens.
  4. Saisissez Send daily reminders et appuyez sur Entrée.
  5. Saisissez l'heure à laquelle vous souhaitez afficher 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.

83a15ecac8c71657.png

Sur votre appareil mobile, vous devriez recevoir une notification de l'Assistant à l'heure que vous avez spécifiée pour les mises à jour. Notez que l'affichage de cette notification peut prendre quelques minutes. Appuyez sur la notification. Elle devrait renvoyer directement vers l'intent List List dans l'Assistant, ce qui vous donne la liste des cours à venir:

8582482eafc67d5b.png

4. Ajouter des notifications push

Une autre option consiste à envoyer des notifications push aux utilisateurs en dehors de votre action via l'API Actions. Contrairement aux mises à jour quotidiennes, ces notifications ne sont pas programmées automatiquement par l'Assistant. Vous pouvez donc les envoyer à tout moment.

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

  • Compte 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.
  • Aide pour les autorisations : vous devez disposer de l'autorisation d'accès à l'ID utilisateur nécessaire pour envoyer des notifications push. Dans cet exemple, vous allez utiliser une fonction de bibliothèque cliente pour appeler l'outil d'aide des autorisations 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 peut être rappelé à la demande. Dans cet exemple, vous allez configurer une base de données Firestore pour stocker des informations pour chaque utilisateur.

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

7c9d4b630c547823.png

Qu'est-ce que cela implique pour vos 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 offrent 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. Grâce aux mises à jour quotidiennes, les utilisateurs savent déjà qu'ils en recevront une au quotidien. Cependant, les notifications push ne permettent pas aux utilisateurs de savoir s'ils acceptent de recevoir des notifications peu fréquentes ou de recevoir plusieurs notifications par jour.

Les notifications push peuvent s'avérer utiles, mais ne doivent pas nécessairement être intégrées dans chaque action. Pour savoir si vous souhaitez ajouter des notifications push à une action, tenez compte des conseils suivants:

  • Planifiez des exemples de plannings pour vos notifications push. Si vous prévoyez de n'envoyer qu'une seule notification push par jour, utilisez plutôt 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 comporter un lien profond vers l'un des intents de votre action. Assurez-vous donc qu'ils sont utiles et pertinents.
  • Soyez explicite lorsque vous demandez à un utilisateur de s'abonner aux notifications push. Il doit comprendre à quoi s'attendre à chaque notification push et se faire une idée de la fréquence à laquelle il est envoyé.

Activer l'API Actions

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

D015c1515b99e3db.png

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

6D464f49c88e70b4.png

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. Procédez comme suit pour créer et installer une clé de compte de service pour l'API Actions:

  1. Dans le menu de navigation de Google Cloud Console, accédez à API & Services > Credentials(Identifiants et services).
  2. Cliquez sur Créer des identifiants, puis valider la clé de compte de service.
  3. Dans le menu déroulant Service account (Compte de service), sélectionnez New Service Account (Nouveau compte de service).
  4. Fournissez 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"
  1. Cliquez sur Créer.
  2. Déplacez le fichier JSON téléchargé vers le répertoire /user-engagement-codelab/start/functions/ de votre projet.
  3. Attribuez-lui le nom service-account.json.

D9bd79d35691de3a.png

Activer Firestore

Pour envoyer des notifications en dehors de la conversation, vous avez besoin d'un moyen de stocker des ID utilisateur pouvant ê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 utilisateur des utilisateurs abonnés.

Pour créer une base de données Firestore pour votre action:

  1. Dans la console Firebase, sélectionnez le nom de votre projet Actions.
  2. Dans le panneau de navigation de gauche, accédez à Développer &gt, base de données, puis cliquez sur Créer une base de données.
  3. Sélectionnez Démarrer en mode test.
  4. Cliquez sur Activer.

6dfc386413954caa.png

Configurer Dialogflow

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

Inviter l'utilisateur à s'abonner

  1. Configurez un nouvel intent pour gérer le fait que l'utilisateur demande à s'abonner aux notifications push des 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.
  2. Nommez ce nouvel intent Setup Push Notifications.
  3. Sous la section Expressions d'entraînement, ajoutez les expressions utilisateur suivantes :
  • Subscribe to notifications
  • Send notification
  • Notify me
  • Send class notifications
  • Cancelled notifications
  1. Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
  2. Cliquez sur Enregistrer en haut de la page.

3D99bc41d0492552.png

Gérer la décision de l'utilisateur

  1. 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 Intents dans le menu de navigation de gauche pour créer un intent.
  2. Nommez ce nouvel intent Confirm Push Notifications.
  3. Dans la section Événements, ajoutez actions_intent_PERMISSION. Cet événement Dialogflow est déclenché par l'utilisateur qui termine le processus d'abonnement aux notifications push, qu'il ait fini de s'abonner ou non.
  4. Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
  5. Cliquez sur Enregistrer en haut de la page.

D37f550c5e07cb73.png

Gérer la notification push

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

Procédez comme suit pour ajouter un intent à déclencher par l'utilisateur en appuyant sur une notification push:

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

940379556f559636.png

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 destiné 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 avec votre action.

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

  1. À 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 Intents dans le menu de navigation de gauche pour créer un intent.
  2. Nommez ce nouvel intent Test Notification.
  3. Dans la section Expressions d'entraînement, ajoutez Test notification en tant qu'expression utilisateur.
  4. Dans la section Fulfillment, activez l'option Enable webhook call for this intent (Activer l'appel webhook pour cet intent).
  5. Cliquez sur Enregistrer en haut de la page.

6967f5a997643eb8.png

Activer les notifications push

Procédez comme suit pour activer les notifications push pour l'intent Classcanceled (Classe annulée) :

  1. Dans la console Dialogflow, accédez à Integrations (Intégrations) dans la barre de navigation.
  2. Sur la fiche Assistant Google, cliquez sur Paramètres d'intégration.
  3. Ajoutez la 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 ClassCanceled (Classe annulée) (en appuyant sur une notification push).
  4. Cliquez sur Fermer.

1ac725231fr279a1.png

  1. Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sur Actions dans la barre de navigation de gauche.
  2. Cliquez sur Cours annulé dans la liste Actions.
  3. Dans la section Engagement utilisateur, activez l'option Envoyer des notifications push.
  4. Définissez un titre décrivant la notification push. Le contexte sera indiqué. Si je vous envoie des notifications push, assurez-vous qu'il est à la fois descriptif et sonore. Pour cet exemple, définissez le titre du contenu sur class cancelations.
  5. Cliquez sur Enregistrer en haut de la page.

4304c7cd575f6de3.png

Appliquer le traitement

Pour mettre en œuvre le traitement dans votre webhook, procédez comme suit:

Charger des dépendances

b2f84ff91b0e1396.png Dans le fichier index.js, mettez à jour la fonction require() pour ajouter le package UpdatePermission à partir du package actions-on-google, afin 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

b2f84ff91b0e1396.png Dans le fichier index.js, ajoutez une entrée NOTIFICATIONS à la liste des titres de chips de suggestion, 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 à la 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 dans l'API Actions.

b2f84ff91b0e1396.png 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

b2f84ff91b0e1396.png 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:

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 le traitement pour les nouveaux intents

Lorsque l'utilisateur indique qu'il souhaite s'abonner aux notifications push, appelez l'outil d'aide UpdatePermission pour lui demander l'autorisation. Si l'opération aboutit, l'argument PERMISSION sera ajouté aux arguments de l'objet conv, que vous pourrez vérifier pour croiser.

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

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

b2f84ff91b0e1396.png 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, l'intent de notification de test est itéré dans votre base de données Firestore et envoyé 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 traitement de votre webhook et le déclenche en appelant un intent 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.

b2f84ff91b0e1396.png 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:

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

3a8704bdc0bcbb17.png

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

634dfcb0be8dfdéc.png

Dans quelques minutes, vous devriez recevoir une notification de test de la part de l'Assistant salle de sport sur votre appareil mobile. Appuyez sur cette notification pour accéder à l'intent Class Annuler de votre action.

33cbde513c10122e.png

5. Créer un lien Assistant

Jusqu'à présent, nous avons discuté des fonctionnalités d'engagement que vous pouvez mettre en œuvre pour que les utilisateurs reviennent à votre action, mais ces actions sont prévues pour que les utilisateurs découvrent et utilisent votre action.

Vous pouvez créer une association avec l'Assistant qui redirigera les utilisateurs d'appareils mobiles directement vers votre action dans l'Assistant. Un lien de l'Assistant est un lien hypertexte standard. Vous pouvez l'ajouter à un site Web ou à tout autre support marketing tel qu'un blog ou un post sur les réseaux sociaux.

Dans cette étape, vous allez découvrir en quoi consiste 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.

Qu'est-ce que cela implique pour vos utilisateurs ?

Attirer des utilisateurs pour la première fois peut s'avérer difficile, surtout lorsqu'ils doivent appeler explicitement votre action dans l'Assistant. Un lien Assistant permet de fluidifier cette action en fournissant aux utilisateurs un lien direct vers votre action. Lorsqu'un utilisateur suit votre lien avec l'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 tout autre appareil qui n'est pas compatible avec l'Assistant, il est toujours redirigé vers la liste de votre annuaire des actions (s'il a été publié), de sorte que le lien puisse toujours promouvoir votre action auprès de ces utilisateurs.

Les liens de l'Assistant peuvent être utiles. Si vous prévoyez de faire la promotion de votre action via votre site Web ou les réseaux sociaux, nous vous conseillons d'en créer une. Voici quelques conseils à suivre 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. Lorsque votre projet est à l'état de brouillon, l'association ne fonctionne que sur vos propres appareils. Tout le monde est redirigé vers une page d'erreur 404 dans le répertoire "Actions".
  • Vous pouvez permettre aux utilisateurs de tester un lien Assistant avant de publier votre application en publiant votre action dans un environnement alpha ou bêta. Notez que seuls les utilisateurs qui participent à la phase alpha ou bêta peuvent tester le lien de l'Assistant.
  • Assurez-vous que l'intent de destination de votre lien Assistant fait une bonne première impression avec les nouveaux utilisateurs. L'intent d'accueil est la destination par défaut pour un lien de l'Assistant, car il devrait déjà vous permettre d'introduire votre action

Pour créer un lien Assistant pour l'intent de bienvenue:

  1. Dans la console Actions, cliquez sur l'onglet Develop (Développer), puis sur Actions dans la barre de navigation de gauche.
  2. Cliquez sur actions.intent.MAIN dans la liste Actions.
  3. Dans la section Associations, activez l'option Activer une URL pour cette action.
  4. Définissez un titre de lien descriptif qui décrit votre action. Créez une paire de verbes et un nom simples décrivant ce que l'utilisateur peut accomplir avec votre action. Pour cet exemple, définissez le titre du lien sur learn about Action Gym.
  5. Copiez l'extrait HTML en bas de cette page et enregistrez-le pour plus tard.
  6. Cliquez sur Enregistrer en haut de la page.

55341b8102b71eab.png

Déployer un site Web test

Pour tester le lien de l'Assistant, vous pouvez utiliser les outils Firebase afin de déployer un site Web test en plus de votre traitement. Pour cet exemple, nous avons déjà créé un site Web de test simple. Il vous suffit d'ajouter le lien de 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.

b2f84ff91b0e1396.png Dans le fichier index.html, collez l'extrait HTML de votre lien Assistant dans l'élément "body". Le fichier devrait 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>

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 terminée, notez l'URL d'hébergement dans le résultat.

B01e8d322fb5d623.png

Accédez à cette URL sur le navigateur Web de votre appareil mobile. Le lien de l'Assistant doit s'afficher sur votre site Web de test. Cliquer sur ce lien sur votre appareil mobile vous redirigera vers l'intent de bienvenue de l'action dans l'Assistant.

599845d647f5b623.png

Vous pouvez également accéder à l'URL d'hébergement dans un navigateur pour ordinateur. Cette action devrait vous rediriger vers une page 404 du répertoire de l'Assistant, car votre action n'est pas publiée.

6. Étapes suivantes

Félicitations !

À présent, vous avez découvert l'importance de l'engagement des utilisateurs lorsque vous développez 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

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

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 vos commentaires.