Integre o Connectif com o Doofinder para utilizar os dados de busca gerados por cada contato nos fluxos de trabalho do Connectif, bem como inserir conteúdo dinâmico gerado no Connectif nos resultados de busca fornecidos pelo Doofinder.
Neste artigo, você aprenderá como realizar a integração com o Doofinder e como armazenar os termos e filtros de busca em campos personalizados do contato.
Esta integração só funciona com o Doofinder Live Layer.
Além disso, os clientes Doofinder que estiverem usando templates personalizados devem informar a equipe de Suporte do Doofinder que desejam integrar com o Connectif, para que possam adicionar uma classe necessária que não está presente por padrão nos templates personalizados.
Tempo de implementação: 30 min.
Dificuldade: Intermediário
Quando usar?: Para coletar os dados do Doofinder e inserir conteúdo inline a partir do Connectif.
Por que implementar a extensão
1. Casos de uso que você poderá criar após esta integração
A seguir estão algumas ideias que podem ajudar a implementar diferentes estratégias após ativar na sua Loja do Connectif a extensão com Doofinder.
No layer do Doofinder:
- Personalizar o Doofinder informando ao contato o preço mínimo recomendado para obter frete grátis com base no carrinho.
- Mostrar um cupom nos resultados da busca ou produtos recomendados, dependendo do valor do comprador.
No eCommerce:
- Incluir um recomendador na página inicial com base na marca e intervalos de preços que o contato indicou no Doofinder.
Nos canais de comunicação:
- Enviar um e-mail com produtos personalizados de acordo com as buscas realizadas pelos contatos no Doofinder, incluindo marca e preços, caso não tenham realizado nenhuma ação adicional.
2. Quais dados você poderá trazer do Doofinder para o Connectif?
Com esta extensão, o Connectif receberá do Doofinder as seguintes informações:
- O momento em que um contato realiza uma busca no Doofinder.
- A marca e, caso utilize, a limitação de preço mínimo e máximo, filtrada pelo contato na busca.
3. Quais dados do Connectif você poderá usar no Doofinder?
Da mesma forma, no Doofinder você poderá aproveitar todas as informações coletadas no cadastro do contato, bem como sua atividade em tempo real, para personalizar o layer do Doofinder com os dados do contato do Connectif.
Antes de começar: pré-requisitos
Para integrar sua conta do Connectif com o Doofinder, você precisará:
- Script para coletar os dados do Doofinder (modelo base fornecido neste artigo).
- Google Tag Manager implementado na loja, para coletar o script com os dados enviados pelo Doofinder.
Dependendo do CMS, o script também pode ser implementado no código do eCommerce, mas fazer isso por meio do Google Tag Manager é a opção mais simples.
PASO 1: Criação da integração personalizada no Connectif
1. Acesse Configuração da loja no menu lateral esquerdo.
2. No seletor de abas, vá para "Integrações > Integrações personalizadas (webhooks)" e clique em Criar nova integração.
3. Defina o campo "Nome da integração" para identificar a integração.
4. (Opcional) Personalize a cor, inclua uma descrição ou categorize a integração.
5. Clique em Atualizar.
PASO 2: Criação dos eventos de recebimento
2.1. Criação do evento de recebimento de abertura
(Nesta seção explicamos como criar e configurar o evento que receberá a abertura do Doofinder).
6. Na aba Receber dados, clique em Criar novo evento de recebimento.
7. Atribua um nome e o alias "doofinder-open-layer". Clique em Salvar.
Você deve atribuir este alias para que coincida com o Script do Connectif. Se atribuir outro alias, será necessário alterá-lo no script do Passo 3.
8. Na tela de confirmação, clique em Voltar para a lista de eventos.
2.2. Criação do evento de recebimento das informações de marca e preço
(Nesta seção explicamos como criar o evento que receberá as informações sobre Marca, "Preço Mínimo" e "Preço Máximo" e configurar os campos onde esses dados serão armazenados).
9. Na aba Receber dados, clique em Criar novo evento de recebimento.
10. Atribua um nome e o alias "doofinder-brand-price".
Você deve atribuir este alias para que coincida com o Script do Connectif. Se atribuir outro alias, será necessário alterá-lo no script do Passo 3. Além disso, tenha em mente que o preço só será coletado se o contato interagir com o controle deslizante de preços do Doofinder.
11. Clique em Adicionar um novo campo para criar cada um dos campos personalizados e preencha as informações:
- Crie um campo com o nome "Brand" e o ID "brand" do tipo Texto para capturar a marca.
- Crie um campo com o nome "Price From" e o ID "priceFrom" do tipo Decimal para capturar o delimitador de preço mínimo.
- Crie um campo com o nome "Price Up" e o ID "priceUpTo" do tipo Decimal para capturar o delimitador de preço máximo.
Você pode usar outros nomes para os seus campos, se desejar, mas deve utilizar esses IDs para que o script funcione corretamente.
12. Clique em Salvar.
13. Na tela de confirmação, clique em Voltar para a lista de eventos.
PASO 3: Integração no Google Tag Manager para ativar o evento do Doofinder
14. Copie o seguinte Script:
Se você não usou os aliases sugeridos neste artigo para os eventos de recebimento do Passo 2, precisará renomeá-los no script para que coincidam com os seus.
<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;
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) || null;
var priceUpTo = (filter && filter.range && filter.range.price && filter.range.price.lte) || null;
if (query !== tempQuery || firstBrand !== tempFirstBrand || priceFrom !== tempPriceFrom || priceUpTo !== tempPriceUpTo) {
tempQuery = query;
tempFirstBrand = firstBrand;
tempPriceFrom = priceFrom;
tempPriceUpTo = priceUpTo;
sendConnectifEventsWhenReady([{
type: "search",
searchText: query,
payload: {
brand: firstBrand,
priceFrom: priceFrom || 0,
priceUpTo: priceUpTo || 0
}
}]);
}
}, 1000));
})();
</script>
15. Acesse a conta do Google Tag Manager onde você vai inserir o Script.
16. Vá para Tags e clique em Novo.
17. Atribua um nome.
18. Clique em Configuração da Tag e atribua o tipo HTML Personalizado.
19. No bloco HTML, cole o Script do passo 14.
20. Clique em Disparador e selecione Todas as Páginas.
Com esta configuração, o Script será ativado em todas as páginas do eCommerce onde o Google Tag Manager estiver implementado.
21. Clique em Salvar.
Com esta etapa, toda vez que um contato realizar uma busca no Doofinder, o evento acionará uma ação no Connectif. Além disso, a tag div com o ID "connectif-doofinder-banner" também será incluída dentro da camada Doofinder, permitindo a inserção de conteúdo inline a partir do Connectif.
PASSO 4: Armazenamento das informações na Ficha de Contato do Connectif
4.1. Criação dos campos de contato
(Nesta seção é explicado como criar campos personalizados para que os dados coletados pelo Connectif possam ser armazenados na Ficha de Contato.).
22. Acesse o Connectif e vá para "Contatos > Campos do Contato" no menu lateral esquerdo.
23. Clique em Adicionar novo campo personalizado para criar cada um dos campos personalizados e preencher suas informações:
- Crie um campo com o nome "Doofinder Brand" do tipo Texto para coletar a marca.
- Crie um campo com o nome "Doofinder Price From" do tipo Número Decimal para coletar o delimitador de preço mínimo.
- Crie um campo com o nome "Doofinder Price Up" do tipo Número Decimal para coletar o delimitador de preço máximo.
4.2. Criação do workflow para atualizar os campos
(Nesta seção é explicado como armazenar os dados enviados pelo Doofinder no Connectif através de um workflow).
24. Acesse o menu lateral esquerdo e vá para Workflows.
25. Clique em Criar novo workflow e selecione Criar workflow em branco.
26. Conecte ao nó "Início" o nó do tipo Disparador que você criou para receber a marca e o preço do Doofinder.
27. Conecte ao nó do tipo Disparador o nó "Definir campo".
28. Clique em (Editar configuração do nó) no nó "Definir campo".
29. Arraste os campos que você acabou de criar, com origem de dados Contato, da coluna da esquerda para o bloco central, de modo que coincidam com os campos homônimos da coluna direita.
30. Clique em Atualizar para salvar a configuração do nó e salve seu workflow.
Sucesso!
A integração da sua conta Connectif com Doofinder está pronta.
Continue aprendendo!
Para aproveitar ao máximo sua conta no Connectif, recomendamos continuar com os seguintes artigos:
- Recomendador Inline ou cupom no Doofinder conforme recência, para personalizar os resultados de busca do Doofinder com um cupom para compradores ou produtos recomendados para não compradores.
- Integração personalizada para receber dados, para aprender como usar informações que não são registradas por padrão na plataforma.
- Integrações com sistemas externos, para integrar sua conta Connectif com Facebook, formulários e outros webhooks do seu site.
-
Integrações via API, para gerenciar eventos como registros de compras ou inscrições de contatos.