Intégrez Connectif avec Doofinder pour utiliser les données de recherche générées par chaque contact dans les workflows de Connectif, ainsi qu'insérer du contenu dynamique généré dans Connectif dans les résultats de recherche fournis par Doofinder.
Dans cet article, vous apprendrez comment réaliser l'intégration avec Doofinder et comment stocker les termes et filtres de recherche dans des champs personnalisés du contact.
Cette intégration fonctionne uniquement avec Doofinder Live Layer.
De plus, les clients de Doofinder qui utilisent des modèles personnalisés doivent informer l'équipe d'assistance de Doofinder qu'ils souhaitent intégrer avec Connectif, afin qu'ils ajoutent une classe nécessaire qui n'est pas présente par défaut dans les modèles personnalisés.
Temps d'implémentation : 30 min.
Difficulté : Intermédiaire
Quand l'utiliser ? : Pour collecter les données de Doofinder et insérer du contenu inline depuis Connectif.
Pourquoi implémenter l'extension
1. Cas d'utilisation après cette intégration
Voici quelques idées qui peuvent vous aider à mettre en place différentes stratégies après avoir activé l'extension Doofinder dans votre Boutique Connectif.
Dans le layer de Doofinder :
- Personnaliser Doofinder en indiquant au contact le prix minimum recommandé pour bénéficier de la livraison gratuite, en fonction de son panier.
- Afficher un coupon dans les résultats de recherche ou des produits recommandés, selon la valeur de l'acheteur.
Sur l'eCommerce :
- Inclure un recommandateur sur la page d'accueil basé sur la marque et les fourchettes de prix indiquées par le contact dans Doofinder.
Sur les canaux de communication :
- Envoyer un e-mail avec des produits personnalisés en fonction des recherches aux contacts ayant effectué une recherche dans Doofinder, incluant la marque et les prix, sans avoir pris d'autre action.
2. Quelles données pouvez-vous récupérer de Doofinder vers Connectif ?
Grâce à cette extension, Connectif recevra depuis Doofinder les informations suivantes :
- Le moment où un contact effectue une recherche dans Doofinder.
- La marque et, si utilisée, la plage de prix minimum et maximum filtrée par le contact lors de sa recherche.
3. Quelles données de Connectif pouvez-vous utiliser dans Doofinder ?
Vous pourrez également exploiter dans Doofinder toutes les informations collectées dans la fiche de contact, ainsi que son activité en temps réel, pour personnaliser le layer de Doofinder avec les données du contact depuis Connectif.
Avant de commencer : prérequis
Pour intégrer votre compte Connectif avec Doofinder, vous aurez besoin de :
- Un script pour récupérer les données de Doofinder (base fournie dans cet article).
- Google Tag Manager implémenté dans la boutique, pour capturer le script avec les données envoyées par Doofinder.
En fonction du CMS, le script peut également être implémenté directement dans le code de l'eCommerce, mais l'utiliser via Google Tag Manager est l'option la plus simple.
ÉTAPE 1 : Création de l'intégration personnalisée dans Connectif
1. Accédez à Configuration 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 Mettre à jour.
ÉTAPE 2 : Création des événements de réception
2.1. Création de l'événement de réception d'ouverture
(Cette section explique comment créer et configurer l'événement qui réceptionnera l'ouverture de Doofinder).
6. Dans l'onglet Recevoir des données, cliquez sur Créer un nouvel événement de réception.
7. Attribuez un nom et l'alias "doofinder-open-layer". Cliquez sur Enregistrer.
Vous devez attribuer cet alias pour qu'il corresponde à celui du Script de Connectif. Si vous utilisez un autre alias, vous devrez le modifier dans le script de l'étape 3.
8. Dans l'écran de confirmation, cliquez sur Retour à la liste des événements.
2.2. Création de l'événement de réception des informations de marque et de prix
(Cette section explique comment créer l'événement qui réceptionnera les informations sur la marque, "Prix Minimum" et "Prix Maximum" et configurer les champs où ces données seront stockées).
9. Dans l'onglet Recevoir des données, cliquez sur Créer un nouvel événement de réception.
10. Attribuez un nom et l'alias "doofinder-brand-price".
Vous devez attribuer cet alias pour qu'il corresponde à celui du Script de Connectif. Si vous utilisez un autre alias, vous devrez le modifier dans le script de l'étape 3. Notez également que le prix ne sera enregistré que si le contact interagit avec le curseur de prix de Doofinder.
11. Cliquez sur Ajouter un nouveau champ pour créer chacun des champs personnalisés et compléter leurs informations :
- Créez un champ nommé "Brand" avec l'ID "brand" de type Texte pour collecter la marque.
- Créez un champ nommé "Prix Minimum" avec l'ID "priceFrom" de type Décimal pour enregistrer le prix minimum.
- Créez un champ nommé "Prix Maximum" avec l'ID "priceUpTo" de type Décimal pour enregistrer le prix maximum.
Vous pouvez utiliser d'autres noms pour vos champs si vous le souhaitez, mais vous devez utiliser ces ID pour que le script fonctionne correctement.
12. Cliquez sur Enregistrer.
13. Dans l'écran de confirmation, cliquez sur Retour à la liste des événements.
ÉTAPE 3 : Intégration dans Google Tag Manager pour activer l'événement Doofinder
14. Copiez le script suivant :
Si vous n'avez pas utilisé les alias proposés dans cet article pour les événements de réception de l'Étape 2, vous devrez les renommer dans le script pour qu'ils correspondent aux vôtres.
<script>
(function () {
var connectifElementId = "connectif-doofinder-banner";
var selectorToInjectConnectifElement = ".dfd-ext";
var tempQuery = null;
var tempFirstBrand = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
var brandAndPriceEventAlias = "doofinder-brand-price";
var openDoofinderEventAlias = "doofinder-open-layer";
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);
};
}
window.document.addEventListener(
"doofinder.layer.search",
debounce(function onDooFinderSearch(event) {
var data = event.detail;
if (data.page 1) return;
var query = data.query;
var filter = data.filter;
var firstBrand = (filter?.terms?.brand?.[0]) || null;
var priceFrom = (filter?.range?.price?.gte) || (filter?.range?.best_price?.gte) || null;
var priceUpTo = (filter?.range?.price?.lte) || (filter?.range?.best_price?.lte) || null;
var queryHasChanged = query !== tempQuery;
var brandHasChanged = firstBrand !== tempFirstBrand;
var priceRangeHasChanged = priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo;
if (!queryHasChanged && !brandHasChanged && !priceRangeHasChanged) return;
tempQuery = query;
tempFirstBrand = firstBrand;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
function trackSearch() {
var events = [];
if (queryHasChanged) {
events.push({ type: "search", searchText: query });
}
if (brandHasChanged || priceRangeHasChanged) {
events.push({
type: "custom",
eventAlias: brandAndPriceEventAlias,
payload: {
brand: firstBrand,
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0,
},
});
}
sendConnectifEventsWhenReady(events);
}
trackSearch();
}, 1000)
);
function onDooFinderShow(event) {
window.document.addEventListener("doofinder.hide", onDooFinderHide, { once: true });
function trackOpenDooFinder() {
sendConnectifEventsWhenReady([
{ type: "custom", eventAlias: openDoofinderEventAlias, payload: {} },
]);
}
trackOpenDooFinder();
}
function onDooFinderHide() {
window.document.addEventListener("doofinder.show", onDooFinderShow, { once: true });
}
window.document.addEventListener("doofinder.show", onDooFinderShow, { once: true });
})();
</script>
15. Accédez au compte Google Tag Manager où vous allez insérer le script.
16. Allez à Tags et cliquez sur Nouveau.
17. Attribuez-lui un nom.
18. Cliquez sur Configuration de la balise et sélectionnez le type HTML Personnalisé.
19. Dans le bloc HTML, collez le script du point 14.
20. Cliquez sur Déclencheur et sélectionnez Toutes les pages.
Avec cette configuration, le script sera activé sur toutes les pages du eCommerce où Google Tag Manager est implémenté.
21. Cliquez sur Enregistrer.
Avec cette étape, chaque fois qu'un contact effectue une recherche sur Doofinder, l'événement déclenchera une action dans Connectif. De plus, la balise div avec l'ID "connectif-doofinder-banner" est également incluse dans le layer de Doofinder pour insérer du contenu inline depuis Connectif.
ÉTAPE 4 : Stockage des informations dans la fiche de contact de Connectif
4.1. Création des champs de contact
(Dans cette section, nous expliquons comment créer des champs personnalisés pour que les données collectées par Connectif puissent être stockées dans la fiche de contact).
22. Accédez à Connectif et allez, depuis le menu latéral gauche, à "Contacts > Champs de contact".
23. Cliquez sur Ajouter un nouveau champ personnalisé pour créer chaque champ personnalisé et complétez les informations :
- Créez un champ avec le nom "Doofinder Brand" de type Texte pour recueillir la marque.
- Créez un champ avec le nom "Doofinder Price From" de type Nombre Décimal pour recueillir la limite de prix minimum.
- Créez un champ avec le nom "Doofinder Price Up" de type Nombre Décimal pour recueillir la limite de prix maximum.
4.2. Création du workflow pour mettre à jour les champs
(Dans cette section, nous expliquons comment stocker les données envoyées par Doofinder dans Connectif via un workflow).
24. Accédez depuis le menu latéral gauche à Workflows.
25. Cliquez sur Créer un nouveau workflow et sélectionnez Créer un workflow vierge.
26. Connectez le nœud "Démarrage" au nœud de type Déclencheur que vous avez créé pour recevoir la marque et le prix de Doofinder.
27. Connectez le nœud de type Déclencheur au nœud "Définir le champ".
28. Cliquez sur (Modifier la configuration du nœud) du nœud "Définir le champ".
29. Faites glisser les champs que vous venez de créer, avec comme source de données Contact, de la colonne de gauche vers le bloc central, afin qu'ils correspondent aux champs homonymes de la colonne droite.
30. Cliquez sur Mettre à jour pour enregistrer la configuration du nœud et sauvegarder votre workflow.
Succès !
L'intégration de votre compte Connectif avec Doofinder est prête.
Continuez à apprendre !
Pour exploiter tout le potentiel de votre compte Connectif, nous vous recommandons de continuer avec les articles suivants :
- Inline recommandateur ou coupon dans Doofinder selon la récence, pour personnaliser les résultats de recherche de Doofinder avec un coupon pour les acheteurs ou des produits recommandés pour les non-acheteurs.
- Intégration personnalisée pour recevoir des données, pour apprendre à utiliser des 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 web.
-
Intégrations via API, pour gérer des événements tels que les enregistrements d'achats ou les créations de contacts.