Use o e-mail como “User-Id” para acompanhamento Cross-Device no GA

Publicado em por caiquedourado

Use o email com md5 no userid do google analytics

UPDATE 04/10/2017:

O post anteriormente estava convertendo o e-mail em um Hash Md5. O Felipe Proto me chamou a atenção para um ponto importante:  O algorítimo mínimo que o Google exige para informações pessoalmente identificáveis é SHA256. Desse modo, atualizei o post para criptografar o e-mail em SHA256, e não mais em MD5. https://support.google.com/analytics/answer/6366371?hl=en

Agradeço ao Felipe!

 

Esse post surgiu a partir de uma dúvida do Rafael Silvério no grupo Web Analytics do WhatsApp

A dúvida foi a seguinte:

Alguém usa alguma integração para enviar/coletar o user id do ga?
Eu tenho praticamente 3 frentes de conversões (WordPress, RD e sistema próprio) e precisava “integrar” esses usuários. O meu problema é gerar o id único para um usuário que pode converter em todas esses 3 sistemas

Por padrão, o Google Analytics identifica os acessos ao seu site a partir de cada dispositivo como um usuário diferente

Ao habilitar o User-Id, você estará informando ao GA que o cliente Joãozinho que está acessando pelo celular é o mesmo Joãozinho que está acessando agora pelo desktop.

Com isso, terá uma maior compreensão sobre a jornada de compra no seu E-commerce

Ele te permitirá saber, quem, por exemplo iniciou a navegação em um celular, e finalizou uma compra no desktop (ou até mesmo 3, 4 dispositivos)

 

Para o recurso funcionar, você deverá informar o mesmo Id de usuário para os 2 acessos (desktop e celular)

Você pode usar por exemplo o ID do usuário da sua plataforma de E-commerce, ou do CRM, porém, a medida que mais plataformas são adicionadas, você não conseguirá ter um ID único entre as várias plataformas

Uma solução é utilizar o e-mail como ID do usuário. Na maioria dos cenários para o e-commerce, cada e-mail pertence a apenas um usuário.

Porém, temos um problema aqui: O Google Analytics não permite que uma informação pessoalmente identificável seja utilizada como User-Id, e o e-mail e uma informação (altamente) pessoalmente identificável

O que faremos então?

Usaremos o e-mail do visitante como User-Id, porém, iremos criptografá-lo como um Hash SHA256, desse modo, deixará de ser um dado pessoalmente identificável, e poderá ser usado como ID do usuário

Pegaremos o e-mail digitado pelo visitante em um formulário no seu site, em seguida armazenaremos esse e-mail na Local Storage do Browser, para que nos acessos futuros possamos setar o User-Id do visitante no código de acompanhamento do GA

Vamos ao trabalho!

 

Conteúdo

Código para captura do E-mail

Capture o e-mail do visitante

Você deverá capturar o e-mail do visitante assim que tiver acesso a ele

No exemplo abaixo estou capturando o e-mail do visitante assim que ele clica no botão cadastrar de um formulário de cadastro:

//Ao clicar em cadastrar, pegaremos o e-mail do visitante
$('#btCadastrar').click(function() {


	//A classe CSS do campo e-mail na página é 'inputEmail'. Substitua pela classe ou ID do input de e-mail do seu site    
	var emailVisitante = $('.inputEmail').val();
  

});

Transforme o e-mail em um Hash SHA256 (Criptografe-o!)

Transformaremos o e-mail do usuário em um Hash SHA256.

Esse processo irá criptografar o e-mail, para que não seja pessoalmente identificável.

Porque faremos isso? Porque o Google Analytics não permite que uma informação pessoalmente identificável seja utilizada como User-Id

