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.
It is important to note that this integration only works with Doofinder Live Layer.
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.
Why implement the extension
1. Use cases you can create after this integration
Here are some ideas that can help you implement different strategies after activating the extension with Doofinder in your Connectif Store.
In the Doofinder layer:
- Personalize Doofinder by indicating to the contact the minimum price it is recommended to set in the filter to qualify for free shipping based on their cart.
- Display a coupon in search results or recommended products, depending on the buyer's value.
In the eCommerce:
- Include a recommender on the Home page based on the brand and price ranges indicated by the contact in Doofinder.
In communication channels:
- Send an email with personalized products based on their Doofinder searches to contacts who have performed a search in Doofinder including brand and prices and have not taken any further action.
2. What data can you bring from Doofinder to Connectif?
With this extension, Connectif will receive from Doofinder the following information:
- The moment a contact performs a search in Doofinder.
- The brand and, if used, the minimum and maximum price limitation, filtered by the contact in their search.
3. What data from Connectif can you use in Doofinder?
Likewise, in Doofinder you can leverage all the information collected in the contact's profile, as well as their real-time activity, to personalize the Doofinder layer with Connectif contact data.
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" and the ID "brand" of type Text to collect the brand.
Create a field with name "Price From" and ID "priceFrom" of type Decimal to collect the minimum price delimiter.
Create a field with name "Price Up" and ID "priceUpTo" of type Decimal to collect the maximum price delimiter.
You can use other names for your fields if you wish, but use the given ID is mandatory for the script to work.
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 connectifElementId = "connectif-doofinder-banner";
var selectorToInjectConnectifElementAfterEnd = ".dfd-header";
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;
// 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.price &&
filter.range.price.gte) ||
(filter &&
filter.range &&
filter.range.best_price &&
filter.range.best_price.gte) ||
null;
var priceUpTo =
(filter &&
filter.range &&
filter.range.price &&
filter.range.price.lte) ||
(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;
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 createCustomNode(id) {
var node = document.createElement("div");
node.setAttribute("dfd-update", "ignore");
node.setAttribute("id", id);
node.innerHTML = "";
return node;
}
function doesExistCustomNode(id) {
return !!document.getElementById(id);
}
function insertNode(node) {
var element = document.querySelector(selectorToInjectConnectifElementAfterEnd);
if (!element) {
console.warn("Connectif - Doofinder:", "cannot find dom element with selector "
+ selectorToInjectConnectifElementAfterEnd
+ ". For this reason we cannot insert the Connectif dom element "
+ connectifElementId
+ " used to personalized the search console. Also the custom event " + openDoofinderEventAlias + " won't be triggered.");
return false;
}
element.insertAdjacentElement("afterend", node);
return true;
}
if (!doesExistCustomNode(connectifElementId)) {
var customNode = createCustomNode(connectifElementId);
var result = insertNode(customNode);
if (result === false) {
return;
}
}
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. 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.