💡 Recupere a URL de Origem do seu Contato Inteligente

Fala pessoal, tudo bem?

Recentemente algumas pessoas me perguntaram em um dos nossos eventos, sobre como recuperar a URL de origem de um Chatbot, para conseguir identificar de onde a pessoa está vindo. Pois bem, eis que trago aqui, uma solução.

Basicamente, vamos precisar de:

  1. Adicionar um metadado no script do Blip Chat Widget inserido no nosso website;
  2. Adicionar um Script no Blip Builder para tratar esse novo Metadado;

PARA FINS DE EXEMPLO, VOU USAR UMA URL FICTÍCIA COM QUERY STRING:

https://urldetest.com?title=Campaing&utm_source=Google

:one: Metados no Script do Chat Widget

O que essa solução faz é enviar a URL da página atual onde o BlipChat está sendo chamado, como um Metadado para o Chatbot. Para isso, eu passei o valor window.location.href, que contém essa informação (incluindo as query string e informações de anúncio), para uma variável que chamei de pageOrigin, usando o método .withCustomMessageMetadata.

O que você precisa inserir no seu script é o seguinte:

Mudanças no script do Blip Chat Widget
<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
    (function () {
        window.onload = function () {
            new BlipChat()
            .withAppKey('SUA_APP_KEY_AQUI')
            .withCustomMessageMetadata( { pageOrigin: window.location.href } )
            .build();
        }
    })();
</script>

Agora o seu Chatbot já recebe uma variável chamada pageOrigin, que te retorna uma estrutura como a seguinte:

Retorno pageOrigin para site fictício https://urldetest.com/
{
   "historic": {},
   "origin":"https://urldetest.com/",
   "fullOrigin":"https://urldetest.com/",
   "isError":false
}

Baseado nisso, caso já seja suficiente, você pode usar {{[email protected]}}, para identificar a URL. Mas eu vou um pouco mais fundo, pois eu preciso também das query strings, para identificar alguns outros parâmetros, como anúncios e até metadados importantes.


:two: Script no Builder

Agora que já temos a pageOrigin chegando no Chatbot, vou inserir um script no Builder, no bloco Início, para receber e tratar esses dados. O script é o seguinte:

Script no Builder
const ORGANIC = 'orgânico';

function run(pageOrigin, inputMessage) {

    try {
        pageOrigin = initializeOrParsePreviousOrigin(pageOrigin);

        const pageOriginHandlingStrategy = blipchatPageOriginHandlingStrategy;

        pageOrigin = pageOriginHandlingStrategy(pageOrigin, inputMessage);

        if (pageOrigin.isError || pageOrigin.origin === ORGANIC) {
            return pageOrigin;
        }

        updatePageOriginObject(pageOrigin, pageOrigin.origin);
        return pageOrigin;
    }
    catch (err) {
        return { isError: true, error: err };
    }
}

function initializeOrParsePreviousOrigin(pageOrigin) {
    if (!pageOrigin) {
        pageOrigin = { historic: {} };
    }
    else {
        pageOrigin = JSON.parse(pageOrigin);
        if (!pageOrigin.historic) {
            pageOrigin.historic = {};
        }
        const lastOrigin = Object.assign({}, pageOrigin);
        delete lastOrigin.historic;
        const historic = Object.assign({}, pageOrigin.historic);
        const now = new Date();
        historic[now.toString()] = lastOrigin;
        pageOrigin = {
            historic: historic
        };
    }
    return pageOrigin;
}

function blipchatPageOriginHandlingStrategy(pageOrigin, inputMessage) {
    pageOrigin.origin = JSON.parse(inputMessage).metadata.pageOrigin;

    if (!pageOrigin.origin) {
        pageOrigin.isError = true;
    }
    return pageOrigin;
};


function updatePageOriginObject(pageOriginObject, pageOriginUrl) {
    const pageOriginSplitUrl = pageOriginUrl.split('?');
    pageOriginObject.origin = pageOriginSplitUrl[0];
    pageOriginObject.fullOrigin = pageOriginSplitUrl[0];
    pageOriginObject.isError = pageOriginSplitUrl[0] === '';

    if (pageOriginSplitUrl.length > 1) {
        const pageOriginUrlQueryParams = pageOriginSplitUrl[1].split('&');
        for (let index in pageOriginUrlQueryParams) {
            pageOriginObject.fullOrigin += `|${pageOriginUrlQueryParams[index]}`;
            const param = pageOriginUrlQueryParams[index].split('=');
            const paramName = param[0];
            const paramValue = decodeURIComponent(param[1]);
            pageOriginObject[paramName] = paramValue;
        }
    }
}

