mercredi 29 décembre 2021

Hacker le Copier / Coller

Récemment, j'ai commencé à m'intéresser au sujet "Sales" 😮 (c'est à peu près la réaction de mon entourage)

Un des intervenants à la formation "Harpon" de   pointait un gourou de la vente, Tito Bohrt, et je suis arrivé sur le site spécialisé Sales Hacker.

Assez rapidement, je tombe sur un paragraphe intéressant sur un framework de vente P-MAP dont j'ignorais jusqu'à l'existence (en "bon" Dev que je suis...).

Je commence donc à copier / coller ledit paragraphe mais en le collant... je m'aperçois qu'il est enrichi d'une mention supplémentaire qui renvoie vers l'article d'origine !


résultat du collage


Comment ?

Bien joué les dévs de Sales Hacker : ils détectent que tu copies du texte vers ton presse-papier (CTRL+C) depuis un article et ils :

  • envoient un événement dans Amplitude
    Amplitude
  • enrichissent le texte copié avec une mention sur le site source !

Certains trouveront ceci assez intrusif (on pourra rétorquer qu'on s'est servi dans leur contenu) mais personnellement, je trouve ça assez génial !

C'est devenu assez simple avec la prise en charge de l' événement 'copy' par les navigateurs mais c'est l'usage qui fait tout l'intérêt de cette technique.

document.body.addEventListener('copy', (event) => {
    const selectedText = document.getSelection().toString();
    // exploiter l'information
    event.clipboardData.setData('text/plain', selectedText);     event.preventDefault(); });


Pourquoi ?!

En effet, c'est un moyen simple et abordable de :

  1. récolter l'information sur ce qui intéressent vraiment les lecteurs (les outils comme Hotjar sont puissants mais leur exploitation est fastidieuse) 
  2. favoriser les visites vers cette même page et donc augmenter le trafic


Et vous, quelles sont vos astuces ?

jeudi 24 décembre 2020

Webhooks (3ème et dernière partie) - Automation

Résumé des épisodes précédents : 

  1. le webhook est une des alternatives au polling et n'est pas sans rappeler le Hollywood principle "Ne nous appelez pas, nous vous appellerons !"
  2. notre société fictive Icicky nous sert à illustrer l'utilisation du webhook dans le cadre d'un processus de fidélisation en alimentant un CRM client

 Le décor ayant été dressé, nous allons pouvoir passer aux choses sérieuses 🤖 avec le volet Automation de notre article en 3 parties dévolu aux Webhooks.


La plateforme d'automation : Pipedream*

Amoureux du no-code, passez votre chemin.

Contrairement à Zapier, Pipedream s'adresse plutôt à la population des développeurs (Node.js) qui aiment voir ce qu'il y a sous le capot et clairement... ils sont comblés ! 🧔🏻

Cet outil permet de réaliser et d'héberger des workflows d'intégration, par exemple : 

Trigger > Action 1 > Action 2 > Action 3

Dans notre cas, le déclencheur (ou trigger) est la réception de la requête émise par Typeform et qui contient un JSON très semblable à ceci.


Il existe d'autres déclencheurs proposés par Pipedream (réception d'un email, à intervalles réguliers, etc...)


Les informations sont stockées dans un objet appelé steps qui est accessible depuis n'importe quelle action. 

Les actions peuvent être du code custom ou bien une brique déjà proposée par la communauté, elles présentent 3 composantes :

  1. Authentification : pour laquelle Pipedream offre, là encore, plusieurs intégrations pré-définies
    👉🏻 nous utiliserons l'authentification OAuth Hubspot


  2. Paramètres d'entrée : assurant la modularité des briques et pouvant recevoir - par exemple - des variables d'environnement 
    👉🏻 bien utile pour stocker l'identifiant de notre portail Hubspot et celui du propriétaire des objets créés (la note de la fiche contact)

  3. Code : aujourd'hui, du code Node.js (et tous les packages npm)


Coding de l'action 

Nous avons 1 seule action à implémenter : injecter les réponses de notre client dans sa fiche contact.

Pour ce faire, nous allons utiliser l'API de Hubspot pour simplement ajouter une "note" au sein de la fiche du client concerné.

Je vous partage le cœur de l'appel :

// Create note
const postNote = async function(contact, emailContact) {  
  let message = `Le formulaire < strong>${ titleForm }< /strong> a été complété avec les réponses suivantes` +
  `< ul>` + 
    `< li>Marrons : ${ chestnut }< /li>` +
    `< li>Caramel au beurre salé : ${ caramel }< /li>` +
    `< li>Spéculos : ${ speculos }< /li>` +
  `< /ul>`;

  let postJSON = {
    "engagement" : {
      "portalId" : _HUBSPOT.PORTAL_ID,
      "active"   : true,
      "type"     : "NOTE",
      "timestamp": Date.now() ,
      "source"   : "AUTOMATION_PLATFORM",
      "sourceId" : "Typeform",
      "ownerId"  : _HUBSPOT.OWNER_ID   // this determines the owner of the NOTE
    },
    "associations": {
      "contactIds" : [contact.id],
    },
    "metadata"     : {
      "body": `< p>${ message }< /p>`
    }
  };

  let postConfig = {
    method : 'POST',
    url    : `https://api.hubapi.com/engagements/v1/engagements`,
    headers: { 
      'Authorization': `Bearer ${auths.hubspot.oauth_access_token}`,
      'Content-Type' : 'application/json',
    },
    data   : postJSON
  };

  return axios(postConfig)
    .then(response => {
      let data = response.data;
      log.info(data);

      return data;
    })
    .catch(err => {
      log.error(err);
      if (err.response) {
        // client received an error response (5xx, 4xx)
      } else if (err.request) {
        // client never received a response, or request never left
      } else {
        // anything else
      }
    });
};


