Intégrez Connectif avec Motive 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 Motive avec Connectif et comment enregistrer dans les champs personnalisés du contact la marque et/ou 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 Motive 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 à implémenter différentes stratégies dans l'application Motive après avoir activé l'extension Motive dans votre boutique Connectif.
- Ajouter un recommandateur sur la page d'accueil basé sur la marque et les plages de prix indiquées par le contact dans Motive.
- Envoyer un e-mail avec des produits adaptés à leurs recherches aux contacts qui ont effectué une recherche dans Motive, en incluant la marque et les prix, et qui n'ont rien fait de plus.
2. Quelles données pourrez-vous apporter de Motive à Connectif ?
Avec cette extension, Connectif recevra de Motive les informations suivantes :
- Le terme de recherche qu'un contact utilise dans Motive.
- La marque et, si utilisée, 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. Accédez à Paramètres de la boutique dans le menu latéral gauche.
2. Dans le sélecteur d'onglets, allez sur "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, prix et marque
(Dans cette section, nous expliquons comment créer et configurer l'événement qui sera reçu depuis Motive).
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. Attribuez-lui un nom et l'alias "motive-search".
Vous devez lui attribuer cet alias pour qu'il corresponde à celui du Script de Connectif.
8. Cliquez sur Ajouter un nouveau champ pour créer chacun des champs personnalisés et complétez leurs informations :
- Créez un champ nommé "Brand" et l'ID "brand" de type Texte pour collecter la marque.
- Créez un champ nommé "PriceFrom" et l'ID "priceFrom" de type Décimal pour collecter le délimiteur du prix minimum.
- Créez un champ nommé "PriceUpTo" et l'ID "priceUpTo" de type Décimal pour collecter le délimiteur du prix maximum.
9. Cliquez sur Enregistrer.
ÉTAPE 3 : Création du workflow pour activer l'événement pendant la navigation du contact
(Dans cette section, le workflow sera créé pour collecter l'activité du contact pendant sa navigation sur le moteur de recherche de Motive dans le eCommerce. Cette activité sera collectée par un script qui sera inséré dans le eCommerce via un inline).
10. Allez dans Workflows et créez un nouveau workflow vide.
11. Dans la configuration du nœud "Démarrer", dans la zone Sélectionner une limitation, choisissez Ma liste entière et, dans Sélectionner une source de données cochez Tous les existants et les nouveaux.
12. Ajoutez le nœud déclencheur "Visiter une page" pour que le workflow soit activé dès qu'un contact visite le site.
13. Accédez à 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 sur Motive.
15. Accédez à sa configuration et créez un nouveau contenu de type Inline.
16. Dans l'éditeur de contenu, ajoutez un composant de type HTML.
17. Modifiez-le en copiant et collant le code suivant :
<script>
(function () {
var searchEventAlias = "motive-search";
var tempQuery = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
var tempFirstBrand = 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.price &&
data.filters.price[0] &&
data.filters.price[0].range &&
data.filters.price[0].range.min) ||
null;
var priceUpTo =
(data &&
data.filters &&
data.filters.price &&
data.filters.price[0] &&
data.filters.price[0].range &&
data.filters.price[0].range.max) ||
null;
var firstBrand =
(data &&
data.filters &&
data.filters.brand &&
data.filters.brand[0] &&
data.filters.brand[0].label) ||
null;
var query = data.query;
var queryHasChanged = query !== tempQuery;
var brandHasChanged = firstBrand !== tempFirstBrand;
var priceRangeHasChanged =
priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
if (!queryHasChanged && !priceRangeHasChanged && !brandHasChanged) {
return;
}
tempQuery = query;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
tempFirstBrand = firstBrand;
function trackSearch() {
var events = [];
if (queryHasChanged) {
events.push({
type: "search",
searchText: query,
});
}
if (priceRangeHasChanged || brandHasChanged) {
events.push({
type: "custom",
eventAlias: searchEventAlias,
payload: {
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0,
brand: firstBrand
},
});
}
sendConnectifEventsWhenReady(events);
}
trackSearch();
}, 1000)
);
})
.catch(console.error);
})();
</script>
18. Enregistrez le contenu et continuez pour compléter la configuration du nœud.
19. Sélectionnez le contenu Inline que vous venez de créer et cliquez sur Suivant .
20. Sur l'écran suivant, ajoutez le sélecteur approprié pour afficher le contenu. Cela doit être un élément présent sur votre page. Dans notre exemple, nous avons placé le sélecteur dans le pied de page de la page, pour que le contenu (le script) soit toujours activé.
21. Dans l'onglet Limitations, supprimez toutes les limitations du nœud et enregistrez sa configuration.
22. Enregistrez et activez le Workflow.
Ainsi, chaque fois qu'un contact visitera une page du eCommerce, ce contenu sera en attente d'un événement de Motive pour collecter les données de navigation du contact.
ÉTAPE 4 : Stockage des informations dans la fiche de contact Connectif
4.1. Création des champs personnalisés dans Connectif
(Dans cette section, nous allons créer les champs personnalisés qui collecteront les informations envoyées par Motive, telles que la marque et les filtres de prix minimum et maximum utilisés par le contact lors de sa navigation).
23. Allez dans "Contacts > Champs de Contact" et cliquez sur Ajouter un nouveau champ personnalisé.
24. Assignez-lui le type Texte et cliquez sur Aller à l'éditeur.
25. Attribuez-lui le Nom "Brand" et l'ID "brand" et cliquez sur Enregistrer. Cette valeur collectera la marque du produit recherché.
26. Créez un second champ, cette fois de type Décimal.
27. Assignez-lui le Nom "priceFrom" et l'ID "priceFrom" et cliquez sur Enregistrer. Cette valeur collectera le prix minimum indiqué par le contact.
28. Créez un troisième champ, également de type Décimal.
29. Assignez-lui le Nom "priceUpTo" et l'ID "priceUpTo" et cliquez sur Enregistrer. Cette valeur collectera le prix maximum indiqué par le 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 Motive dans la fiche de contact dans Connectif via un workflow).
30. Accédez depuis le menu latéral gauche à Workflows et créez un nouveau Workflow personnalisé.
31. Dans la configuration du nœud "Démarrer", dans la zone Sélectionner une limitation, choisissez Ma liste entière et, dans Sélectionner une source de données cochez Tous les existants et les nouveaux.
32. Connectez le nœud "Démarrer" au nœud de type Déclencheur que vous avez créé pour recevoir la marque et le prix de Motive.
33. Connectez le nœud de type Déclencheur au nœud "Définir le champ".
34. Accédez à sa configuration et, dans son 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 homonymes de la colonne de droite.
35. Enregistrez la configuration du nœud.
36. Enregistrez et activez votre workflow.
Succès!
L'intégration de votre compte Connectif avec Motive est prête.
Continuez à apprendre!
Pour profiter pleinement 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 pourrez personnaliser avec les données de Motive.
Intégration personnalisée pour recevoir des données, pour apprendre à utiliser les informations qui ne sont pas enregistrées par défaut dans 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.
Intégrations via API, pour gérer des événements tels que l'enregistrement d'achats ou l'inscription de contacts.