E você deve configurá-lo da seguinte maneira, passando a pageOrigins e a input.message como parâmetros de entrada.

Neste caso, usei como retorno a própria pageOrigin, mas você pode ficar a vontade.

Agora a sua pageOrigin vai ter um retorno como o seguinte:

Retorno pageOring para URL fictício https://urldetest.com?title=Campaing&utm_source=Google
{
   "historic":{},
   "origin":"https://urldetest.com/",
   "fullOrigin":"https://urldetest.com?title=Campaing&utm_source=Google",
   "isError":false,
   "title":"Campaing",
   "utm_source":"Google"
}

Agora você já consegue obter tanto a URL, quanto outras informações passadas via Query String, incluindo informações sobre UTM do Google, através da própria variável pageOrigin.

Para o exemplo acima, caso eu quisesse saber o valor de utm_source, bastaria fazer no Builder:

{{[email protected]_source}}

Que retornaria o valor Google


Ufa! Era isso! :sweat_smile:
Espero que tenha ajudado vocês. Eu sei que a @KarennCris tava precisando, então já fica aí o pedido de feedback hehehe

9 curtidas

Mas olha se esse @BrunoC não merece uma Estrelinha por ter brilhado tanto?! :star2:

Irei testar em breve e retorno com o Feedback :wink: ! Mas tenho certeza que vai ser sucesso!!

Excited Season 4 GIF by Friends

2 curtidas

Bem legal, Bruno! Uma dúvida: essa lógica funciona também se o canal for Whatsapp? Vendo pelos scripts, sinto que só daria pra usar pela SDK mas queria confirmar contigo, porque tem bastante utilidade isso!

1 curtida

Obrigado @Matias_Campos_Helmei.

Então, pelo WhatsApp é um pouco diferente, visto que o canal não está numa página, né?

Mas, por exemplo, para o Contato Inteligente da própria Take Blip, usamos de uma forma que tem funcionado para a maioria dos casos:

A gente define uma mensagem pré-pronta pro Link do Click-to-WhatsApp para cada campanha, de forma que, baseada na mensagem que chegar, a gente consegue saber de qual link/campanha a pessoa clicou. Não é 100% funcional, pois a pessoa pode digitar outra mensagem e aí não vai funcionar.

Pra isso a gente fez uma “biblioteca” usando a funcionalidade de Recursos do Blip, onde a gente criou um JSON key - value, onde:

Key = a frase que definimos para cada campanha
Value = o link/campanha

Aí ficaria algo mais ou menos assim:

{ 
 "Olá. Sou da comunidade": "forum.blip.ai/", 
 "Olá. Estou interessado nisto": "https://www.take.net/"
} 

Se você quiser, eu posto a solução aqui também, com o Script modificado pra essa situação! :sweat_smile:


Foi lançada uma nova funcionalidade na API do WhatsApp para tratar de Anúncios do próprio Facebook (Click-to-WhatsApp), mas eu ainda preciso definir tudo e fazer uns testes. Posso prometer trazer essa solução na semana que vem, pode ser?

Sim, perfeito, foi o que eu imaginei. Não to sabendo dessa nova funcionalidade de Anúncios do próprio Facebook não, mas ansioso pela sua solução na semana que vem hahahah

Obrigado pelo esclarecimento :slight_smile:

2 curtidas

@Matias_Campos_Helmei , atrasei uns dias, mas trouxe.

Saca só:

1 curtida

Olá @BrunoC

Poderias postar o passo a passo de como fazer para recuperar a origem quando é pelo WhatsApp? Como nós realizamos campanhas principalmente pelo Google, que levam para nossas landing pages, gostaríamos de metrificar a quantidade de pessoas que converteram (clicaram no botão do WhatsApp no site) vs. o número de pessoas que realmente entrou em contato.

Será que conseguimos fazer isto?

Obrigado isso ajudou dentro do meu site, mas como eu consigo fazer isso dentro do builder. Para que seja uma informacao visivel no cartao do usuario para que meus atendentes possam saber em qual pagina o contato estava no momento da ação?