Voici le résultat :


Et à l'échelle ?

Pas de problème de volumétrie, Hubspot CRM nous autorise jusqu'à 1 million de contacts. 😳

Pipedream octroie généreusement 3000+ appels et 30 minutes de temps machine quotidiennement et gère, en plus de tout ça, le throttling et la concurrence ! 🤗 


Tout se passait trop bien, vous ne trouvez pas ? 😅

Il va falloir faire face, à l'échelle, à 2 contraintes :

  • Pipedream limite le temps maximum de traitement d'un webhook à 5 minutes (n'utilisez donc pas ceci pour mettre à jour  à la volée votre modèle de Machine Learning 🤷🏻‍♂️) [voir les settings du Workflow]
  • Hubspot n'autorise l'accès à son API qu'à raison de 10 appels/seconde (ça paraît beaucoup mais pas tant que ça finalement si vous avez besoin de chercher un contact, modifier la fiche, ajouter une note, ...) 

Rien d'insurmontable au final ! Ouf...


Synthèse de notre trilogie Webhooks

J'espère que vous avez apprécié cette trilogie sur les Webhooks.

Naturellement, nous n'avons traité qu'un seul type d'entrant alors que la vision 360° du client nécessite bien plus d'efforts mais vous avez le bagage nécessaire désormais.

N'hésitez pas à laisser un commentaire si c'est le cas (ou pas, les critiques constructives sont aussi appréciées !) et à suggérer d'autres sujets.

A bientôt et joyeuses fêtes ! 🎄


*NdR : je n'ai aucun lien d'affiliation, ... avec l'entreprise mentionnée
Ceci est à la fois un disclaimer et un appel pour une éventuelle affiliation #2-en-1 #update-a-venir ! 😁

mardi 22 décembre 2020

Webhooks (2ème partie) - Etude de cas

Dans notre première partie, nous avons vu ce qu'étaient les Webhooks et l'usage qu'on pouvait en faire en intégrant des données issues d'autres applications.


Etude de cas : CRM

Disclaimer : je parle beaucoup d'offres d'entreprises existantes non pas pour faire du placement de produit (je ne suis aucunement rémunéré par lesdites sociétés) mais, d'une part pour donner un ancrage un peu plus réel et, d'autre part, parce que j'ai apprécié leurs produits respectifs par le passé 👍🏻

Au sein de cet article, nous allons étudier le cas suivant, très actuel en ces temps où la digitalisation est le maître mot : un CRM dans lequel on essaie de suivre toutes les interactions faites avec les clients.

Qu'essayons-nous de réaliser à travers cette étude ?

A l'instar d'un service Marketing d'une entreprise, simplement être en mesure de pouvoir suivre :

  • les actes d'achat
  • les conversations
    • email 📧
    • SMS
    • chat 💬
    • ...
  • les formulaires de satisfaction
  • les consultations de votre site web 🌐
  • ... 

afin de se constituer le Graal de tout marketeux... la vision 360° du client

Pour notre exemple, nous avons choisi Hubspot CRM*, d'ailleurs n'importe quel CRM avec une API ferait l'affaire.


Schématiquement, cela ressemble à ceci :


Plantons le décor !

Nous sommes une société de vente de glace en ligne Icicky - dont le logo a été réalisé grâce au générateur de logo de Shopify* - et venons de lancer une campagne pour notre nouvelle glace de Noël 🎄.
Nous sollicitons nos clients par email pour choisir de nouveaux parfums (je sais, c'est pas léger mais ce sont les fêtes, hein ?) : 

  • une glace aux marrons
  • une glace au caramel au beurre salé
  • une glace au spéculos


L'application émettrice : Typeform

Pour mieux appréhender le marché, Icicky décide de donc mener une campagne email, grâce au service de Hubspot par exemple, auprès de ses clients actuels en leur envoyant un formulaire Typeform*.

Typeform permet de renseigner un Webhook de sorte qu'un message (dont la structure est propre à Typeform) est envoyé à cette adresse à chaque fois qu'une formulaire est complété.

Nous verrons dans la prochaine partie comment Pipedream* va nous permettre d'exploiter ledit message...



*NdR : je n'ai aucun lien d'affiliation, ... avec l'entreprise mentionnée
Ceci est à la fois un disclaimer et un appel pour une éventuelle affiliation #2-en-1 #update-a-venir ! 😁