Intégrez Connectif avec Empathy pour utiliser les données de recherche générées par chaque contact dans les workflows de Connectif.
Dans cet article, vous apprendrez comment intégrer Empathy avec Connectif et comment enregistrer dans les champs personnalisés du contact les filtres de recherche de prix minimum et maximum
Temps de mise en œuvre : 1 heure.
Difficulté : Intermédiaire
Quand l'utiliser ? : Pour stocker les informations collectées par Empathy et les utiliser dans vos stratégies.
Pourquoi implémenter l'extension
1. Cas d'utilisation que vous pourrez créer après cette intégration
Voici quelques idées qui peuvent vous aider à mettre en place différentes stratégies dans l'application Empathy après avoir activé l'extension Empathy dans votre boutique Connectif.
- Inclure un recommandateur sur votre site web avec des produits populaires dans votre eCommerce qui se trouvent dans la même tranche de prix que celle indiquée par le contact dans Empathy.
- Envoyer un email avec des produits recommandés qui sont dans la même tranche de prix aux contacts qui ont effectué une recherche dans Empathy et qui n'ont rien fait d'autre.
2. Quelles données pouvez-vous importer d'Empathy vers Connectif ?
Avec cette extension, Connectif recevra les informations suivantes d'Empathy :
- Le terme de recherche qu'un contact utilise dans Empathy.
- La limitation de prix minimum et maximum, filtrée par le contact dans sa recherche.
ÉTAPE 1 : Création de l'intégration personnalisée dans Connectif
1. Allez dans Paramètres de la boutique dans le menu latéral gauche.
2. Dans le sélecteur d'onglets, allez à "Intégrations > Intégrations personnalisées (webhooks)" et cliquez sur Créer une nouvelle intégration.
3. Définissez le champ "Nom de l'intégration" pour identifier l'intégration.
4. (Optionnel) Personnalisez la couleur, ajoutez une description ou catégorisez l'intégration.
5. Cliquez sur Enregistrer.
ÉTAPE 2 : Création de l'événement de réception
2.1. Création de l'événement de réception de la recherche, du prix et de la marque
(Dans cette section, nous expliquons comment créer et configurer l'événement qui sera reçu depuis Empathy).
6. Dans l'onglet Recevoir les données, cliquez sur Créer un nouvel événement de réception et sélectionner le type Web/Application mobile.
7. Assignez-lui un nom et l'alias "empathy-search".
Vous devez lui attribuer cet alias pour qu'il corresponde à celui du script Connectif.
8. Cliquez sur Ajouter un nouveau champ pour créer chacun des champs personnalisés et complétez ses informations :
- Créez un champ nommé "PriceFrom" avec l'ID "priceFrom" de type Décimal pour capturer le délimiteur de prix minimum.
- Créez un champ nommé "PriceUpTo" avec l'ID "priceUpTo" de type Décimal pour capturer le délimiteur de prix maximum.
9. Cliquez sur Enregistrer.
ÉTAPE 3 : Création du workflow pour activer l'événement lors de la navigation du contact
(Dans cette section, nous allons créer le workflow qui capturera l'activité du contact pendant sa navigation sur le moteur de recherche Empathy au sein du eCommerce. Cette activité sera capturée via un script qui sera inséré dans l'eCommerce via un inline).
10. Allez dans Workflows et créez un nouveau workflow vierge.
11. Dans la configuration du nœud "Début", dans la zone Sélectionner une limitation, choisissez Toute ma liste et dans Sélectionner une source de données cochez Tous les existants et les nouveaux.
12. Ajoutez le nœud déclencheur "À la visite de la page" pour que le workflow soit activé lorsque qu'un contact visite la page web.
13. Allez dans sa configuration et, dans l'onglet Limitations, supprimez toutes les limitations.
14. Ajoutez le nœud "Envoyer du contenu web" pour insérer le script qui vérifiera l'activité du contact dans Empathy.
15. Allez dans sa configuration et créez un nouveau contenu de type Inline.
16. Dans l'éditeur de contenu, ajoutez un composant de type HTML.
17. Éditez-le, en copiant et collant le code suivant :
<script>
(function () {
var searchEventAlias = "empathy-search";
var tempQuery = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
function sendConnectifEventsWhenReady(events) {
if (
window.connectif &&
window.connectif.managed &&
window.connectif.managed.isInitialized()
) {
window.connectif.managed.sendEvents(events);
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
window.connectif.managed.sendEvents(events);
},
{ once: true }
);
}
}
function debounce(func, timeout) {
var timer;
return function (data) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
func(data);
}, timeout);
};
}
function isInterfaceXDefined() {
return !!window.InterfaceX;
}
function whenInterfaceXReady() {
if (isInterfaceXDefined()) {
return Promise.resolve();
}
var numberOfChecks = 50;
var count = 0;
return new Promise((resolve, reject) => {
function check() {
setTimeout(function () {
if (isInterfaceXDefined()) {
resolve();
} else {
count++;
if (count === numberOfChecks) {
reject(new Error("InterfaceX cannot found after timeout"));
} else {
check();
}
}
}, 100);
}
check();
});
}
whenInterfaceXReady()
.then(function onInterfaceXDefined() {
window.InterfaceX.bus.on("SearchResponseChanged", true).subscribe(
debounce(function onSearch(payload) {
var data = payload.eventPayload.request;
// ignore page navigation
if (data.page > 1) {
return;
}
var priceFrom =
(data &&
data.filters &&
data.filters.facetPrice &&
data.filters.facetPrice[0] &&
data.filters.facetPrice[0].range &&
data.filters.facetPrice[0].range.min) ||
null;
var priceUpTo =
(data &&
data.filters &&
data.filters.facetPrice &&
data.filters.facetPrice[0] &&
data.filters.facetPrice[0].range &&
data.filters.facetPrice[0].range.max) ||
null;
var query = data.query;
var queryHasChanged = query !== tempQuery;
var priceRangeHasChanged =
priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
if (!queryHasChanged && !priceRangeHasChanged) {
return;
}
tempQuery = query;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
function trackSearch() {
var events = [];
if (queryHasChanged) {
events.push({
type: "search",
searchText: query,
});
}
if (priceRangeHasChanged) {
events.push({
type: "custom",
eventAlias: searchEventAlias,
payload: {
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0,
},
});
}
sendConnectifEventsWhenReady(events);
}
trackSearch();
}, 1000)
);
})
.catch(console.error);
})();
</script>
18. Enregistrez le contenu et continuez pour terminer la configuration du nœud.
19. Sélectionnez le contenu Inline que vous venez de créer et cliquez sur Suivant .
20. Dans l'écran suivant, ajoutez le sélecteur approprié pour afficher le contenu. Celui-ci doit être un élément que vous avez sur votre page. Dans notre exemple, nous avons placé le sélecteur dans le pied de page de la page, pour qu'il active toujours le contenu, c'est-à-dire le script.
21. Dans l'onglet Limitations, supprimez toutes les limitations du nœud et enregistrez la configuration du nœud.
22. Enregistrez et activez le Workflow.
De cette manière, chaque fois qu'un contact visite une page du site eCommerce, ce contenu attendra que l'un des événements de Empathy soit lancé, afin de collecter les données de navigation du contact.
ÉTAPE 4 : Stockage des informations dans la fiche de contact Connectif
4.1. Création de champs personnalisés dans Connectif
(Dans cette section, nous allons créer des champs personnalisés qui recevront les informations envoyées depuis Empathy, telles que la marque et les filtres de prix maximum et minimum utilisés par le contact pendant sa navigation).
23. Allez dans "Contacts > Champs du contact" et cliquez sur Ajouter un nouveau champ personnalisé.
24. Attribuez-le type Décimal et cliquez sur Aller à l'éditeur.
27. Attribuez-lui le Nom "priceFrom" et l'ID "priceFrom" et cliquez sur Enregistrer. Cette valeur capturera le prix minimum indiqué par le contact.
28. Créez un second champ, également de type Décimal.
29. Attribuez-lui le Nom "priceUpTo" et l'ID "priceUpTo" et cliquez sur Enregistrer. Cette valeur capturera le prix maximum du contact.
4.2. Création du workflow pour mettre à jour les champs
(Dans cette section, nous expliquons comment stocker les données envoyées par Empathy dans la fiche de contact dans Connectif via un workflow).
30. Accédez au menu latéral et sélectionnez Workflows et créez un nouveau Workflow personnalisé.
31. Dans la configuration du nœud "Début", dans la zone Sélectionner une limitation, choisissez Toute ma liste et dans Sélectionner une source de données cochez Tous les existants et les nouveaux.
32. Connectez le nœud "Début" au nœud Déclencheur que vous avez créé pour recevoir la marque et les prix d'Empathy.
33. Connectez le nœud Déclencheur au nœud "Définir le champ".
34. Accédez à sa configuration et, dans l'interface, faites glisser les champs que vous venez de créer, avec la source de données Contact, de la colonne de gauche vers le bloc central afin qu'ils correspondent aux champs homologues de la colonne droite.
35. Enregistrez la configuration du nœud.
36. Enregistrez et activez votre workflow.
Succès !
L'intégration de votre compte Connectif avec Empathy est prête.
Continuez à apprendre !
Pour exploiter tout le potentiel de votre compte Connectif, nous vous recommandons de continuer avec les articles suivants :
Recommander sur la page d'accueil, pour apprendre à créer une bannière de recommandation sur la page d'accueil, que vous pouvez personnaliser avec les données d'Empathy.
Intégration personnalisée pour recevoir des données, pour apprendre à utiliser des informations qui ne sont pas enregistrées par défaut sur la plateforme.
Intégrations avec des systèmes externes, pour intégrer votre compte Connectif avec Facebook, des formulaires et d'autres webhooks de votre site web.
Intégrations via l'API, pour gérer des événements comme les enregistrements d'achats ou les inscriptions de contacts.