//Função para criptografar em SHA256
function SHA256(r){function n(r,n){var t=(65535&r)+(65535&n),e=(r>>16)+(n>>16)+(t>>16);return e<<16|65535&t}function t(r,n){return r>>>n|r<<32-n}function e(r,n){return r>>>n}function o(r,n,t){return r&n^~r&t}function u(r,n,t){return r&n^r&t^n&t}function f(r){return t(r,2)^t(r,13)^t(r,22)}function a(r){return t(r,6)^t(r,11)^t(r,25)}function c(r){return t(r,7)^t(r,18)^e(r,3)}function i(r){return t(r,17)^t(r,19)^e(r,10)}function h(r,t){var e,h,C,g,A,d,v,S,l,m,y,w,b=new Array(1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298),p=new Array(1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225),B=new Array(64);r[t>>5]|=128<<24-t%32,r[(t+64>>9<<4)+15]=t;for(var l=0;l<r.length;l+=16){e=p[0],h=p[1],C=p[2],g=p[3],A=p[4],d=p[5],v=p[6],S=p[7];for(var m=0;64>m;m++)16>m?B[m]=r[m+l]:B[m]=n(n(n(i(B[m-2]),B[m-7]),c(B[m-15])),B[m-16]),y=n(n(n(n(S,a(A)),o(A,d,v)),b[m]),B[m]),w=n(f(e),u(e,h,C)),S=v,v=d,d=A,A=n(g,y),g=C,C=h,h=e,e=n(y,w);p[0]=n(e,p[0]),p[1]=n(h,p[1]),p[2]=n(C,p[2]),p[3]=n(g,p[3]),p[4]=n(A,p[4]),p[5]=n(d,p[5]),p[6]=n(v,p[6]),p[7]=n(S,p[7])}return p}function C(r){for(var n=Array(),t=(1<<d)-1,e=0;e<r.length*d;e+=d)n[e>>5]|=(r.charCodeAt(e/d)&t)<<24-e%32;return n}function g(r){r=r.replace(/\r\n/g,"\n");for(var n="",t=0;t<r.length;t++){var e=r.charCodeAt(t);128>e?n+=String.fromCharCode(e):e>127&&2048>e?(n+=String.fromCharCode(e>>6|192),n+=String.fromCharCode(63&e|128)):(n+=String.fromCharCode(e>>12|224),n+=String.fromCharCode(e>>6&63|128),n+=String.fromCharCode(63&e|128))}return n}function A(r){for(var n=v?"0123456789ABCDEF":"0123456789abcdef",t="",e=0;e<4*r.length;e++)t+=n.charAt(r[e>>2]>>8*(3-e%4)+4&15)+n.charAt(r[e>>2]>>8*(3-e%4)&15);return t}var d=8,v=0;return r=g(r),A(h(C(r),r.length*d))};

//Ao clicar em cadastrar, pegaremos o e-mail do visitante
$('#btCadastrar').click(function() {


	//A classe CSS do campo e-mail na página é 'inputEmail'. Substitua pela classe ou ID do input de e-mail do seu site    
	var emailVisitante = $('.inputEmail').val();
  
	//Transforma o e-mail do visitante em um Hash SHA256
	var emailCriptografado = SHA256(emailVisitante);

});

Armazene o Hash SHA256 no Local Storage do Browser

O Local Storage funciona de forma pareceida com um cookie.

Ele irá armazenar o nosso User-Id, para que nos acessos futuros possamos seta-lo no código de acompanhamento do GA

O código final para captura e armazenamento do e-mail do visitante é esse aqui:

//Função para criptografar em SHA256
function SHA256(r){function n(r,n){var t=(65535&r)+(65535&n),e=(r>>16)+(n>>16)+(t>>16);return e<<16|65535&t}function t(r,n){return r>>>n|r<<32-n}function e(r,n){return r>>>n}function o(r,n,t){return r&n^~r&t}function u(r,n,t){return r&n^r&t^n&t}function f(r){return t(r,2)^t(r,13)^t(r,22)}function a(r){return t(r,6)^t(r,11)^t(r,25)}function c(r){return t(r,7)^t(r,18)^e(r,3)}function i(r){return t(r,17)^t(r,19)^e(r,10)}function h(r,t){var e,h,C,g,A,d,v,S,l,m,y,w,b=new Array(1116352408,1899447441,3049323471,3921009573,961987163,1508970993,2453635748,2870763221,3624381080,310598401,607225278,1426881987,1925078388,2162078206,2614888103,3248222580,3835390401,4022224774,264347078,604807628,770255983,1249150122,1555081692,1996064986,2554220882,2821834349,2952996808,3210313671,3336571891,3584528711,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,2177026350,2456956037,2730485921,2820302411,3259730800,3345764771,3516065817,3600352804,4094571909,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,2227730452,2361852424,2428436474,2756734187,3204031479,3329325298),p=new Array(1779033703,3144134277,1013904242,2773480762,1359893119,2600822924,528734635,1541459225),B=new Array(64);r[t>>5]|=128<<24-t%32,r[(t+64>>9<<4)+15]=t;for(var l=0;l<r.length;l+=16){e=p[0],h=p[1],C=p[2],g=p[3],A=p[4],d=p[5],v=p[6],S=p[7];for(var m=0;64>m;m++)16>m?B[m]=r[m+l]:B[m]=n(n(n(i(B[m-2]),B[m-7]),c(B[m-15])),B[m-16]),y=n(n(n(n(S,a(A)),o(A,d,v)),b[m]),B[m]),w=n(f(e),u(e,h,C)),S=v,v=d,d=A,A=n(g,y),g=C,C=h,h=e,e=n(y,w);p[0]=n(e,p[0]),p[1]=n(h,p[1]),p[2]=n(C,p[2]),p[3]=n(g,p[3]),p[4]=n(A,p[4]),p[5]=n(d,p[5]),p[6]=n(v,p[6]),p[7]=n(S,p[7])}return p}function C(r){for(var n=Array(),t=(1<<d)-1,e=0;e<r.length*d;e+=d)n[e>>5]|=(r.charCodeAt(e/d)&t)<<24-e%32;return n}function g(r){r=r.replace(/\r\n/g,"\n");for(var n="",t=0;t<r.length;t++){var e=r.charCodeAt(t);128>e?n+=String.fromCharCode(e):e>127&&2048>e?(n+=String.fromCharCode(e>>6|192),n+=String.fromCharCode(63&e|128)):(n+=String.fromCharCode(e>>12|224),n+=String.fromCharCode(e>>6&63|128),n+=String.fromCharCode(63&e|128))}return n}function A(r){for(var n=v?"0123456789ABCDEF":"0123456789abcdef",t="",e=0;e<4*r.length;e++)t+=n.charAt(r[e>>2]>>8*(3-e%4)+4&15)+n.charAt(r[e>>2]>>8*(3-e%4)&15);return t}var d=8,v=0;return r=g(r),A(h(C(r),r.length*d))};

