Integre o Connectif com o Motive para utilizar os dados de pesquisa gerados por cada contato nos fluxos de trabalho do Connectif.
Neste artigo, você aprenderá como integrar o Motive com o Connectif e como salvar nos campos personalizados do contato a marca e/ou os filtros de pesquisa de preço mínimo e máximo
Tempo de implementação: 1 hora.
Dificuldade: Intermediário
Quando usar?: Para armazenar as informações coletadas pelo Motive e utilizá-las em suas estratégias.
Por que implementar a extensão
1. Casos de uso que você pode criar após esta integração
Aqui estão algumas ideias que podem ajudá-lo a implementar diferentes estratégias no aplicativo Motive após ativar a extensão com Motive na sua Loja Connectif.
- Incluir um recomendador na Home baseado na marca e nos intervalos de preços que o contato indicou no Motive.
- Enviar um e-mail com produtos adaptados às suas buscas para os contatos que realizaram uma pesquisa no Motive, incluindo marca e preços e não fizeram mais nada.
2. Quais dados você pode trazer do Motive para o Connectif?
Com essa extensão, o Connectif receberá do Motive as seguintes informações:
- O termo de pesquisa que um contato utiliza no Motive.
- A marca e, se utilizada, a limitação de preço mínimo e máximo, filtrada pelo contato na sua pesquisa.
PASSO 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, adicione uma descrição ou categorize a integração.
5. Clique em Salvar.
PASSO 2: Criação do evento de recebimento
2.1. Criação do evento de recebimento da pesquisa, preço e marca
(Nesta seção explicamos como criar e configurar o evento que será recebido do Motive).
6. Na aba Receber dados, clique em Criar novo evento de recebimento e selecione o tipo Web/App móvel.
7. Atribua um nome e o alias "motive-search".
Você deve atribuir esse alias para que ele corresponda ao do Script do Connectif.
8. Clique em Adicionar um novo campo para criar cada um dos campos personalizados e preencha suas informações:
- Crie um campo com o nome "Brand" e o ID "brand" de tipo Texto para coletar a marca.
- Crie um campo com o nome "PriceFrom" e o ID "priceFrom" de tipo Decimal para coletar o delimitador de preço mínimo.
- Crie um campo com o nome "PriceUpTo" e o ID "priceUpTo" de tipo Decimal para coletar o delimitador de preço máximo.
9. Clique em Salvar.
PASSO 3: Criação do workflow para ativar o evento durante a navegação do contato
(Nesta seção, criaremos o workflow que irá coletar a atividade do contato durante sua navegação na busca do Motive dentro do eCommerce. Esta atividade será coletada por meio de um script inserido no eCommerce via inline).
10. Vá para Workflows e crie um novo workflow em branco.
11. Na configuração do nó "Início", na área Selecionar uma limitação escolha Minha lista toda e, em Selecionar uma fonte de dados marque Todos os existentes e os novos.
12. Adicione o nó disparador "Ao visitar página" para que o workflow seja ativado no momento em que um contato visitar o site.
13. Acesse sua configuração e, na aba Limitações, remova todas as limitações.
14. Adicione o nó "Enviar conteúdo web" para inserir o Script que verificará a atividade do contato no Motive.
15. Acesse sua configuração e crie um novo conteúdo do tipo Inline.
16. Dentro do editor de conteúdo, adicione um componente do tipo HTML.
17. Edite-o, copiando e colando o seguinte código:
<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. Salve o conteúdo e continue para finalizar a configuração do nó.
19. Selecione o conteúdo Inline que você acabou de criar e clique em Avançar .
20. Na próxima tela, adicione o seletor adequado para mostrar o conteúdo. Este deve ser um elemento que esteja na sua página. No nosso exemplo, colocamos o seletor no rodapé da página, para que o conteúdo (ou seja, o script) seja sempre ativado.
21. Na aba Limitações, remova todas as limitações do nó e salve a configuração do mesmo.
22. Salve e ative o Workflow.
Assim, sempre que um contato visitar uma página do eCommerce, este conteúdo ficará aguardando que um dos eventos do Motive seja disparado para coletar os dados de navegação do contato.
PASSO 4: Armazenamento das informações na ficha de contato do Connectif
4.1. Criação dos campos personalizados no Connectif
(Nesta seção, vamos criar os campos personalizados que irão coletar as informações enviadas pelo Motive, como a marca e os filtros de preço mínimo e máximo utilizados pelo contato durante sua navegação).
23. Vá para "Contatos > Campos do Contato" e clique em Adicionar novo campo personalizado.
24. Atribua o tipo Texto e clique em Ir para o editor.
25. Atribua o Nome "Brand" e o ID "brand" e clique em Salvar. Este valor irá coletar a marca do produto pesquisado.
26. Crie um segundo campo, dessa vez do tipo Decimal.
27. Atribua o Nome "priceFrom" e o ID "priceFrom" e clique em Salvar. Este valor irá coletar o preço mínimo indicado pelo contato.
28. Crie um terceiro campo, também do tipo Decimal.
29. Atribua o Nome "priceUpTo" e o ID "priceUpTo" e clique em Salvar. Este valor irá coletar o preço máximo indicado pelo contato.
4.2. Criação do workflow para atualizar os campos
(Nesta seção, explicamos como armazenar os dados enviados pelo Motive na ficha do contato no Connectif por meio de um workflow).
30. Acesse pelo menu lateral esquerdo o Workflows e crie um novo Workflow Personalizado.
31. Na configuração do nó "Início", na área Selecionar uma limitação, escolha Toda a minha lista e, em Selecionar uma fonte de dados marque Todos os existentes e os novos.
32. Conecte o nó "Início" ao nó do tipo Disparador que você criou para receber a marca e o preço do Motive.
33. Conecte o nó do tipo Disparador ao nó "Definir campo".
34. Acesse sua configuração e, dentro da interface, arraste os campos que você acabou de criar, com a fonte de dados Contato, da coluna da esquerda para o bloco central, para que eles correspondam aos campos homônimos na coluna direita.
35. Salve a configuração do nó.
36. Salve e ative seu workflow.
Sucesso!
A integração da sua conta Connectif com o Motive está pronta.
Continue aprendendo!
Para aproveitar ao máximo sua conta Connectif, recomendamos continuar com os seguintes artigos:
Recomendador na home, para aprender a criar uma barra de recomendação na página inicial, que você pode personalizar com os dados do Motive.
Integração personalizada para receber dados, para aprender a usar as informações que não são registradas por padrão na plataforma.
Integrações com sistemas externos, para integrar sua conta Connectif com o 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.