Dans cette leçon, vous apprendrez et mettrez en œuvre le workflow contenant une stratégie de capture push pour que vos visiteurs s’inscrivent à ce canal de communication.
Profitez du canal push pour toucher immédiatement un plus grand nombre de contacts via les notifications du navigateur.
Objectif : Capture.
Éléments utilisés : Notification push, inline.
Temps d’implémentation : 1,5 heure.
Nous vous recommandons de suivre toutes les étapes et d’implémenter cette stratégie depuis zéro dans votre compte, mais si vous avez besoin d’une voie rapide, dans le Répertoire des Modèles de Workflows, vous avez à disposition le modèle Abonnement push utilisant la notification du navigateur, avec lequel vous pouvez travailler.
Résumé de la leçon
Dans cette leçon, vous allez apprendre :
- Comment créer un contenu inline et l’insérer sur votre site web.
- Comment créer une notification push avec l’Éditeur de notifications push.
- Comment utiliser le nœud "Afficher push" pour utiliser ce canal de communication.
À la fin de la leçon, vous aurez créé dans votre compte :
La stratégie de capture push contenant ce workflow, à travers laquelle vous enverrez à vos visiteurs un inline natif du navigateur pour qu’ils s’abonnent à ce canal de communication, que vous pourrez exploiter dans de futures campagnes.
Considérations préalables
Dans cette leçon, un contenu inline invisible est créé, qui déclenchera une demande d’abonnement aux notifications push pour les visiteurs qui ne les ont pas activées. Pour que cela fonctionne, vous devez avoir configuré le ServiceWorker dans votre processus d’intégration avec Connectif. Si vous ne l’avez pas fait, à la fin de cet article, vous trouverez la documentation sur la façon de configurer le canal push.
Chaque navigateur affichera la notification d’une manière différente, donc son apparence ne peut pas être modifiée, contrairement à d’autres contenus web de type inline.
Configuration de la stratégie
ÉTAPE 0. Création du workflow
Comment créer le workflow pour cette stratégie
1. Dans votre compte Connectif, cliquez sur "Workflows > Créer un nouveau Workflow" puis sur Créer un Workflow vierge.
2. Cliquez sur (Édition) et donnez-lui le nom "Abonnement push utilisant la notification du navigateur".
3. Cliquez sur Appliquer pour enregistrer le nouveau nom de votre workflow.
ÉTAPE 1. Nœud "Début"
Comment configurer le Nœud "Début" pour cette stratégie
(Ce nœud définit l’audience à laquelle le workflow sera destiné).
4. Cliquez sur (Modifier la configuration du nœud) du nœud “Début”.
5. Sous Sélectionnez une restriction, cochez "Toute ma liste".
6. Sous Sélectionnez la source des données, cochez "Tous les existants et les nouveaux".
7. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif que le workflow doit s’activer pour tous les contacts visitant le site web, aussi bien les nouveaux que les existants.
ÉTAPE 2. Nœud "Lors de la visite d’une page"
Comment configurer le Nœud "Lors de la visite d’une page" pour cette stratégie
(Ce nœud fera en sorte que l’action suivante du workflow, ici l’envoi de l’inline d’abonnement aux notifications push, s’active lorsqu’un contact visite votre site).
8. Dans le menu de sélection des nœuds, allez à "Déclencheurs > Web" et glissez le nœud "Lors de la visite d’une page" dans l’éditeur, de manière à ce qu’il soit connecté au nœud "Début".
9. Cliquez sur (Modifier la configuration du nœud) du nœud “Lors de la visite d’une page”.
10. Cliquez sur Limitations et décochez la case "Désactiver après déclenchement".
11. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif que, dès qu’un contact visite n’importe quelle page du site depuis n’importe quel appareil, le processus passe à l’action suivante.
ÉTAPE 3. Nœud "Vérifier la valeur"
Comment configurer le Nœud "Vérifier la valeur" pour cette stratégie
(Ce nœud vérifiera si vos visiteurs sont abonnés à vos notifications push, afin de ne pas leur envoyer l’inline s’ils les ont déjà activées).
12. Dans le menu de sélection des nœuds, allez à "Conditions > Système" et glissez le nœud "Vérifier la valeur" dans l’éditeur, de façon à le connecter au nœud "Lors de la visite d’une page".
13. Cliquez sur (Modifier la configuration du nœud) du nœud “Vérifier la valeur”.
14. Glissez le champ "A des abonnements push" de "Contact" vers le bloc de gauche.
15. Sous Opérateur, sélectionnez "Est égal à".
16. Glissez le champ "Literal" vers le bloc de droite et laissez la case sur "Oui", pour indiquer à Connectif que le statut d’abonnement push doit être "Oui" dans la fiche du contact.
17. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif de vérifier si les visiteurs ont le champ d’abonnement aux notifications push à "Oui". Si le contact n’est pas abonné, le flux continuera et la notification d’abonnement leur sera envoyée. Si le contact est abonné, la stratégie s’arrêtera.
ÉTAPE 4. Nœud "Envoyer contenu web"
Comment fonctionne le contenu web de type inline
Le contenu web de type "Inline" est inséré dans la page sans avoir besoin de modifier son code ni altérer sa structure. Il sert à afficher des contenus personnalisés ou du code HTML n’importe où sur le site.
Il est mis en forme dans l’Éditeur de contenu, donc aucune connaissance en programmation n’est nécessaire pour le créer.
Un inline génère des statistiques liées à ses affichages, interactions et participation au processus d’achat.
Comment configurer le contenu web de type inline pour cette stratégie
(Dans cette étape, vous allez créer l’inline de capture des utilisateurs pour les notifications push).
18. Dans le menu de sélection des nœuds, allez à "Actions > Web" et glissez le nœud "Envoyer contenu web" dans l’éditeur, de manière à le connecter au nœud "Vérifier la valeur".
19. Sur la liaison entre ce nœud et le nœud "Vérifier la valeur", cliquez sur le cercle jusqu’à ce que "Non" apparaisse.
20. Cliquez sur (Modifier la configuration du nœud) du nœud “Envoyer contenu web” et Créer un nouveau contenu pour générer un nouveau contenu.
21. Lors de la création d’un nouveau contenu, sélectionnez le type Inline, donnez-lui un nom, par exemple "Notification native push", puis cliquez sur Créer un nouveau contenu.
22. Ajoutez un composant de type HTML et éditez-le en copiant et collant le fragment de code suivant :
<script>
connectif.subscribeToPushNotifications(function (error){
if (!error){
connectif.managed.sendEvents([]);
}
});
</script>
23. Cliquez sur Enregistrer pour conserver les modifications dans la conception et sur Retour au sélecteur pour revenir et terminer la configuration du nœud.
Comment configurer le Nœud "Envoyer contenu web" pour cette stratégie
(Ce nœud affichera l’inline de confirmation de réception des push aux contacts qui ne sont pas abonnés).
24. Une fois le contenu Inline sélectionné, cliquez sur Suivant .
25. Sous Configuration, ajoutez le sélecteur approprié pour afficher le contenu. Dans ce cas, il est recommandé d’inclure le contenu dans un élément visible sur toutes les pages, par exemple dans le pied de page. Dans les leçons futures, il sera expliqué comment trouver le sélecteur adéquat pour insérer n’importe quel inline.
26. Sous Limitations, créez une limitation externe dans Limitation à d’autres nœuds, pour cela :
Dans le menu déroulant Sélectionner un nœud, choisissez l’option "Lors de la visite d’une page" pour limiter ce nœud.
Sous Sélectionner le type de limitation, choisissez l’option "Désactiver pendant un temps" et saisissez “1” dans le champ “Jour".
Cliquez sur Ajouter une limitation externe pour enregistrer la configuration.
27. Cliquez sur Terminer .
À cette étape, nous avons indiqué à Connectif d’envoyer l’inline d’abonnement que nous venons de créer aux visiteurs qui arrivent à cette partie du flux. Avec les limitations, cet inline ne sera envoyé qu’une fois par jour si les contacts ne sont pas abonnés.
ÉTAPE 5. Nœud "Lors de l’abonnement push"
Comment fonctionne le Nœud "Lors de l’abonnement push"
Ce nœud est utilisé pour réagir au moment où un contact s’abonne aux notifications push. L’interface du nœud ne dispose pas de configuration.
Comment configurer le Nœud "Lors de l’abonnement push" pour cette stratégie
(Ce nœud fera en sorte que l’action suivante du workflow, ici l’envoi d’une notification push de bienvenue, s’active lorsqu’un contact accepte de recevoir ces communications).
28. Dans le menu de sélection des nœuds, allez à "Déclencheurs > Web" et glissez le nœud "Lors de l’abonnement push" dans l’éditeur, de manière à le connecter au nœud "Envoyer contenu web".
29. Cliquez sur (Modifier la configuration du nœud) du nœud “Lors de l’abonnement push”.
30. Sous Limitations, décochez la case "Désactiver après déclenchement" et, sous "Désactiver temporairement après l’événement, saisissez “1” dans le champ “Jour".
31. Cliquez sur Mettre à jour.
À cette étape, nous avons indiqué à Connectif que, une fois que le contact s’abonne aux notifications push, l’étape suivante du workflow doit s’activer.
ÉTAPE 6. Nœud "Afficher push"
Comment fonctionne le nœud "Afficher push"
Ce nœud est utilisé pour afficher une notification push spécifique aux contacts qui arrivent à cette partie du workflow. Dans l’interface du nœud, tous les aspects de la notification à afficher sont configurés étape par étape :
- Configuration de la notification. Pour sélectionner une notification push préalablement créée ou en configurer une nouvelle dans l’éditeur de notifications web push. À cette étape, il est également possible de définir une date d’expiration pour la notification.
- Configuration des champs et valeurs. Pour assigner ou modifier les valeurs des variables incluses dans la notification push.
Comment fonctionnent les notifications push
Les notifications web push sont des messages instantanés et entièrement personnalisables que les contacts reçoivent sur leurs appareils. Cette communication immédiate et individualisée permet d’impacter les utilisateurs au bon moment et au bon endroit pour augmenter les taux de conversion, même lorsqu’ils ne visitent pas le site.
Elles sont mises en forme dans le Éditeur de notifications push, donc aucune connaissance en programmation n’est nécessaire pour les créer.
Comment configurer la notification push pour cette stratégie
(Dans cette étape, vous allez créer la notification push de bienvenue pour les contacts ayant accepté l’abonnement).
32. Dans le menu de sélection des nœuds, allez à "Actions > Web" et glissez le nœud "Afficher push" dans l’éditeur, de manière à le connecter au nœud "Lors de l’abonnement push".
33. Cliquez sur (Modifier la configuration du nœud) du nœud “Afficher push”. Cliquez sur Créer un nouveau contenu ou (optionnel) sur Modifier pour modifier une notification existante.
34. Lors de la création d’une nouvelle notification, dans le panneau Outils, cliquez sur l’onglet Général pour modifier les paramètres d’apparence générale de votre notification.
35. Sous Général, modifiez les options de création et de design de votre push.
Dans Titre de la notification, ajoutez le nom qui apparaîtra en haut du message.
Dans Message de la notification, ajoutez le corps du texte.
Dans Ajoutez une URL pour rediriger, configurez la page vers laquelle les contacts seront envoyés lorsqu’ils cliqueront sur la notification. Il doit s’agir d’un lien absolu. Si l’onglet "fermer au clic" est coché, la notification se fermera lorsque le contact cliquera dessus.
-
Dans URLs des images, configurez les trois types d’image que l’éditeur permet :
URL de l’icône : c’est l’image qui apparaît en haut à gauche, comme une icône.
URL de l’image : c’est l’image principale. Elle est affichée dans le modèle en occupant la moitié inférieure de la notification.
URL de l’icône de la barre de notifications : c’est l’image qui apparaîtra dans la barre de notifications de l’appareil où la push est reçue.
36. Dans la section Version compacte, configurez l’apparence de cette notification dans le coin de l’écran du navigateur.
- Dans Message compact, ajoutez le corps du texte qui apparaîtra dans la fenêtre pop-up.
- Dans URL de l’icône compacte, ajoutez l’image qui apparaîtra en haut à gauche comme icône.
37. (Optionnel). Ajoutez des variables dans n’importe lequel des champs, aussi bien dans la version complète que compacte. Pour cela :
- Cliquez sur (Définir une variable dynamique) à l’endroit où vous souhaitez insérer la variable. Dans cet exemple, nous créerons une variable pour le titre de la notification.
- Donnez un nom à la variable pour la distinguer. Dans cet exemple, nous lui attribuerons l’identifiant "Name".
- Sous Valeur par défaut, ajoutez la valeur que vous souhaitez que la variable prenne lorsqu’aucune donnée n’est stockée dans le champ correspondant. Dans cet exemple, nous lui attribuerons la valeur par défaut "Hello".
- Cliquez sur Accepter pour enregistrer les modifications de la variable.
38. Cliquez sur Aperçu pour vérifier le résultat final de votre notification, et/ou sur Aperçu compact pour vérifier le rendu en version compacte.
39. Cliquez sur Enregistrer pour conserver les modifications dans la conception et sur Retour à la liste des contenus pour revenir et terminer la configuration du nœud.
Comment configurer le nœud "Afficher push" pour cette stratégie
(Ce nœud va envoyer la notification push de bienvenue).
40. Sélectionnez la web push créée à l’étape précédente et cliquez sur Suivant .
41. (Optionnel). Si vous avez créé des variables pour votre contenu, liez-les aux champs Connectif en sélectionnant dans la colonne de gauche le champ correspondant et en l’assignant à la variable. Dans cet exemple, le champ "Nom" sera celui qui donnera la valeur à la variable "Name".
42. Cliquez sur Terminer .
À cette étape, nous avons indiqué à Connectif d’envoyer une notification push de bienvenue aux contacts dès qu’ils s’abonnent.
Résultat
Après avoir complété les étapes, vous aurez créé votre stratégie de capture push utilisant la notification du navigateur, qui sera envoyée aux visiteurs ne disposant pas encore de ce canal activé pour les inviter à s’abonner à vos notifications push. Une fois abonnés, vous leur enverrez une notification de bienvenue.
Poursuivez votre parcours
Maintenant que vous avez terminé cette leçon, continuez avec la suivante, dans laquelle vous créerez dans votre compte un Funnel de panier abandonné.
Félicitations !
Vous êtes arrivé à la fin de la leçon.
Retour au cours
Accédez à l’index complet du cours et à l’explication de chaque leçon via ce lien.
Lectures liées
Si vous souhaitez approfondir certains des apprentissages acquis dans cette leçon, vous pouvez accéder à la documentation du guide :
- Contenu web de type inline, pour apprendre comment fonctionne ce contenu, que vous pouvez éditer depuis l’Éditeur de contenu web, que vous avez appris à utiliser dans la première leçon.
- Configurer les notifications web push, pour vous assurer que vous avez intégré dans votre Connectif l’envoi des notifications push.
- Segment statique, pour apprendre à créer un segment de test avec lequel tester vos workflows.