//Ao clicar em cadastrar, pegaremos o e-mail do visitante
$('#btCadastrar').click(function() {


	//A classe CSS do campo e-mail na página é 'inputEmail'. Substitua pela classe ou ID do input de e-mail do seu site    
	var emailVisitante = $('.inputEmail').val();
  
	//Transforma o e-mail do visitante em um Hash SHA256
	var emailCriptografado = SHA256(emailVisitante);

	//Verificamos se o browser oferece suporte ao LocalStorage
	if (window.localStorage) {

		//Armazenamos o e-mail na LocalStorage, para consulta posterior
		localStorage.setItem('ga:userId', emailCriptografado);
	}

});

 

Código de acompanhamento

Configure o User-Id no código de acompanhamento

Agora que você já armazenou o e-mail do visitante, é hora de resgatá-lo para envio ao GA, por meio do código de acompanhamento

O seu código de Tracking ficará assim:

//Mude o seu ID do Google Analytics
ga('create', 'UA-XXXXXXXXX-X', 'auto');

//Verifica se o User-Id está armazenado na LocalStorage
if (window.localStorage && localStorage.getItem('ga:userId') != null) {

	//Seta o User-ID no GA
	ga('set', 'userId', localStorage.getItem('ga:userId'));
}

ga('send', 'pageview');

 

Criar uma vista de relatórios do User-ID

Os dados do User-ID só podem aparecer em uma vista de User-ID dedicada. Por isso, será preciso criar uma nova View, e ativar o acompanhamento de User-ID

1 – Clique em Criar.
2 – Insira um nome para a Vista de relatórios.
3 – Convém incluir o termo “User ID” no nome para ajudar a lembrar você de que essa é uma vista de User-ID especial.
4 – Selecione um Fuso horário do relatório.
5 – Em Mostrar relatórios de User-ID, defina o seletor como ATIVADO.
6 – Clique em Criar.

Não é possível converter vistas de User-ID em vistas padrão, da mesma forma que não é possível converter vistas padrão em vistas de User ID. Somente novas vistas adicionadas a uma propriedade ativada de User-ID podem ser designadas como vistas de User-ID.

Todos os relatórios de uma vista de User-ID exibem dados de sessões com um User ID atribuído, e os dados relacionados são enviados para o Google Analytics. Use uma vista diferente para ver os dados de sessões em que um User ID não é enviado para o Google Analytics.

Visualize os relatórios

Os relatórios estarão disponíveis em: Público > Todos os dispositivos

Use o email com md5 no userid do google analytics

Para mais informações, acesse: Ajuda do Google Analytics: Configurar o User-ID

https://support.google.com/analytics/answer/3123666?hl=pt-BR

 

E aí?

O que está esperando para testar?

Você conhece alguém que adoraria receber essas dicas?

Então faça um favor para ela (e para mim) e compartilhe essa dica.

Você pode compartilhá-lo no Facebook, Twitter, ou até mesmo copiar a URL desse artigo e enviar para quem precisa dele.

E, para finalizar, eu adoraria saber a sua opinião.

Deixe um comentário logo abaixo sobre o que você mais gostou, ou sobre alguma dica extra que você deseja compartilhar conosco ou até mesmo alguma crítica sobre este artigo.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *