<br/>

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.


<br/>

## Criando a tag do Chameleon dentro do Google Tag Manager


<br/>

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:


<br/>

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

```js
<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>
```

<br/>

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.


<br/>

![Captura de tela 2021-07-20 165400.png](https://imagens.metricasboss.com.br/Captura_de_tela_2021_07_20_165400_f9a90a29ee.png)
 
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:
![Captura de tela 2021-07-20 164642.png](https://imagens.metricasboss.com.br/Captura_de_tela_2021_07_20_164642_4e1814f5e0.png)


<br/>

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.


<br/>

![Captura de tela 2021-07-20 165026.png](https://imagens.metricasboss.com.br/Captura_de_tela_2021_07_20_165026_b4f934d78e.png)


<br/>

## Identificando usuários dentro do Chameleon


<br/>


Na documentação que você pode acessar no [site deles](https://developers.trychameleon.com/#/js/listen) 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](/artigos/como-implementar-informacoes-personalizadas-na-camada-de-dados-do-google-tag-manager) 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:


<br/>

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.

<br/>


![Captura de Tela 2021-07-20 às 19.26.54.png](https://imagens.metricasboss.com.br/Captura_de_Tela_2021_07_20_as_19_26_54_8c7e689081.png)

<br/>

 
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:

<br/>


```js
<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>
```


<br/>

Agora é só salvar a tag e partir para o abraço clica [aqui](/artigos/como-escutar-os-eventos-do-chameleon-atraves-do-data-layer-no-google-tag-manager), para aprender a como escutar os eventos do Chameleon através do dataLayer.

<br/>

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

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

Quer aprender como implementar o Chameleon no Google Tag Manager? Confira!

thumbnail_feature_1_43c32ba1b7.jpeg

feature_1_43c32ba1b7.jpeg

Como instalar o Chameleon via Google Tag Manager

A Métricas Boss é uma agência de Web Analytics e usabilidade. Conte com uma empresa certificada Google Analytics para sua gestão de web analytics.

O que você irá aprender?