Cet article est actuellement disponible en anglais et en espagnol. Vous pouvez vous servir de cette documentation en attendant qu'elle soit disponible dans votre langue.
Integrate Connectif with Doofinder to use the search data generated by each contact in Connectif workflows, as well as to insert dynamic content generated in Connectif into the search results provided by Doofinder.
In this article, you’ll learn how to set up the Doofinder integration and how to save search terms and filters in custom fields of the contact.
Once the integration is complete, you’ll be able to create personalization strategies in Doofinder like the one in this article, where we show you how to insert inline content based on the buyer's value.
Implementation time: 30 min.
Difficulty: Intermediate
When to use it: To collect Doofinder data and insert inline content from Connectif.
Before you start: prerequisites
In order to integrate your Connectif account with Doofinder, you will need:
- Script to collect data from Doofinder (base provided in this article).
- Google Tag Manager implemented in the store, in order to collect the script with the data sent by Doofinder.
Depending on the CMS, the script can also be implemented in the eCommerce code, but doing it through Google Tag Manager is the easiest option.
STEP 1: Creating the customized integration in Connectif
1. Go to Store Backoffice in the left side menu.
2. In the tab selector, go to "Integrations > Custom integrations (webhooks)" and click Create new integration.
3. Set the "Integration name" field to identify the integration.
4. (Optional) Customize the color, add a description, or categorize the integration.
5. Click Update.
STEP 2: Creating reception events
2.1. Creating the opening reception event
(This section explains how to create and configure the event that will receive data when Doofinder is opened.).
6. In the Receive data tab, click Create new receive event.
7. Assign it a name and the alias "doofinder-open-layer". Click Save.
You will need to assign this alias to match that of the Connectif Script. If you assign another alias, you must change it in the script in Step 3.
8. In the confirmation screen, click Return to event listing.
2.2. Creation of the brand and price data receipt event
(This section explains how to create the event that will receive the information on Brand, "Price From" and "Price To" and configure the fields where this data will be stored.).
9. In the Receive data tab, click Create new receive event.
10. Assign it a name and the alias "doofinder-brand-price".
You will need to assign this alias to match that of the Connectif Script. If you assign another alias, you must change it in the script in Step 3.
11. Click Add a new field to create each custom field and fill in its information:
- Create a field with the name "Brand" of type Text to collect the brand.
- Create a field with the name "PriceFrom" of type Decimal to collect the minimum price delimiter and mark it as Required.
- Create a field with the name "PriceUp" of type Decimal to collect the maximum price delimiter and mark it as Required.
You can use other names for your fields if you wish.
12. Click Save.
13. In the confirmation screen, click Return to event listing.
STEP 3: Google Tag Manager integration to trigger the Doofinder event
14. Copy the following script:
If you have not used the aliases proposed in this article for the receiving events in Step 2, you will need to rename them in the script to match your own.
<script>
(function() {
var brandAndPriceEventAlias = 'doofinder-brand-price';
var openDoofinderEventAlias = 'doofinder-open-layer';
var connectifElementId = "connectif-doofinder-banner";
var tempQuery = null;
var tempFirstBrand = null;
var tempPriceFrom = null;
var tempPriceUpTo = null;
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;
// ignore page navigation
if (data.page > 1) {
return;
}
var query = data.query;
var filter = data.filter;
var firstBrand =
(filter &&
filter.terms &&
filter.terms.brand &&
filter.terms.brand[0]) ||
null;
var priceFrom =
(filter &&
filter.range &&
filter.range.best_price &&
filter.range.best_price.gte) ||
null;
var priceUpTo =
(filter &&
filter.range &&
filter.range.best_price &&
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;
var connectif = window.connectif;
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,
}
});
}
connectif.managed.sendEvents(events);
}
if (connectif && connectif.managed) {
trackSearch();
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
trackSearch();
}
);
}
}, 1000));
window.document.addEventListener('doofinder.show', function onDooFinderShow(event) {
function createCustomNode(id) {
var node = document.createElement("div");
node.setAttribute("dfd-update", "ignore");
node.setAttribute("id", id);
node.innerHTML = "";
return node;
}
function insertNode(node) {
var header = document.querySelector(".dfd-header");
header.insertAdjacentElement("afterend", node);
}
if(document.getElementById(connectifElementId)) {
// element already exists, no need to add it again
return;
}
var customNode = createCustomNode(connectifElementId);
insertNode(customNode);
function trackOpenDooFinder() {
connectif.managed.sendEvents([
{
type: "custom",
eventAlias: openDoofinderEventAlias,
payload: {},
}
]);
}
if (connectif && connectif.managed) {
trackOpenDooFinder();
} else {
document.addEventListener(
"connectif.managed.initialized",
function onConnectifInitialized() {
trackOpenDooFinder();
}
);
}
})
})();
</script>
15. Log in to the Google Tag Manager account where you are going to insert the Script.
16. Go to Tags and click New.
17. Give it a name.
18. Click on Tag settings and assign it the Custom HTML type.
19. In the HTML block, paste the script of point 14.
20. Click Trigger and select All pages.
With this configuration, the Script will be activated on all eCommerce pages where Google Tag Manager is implemented.
21. Click on Save.
With this step, each time a contact performs a search in Doofinder, the event will trigger an action in Connectif. In addition, the div tag with the id "connectif-doofinder-banner" is also included within the Doofinder layer, to allow inline content from Connectif to be inserted.
STEP 4: Storage of information in the Connectif contact sheet
4.1. Creation of contact fields
(This section explains how to create custom fields so that the data collected by Connectif can be stored in the contact file.).
22. Log in to Connectif and go to "Contacts > Contact fields" from the left side menu.
23. Click Add new custom field to create each custom field and fill in its information:
- Create a Text -type field with the name "Doofinder Brand" to collect the brand.
- Create a Decimal Number -type field with the name "Doofinder Price From" to collect the minimum price delimiter.
- Create a Decimal Number field with the name "Doofinder Price Up" to collect the maximum price delimiter.
4.2. Creation of the workflow for updating the fields
(This section explains how to store the data sent by Doofinder in Connectif through a workflow).
24. Access from the left side menu to the Workflows.
25. Click Create new workflow and select Create blank workflow.
26. Connect the "Start" node to the Trigger node you have created to receive the Doofinder brand and price.
27. Connect the "Set field" node to the Trigger node.
28. Click (Edit node settings) for the “Set field” node.
29. Drag the fields you have just created, with data source Contact, from the left column to the central block so that they match the fields of the same name in the right column.
30. Click Update to save the node configuration and your workflow.
Success!
The integration of your Connectif account with Doofinder is ready.
Keep learning!
To make the most of your Connectif account, we recommend reading these articles next:
- Inline recommender or coupon on Doofinder according to recency, to personalize Doofinder search results with a coupon for purchasers or recommended products for non-purchasers.
- Custom integration for receiving data, to learn how to use information that is not registered by default on the platform.
- Integrations with external systems, to integrate your Connectif account with Facebook, forms and other webhooks of your website.
-
Integrations via API, to manage events such as purchase registrations or contact registrations.