Como instalar o Chameleon via Google Tag Manager

O que você irá aprender?


    Conhecemos o Chameleon a pouco tempo em uma implementação para o cliente, não conhecia a ferramenta mas no nosso processo de auditoria um cliente nos solicitou a migração dessa ferramenta para dentro do Google Tag Manager.

    Aumente a conversão com tours de produtos, aumente a adoção com dicas de ferramentas, obtenha feedback do usuário com pesquisas e ofereça orientação com listas de verificação.


    Criando a tag do Chameleon dentro do Google Tag Manager


    A base da implementação gira em torno da api de eventos do Chameleon utilizando o seguinte método: "chmln.on". Para mensurar os eventos do tour utilizamos a escuta em cima do "tour:event". Os eventos vinculados a essa escuta ficam limitados a somente interações em cima do Pesquisas e eventos do Tour onde pega os seguintes comportamentos:


    Por padrão a instalação do Chameleon é através de uma tag que dispara em todas as páginas:

    <script>
/* Chameleon script precisamos do chameleonSecretKey dentro da configuração do chameleon */
!function(d,w){var t="{{chameleonSecretKey}}",c="chmln",m="identify alias track clear set show on off custom help _data".split(" "),i=d.createElement("script");if(w[c]||(w[c]={}),!w[c].root){w[c].accountToken=t,w[c].location=w.location.href.toString(),w[c].now=new Date;for(var s=0;s<m.length;s++){!function(){var t=w[c][m[s]+"_a"]=[];w[c][m[s]]=function(){t.push(arguments);};}();}i.src="https://fast.trychameleon.com/messo/"+t+"/messo.min.js",i.async=!0,d.head.appendChild(i);}}(document,window);
</script>

    Para criar essa tag dentro do seu Google Tag Manager siga as seguintes instruções:

    1. Crie uma tag de html personalizado;
    2. Cole o código acima;
    3. Defina o acionador como "Todas as Páginas" e salve a tag.

    Após a criação da tag precisamos criar uma variável do tipo constante para armazenar a secret key de instalação solicitada pelo Chameleon:


    1. Crie uma variável com o nome "chameleonSecretKey";
    2. Defina a variável com o tipo Permanente;
    3. Copie o valor da secret key na página do Chameleon;
    4. Cole no campo valor da tag do Google Tag Manager.


    Identificando usuários dentro do Chameleon


    Na documentação que você pode acessar no site deles temos como requisito a identificação do usuário através do UID. Pelo que eles falam na documentação essa identificação é obrigatória para funcionamento exibição dos recursos do Chameleon dentro do seu site.

    Tendo em vista esse ponto para implementação é importante ressaltar que para instalação do Chameleon via Google Tag Manager você precisar ter em sua camada de dados disparando em todas as páginas o seu userId. Antes do do google tag manager carregar o evento padrão "Container Loaded" se não não vai funcionar :D

    Para não deixar vocês desamparados você pode ver aqui como implementar informações na camada de dados.

    Beleza, imaginando que você já tem dentro da sua camada de dados a propriedade "userId". Vamos importar essa variável para dentro do Google Tag Manager:


    1. Crie uma variável com o nome "userId";
    2. Defina o tipo "Variável da Camada de dados";
    3. Defina o valor da variável para "userId" e salve a tag.


    Agora precisamos adiciona dentro da TAG que criamos do Chameleon para disparar em todas as páginas adicionar o uso do método "chmln.identify", passando o userId. Ficaria assim o código:


    <script>
/* Chameleon script */
!function(d,w){var t="{{chameleonSecretKey}}",c="chmln",m="identify alias track clear set show on off custom help _data".split(" "),i=d.createElement("script");if(w[c]||(w[c]={}),!w[c].root){w[c].accountToken=t,w[c].location=w.location.href.toString(),w[c].now=new Date;for(var s=0;s<m.length;s++){!function(){var t=w[c][m[s]+"_a"]=[];w[c][m[s]]=function(){t.push(arguments);};}();}i.src="https://fast.trychameleon.com/messo/"+t+"/messo.min.js",i.async=!0,d.head.appendChild(i);}}(document,window);
  /* Identificando os usuários */
  chmln.identify({uid: {{userId}}})
</script>

    Agora é só salvar a tag e partir para o abraço clica aqui, para aprender a como escutar os eventos do Chameleon através do dataLayer.


    Dúvidas? Comentários? Sugestões?

    Mande um e-mail para gente contato@metricasboss.com.br, até a próxima 😄

    Artigos Relacionados

    WhatsApp