💡 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 {{pageOrigin@origin}}, 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:

{{pageOrigin@utm_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

8 curtidas

Mas olha se esse @Bruno 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á @Bruno

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?