

Como já falamos nesse post a instalação de pixels de afiliados não deveria ser algo difícil. Com isso, esse post inicia uma série que vai mostrar, na prática, como funciona a instalação de pixels de afiliados dos mais utilizados no Brasil.

Iniciaremos a série utilizando a Afilio, tentando trazer o máximo de informações para facilitar a instalação.

E agora, vamos parar de enrolação e partir para a ação! ;)


## … Mas antes: Instalando o Affly



No próprio Affly já existe um [Guia de Implementação no Google Tag Manager](http://affly.com.br/como-instalar-o-affly-via-google-tag-manager.html?utm_source=metricasboss&utm_medium=blog). Antes de ler esse post, é essencial que você já tenha o Affly instalado em seu site. Tendo em vista que você já instalou o Affly, vamos ao primeiro passo.


## Importante ressaltar



Nesse post, iremos instalar o pixel de conversão, que deverá ser utilizado somente quando uma conversão seja atribuída ao afiliado em questão, beleza?

## Shut up and show me the code!
### Criando variáveis
#### afilioPid


1º No painel principal do google tag manager, clique em variáveis.

![como-instalar-o-pixel-da-aflilio-usando-o-affly-1.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_1_9a15b2b9da.png)


2º Clique em “NOVA” no bloco de variáveis definidas pelo usuário

![como-instalar-o-pixel-da-aflilio-usando-o-affly-2.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_2_77017bd8a8.png)


**3º Insira a variável permanente afilioPid e adicione como valor o pid gerado pela afilio.**
![como-instalar-o-pixel-da-aflilio-usando-o-affly-3.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_3_a38009d4da.png)


## Importando variáveis do datalayer


Para essa parte da instalação será necessário que sua tag de comércio eletrônico básica esteja instalada, caso você não esteja com ela instalada, verifique esse [post](https://developers.google.com/tag-manager/devguide#datalayer) do google que ajudará seu desenvolvedor a implementa-la.


## TransactionId


**1º Clique em “NOVA” no bloco de variáveis definidas pelo usuário.**

![como-instalar-o-pixel-da-aflilio-usando-o-affly-2 (1).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_2_1_be736fea32.png)

** 2º Insira a váriavel da camada de dados transactionId como nome e valor da mesma.**


![como-instalar-o-pixel-da-aflilio-usando-o-affly-12.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_12_7210c69647.png)


## TransactionTotal


**1º Clique em “NOVA” no bloco de variáveis definidas pelo usuário.**


![1como-instalar-o-pixel-da-aflilio-usando-o-affly-2 (2).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/1como_instalar_o_pixel_da_aflilio_usando_o_affly_2_2_6727272f43.png)


2º Insira a variável da camada de dados transactionTotal como nome e valor da mesma.


![como-instalar-o-pixel-da-aflilio-usando-o-affly-5.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_5_492230b171.png)

## transactionShipping


1º Clique em “NOVA” no bloco de variáveis definidas pelo usuário.


![como-instalar-o-pixel-da-aflilio-usando-o-affly-2 (2).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_2_2_866a0a1a02.png)



2º Insira a váriavel da camada de dados transactionShipping como nome e valor da mesma.



![como-instalar-o-pixel-da-aflilio-usando-o-affly-4.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_4_c226e80a30.png)



## Peculiaridades da Afilio



No caso da implementação do pixel da afilio, é necessário fazer uma pequena alteração no order_price que é passado no pixel. Devido a uma configuração deles é preciso formatar a variável veja como fazer abaixo:


## transactionTotalWithoutShippingAfilio


1º Clique em “NOVA” no bloco de variáveis definidas pelo usuário.


![como-instalar-o-pixel-da-aflilio-usando-o-affly-2 (3).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_2_3_08eee7cf3d.png)


function(){
    var transactionTotalWithoutShippingAfilio = {{ transactionTotal }} - {{transactionShipping}};
    return transactionTotalWithoutShippingAfilio;
}



![como-instalar-o-pixel-da-aflilio-usando-o-affly-6.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_6_30c702296c.png)


Essa variável personalizada vai passar para o pixel o valor total da transação sem o valor do frete, formatando o valor do jeito que a especificação da Afilio pede.


HORA DO SHOW 😎

Bem no ultimo passo iremos implementar o pixel da afilio é importante ressaltar que o mesmo deverá ser disparado quando a conversão seja ela venda, ou lead for completada pelo usuário, então fique atento ao trigger.



## PIXEL - AFILIO



![como-instalar-o-pixel-da-aflilio-usando-o-affly-7 (1).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_7_1_e436955a6f.png)




2º Clique em “NOVA”.

![como-instalar-o-pixel-da-aflilio-usando-o-affly-8.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_8_0b61913171.png)


3º Adicione a tag do tipo imagem personalizada e copie e cole a url abaixo na “URL da imagem”. A url do nosso pixel vai ficar da seguinte maneira:
 


 //secure.afilio.com.br/sale.php?pid={{afilioPid}}&order_id={{transactionId}}&order_price={{transactionWithoutShippingAfilio}}



![como-instalar-o-pixel-da-aflilio-usando-o-affly-9.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_9_019f2b423d.png)


## Ta bom, mas como fica meu acionador nesse caso?


Esse passo é crucial e é fundamental que você tenha feito a instalação do affly corretamente, caso não aconselho que você de uma olhada no guia de implementação no google tag manager do affly e instale.

Como você agora está com tudo instalado certinho vamos ao acionador. Vamos imaginar que a sua url de finalização de pedido seja thank-you.html, logo é só criar um acionador para exibição de página que o mesmo será igual a thank-you.html certo? ERRADO, precisamos condicionar esse acionador ao disparo somente quando a origem for afilio certo? Veja abaixo:


## Criando affly_origin



Essa variável é extremamente importante para o funcionamento do seu pixel, ela que irá unir a conversão do usuário com a origem que o trouxe para o seu site.

1º No painel principal do google tag manager, clique em variáveis;


![1omo-instalar-o-pixel-da-aflilio-usando-o-affly-1 (2).png](https://s3.amazonaws.com/imagens.metricasboss.com.br/1omo_instalar_o_pixel_da_aflilio_usando_o_affly_1_2_c0bf5c805c.png)



2º Clique em “NOVA” no bloco de variáveis definidas pelo usuário;

![como-instalar-o-pixel-da-aflilio-usando-o-affly-2 (4) - Copia.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_2_4_Copia_31d472f96e.png)

3º Adicione a variável com o nome affly_origin do tipo “Cookie primário” que tem o valor affly_origin;


(https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_10_921cae0733.png)
![como-instalar-o-pixel-da-aflilio-usando-o-affly-13.png]


Com isso o nosso acionador vai ficar da seguinte forma:


![como-instalar-o-pixel-da-aflilio-usando-o-affly-10.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_13_bb28177b77.png)

E o nosso pixel vai ficar da seguinte forma:


![como-instalar-o-pixel-da-aflilio-usando-o-affly-11.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/como_instalar_o_pixel_da_aflilio_usando_o_affly_11_2e21d829a2.png)



Agora é só salvar e publicar :D

### BONUS


Para os preguiçosos que pularam para o final do post e os guerreiros que chegaram aqui vou deixar o link do json para importação do container que tem toda essa instalação :D


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



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


A instalação de pixel da afilio não deveria ser dificil, veja o guia de como instalar o pixel da afilio usando o GTM + Affly <3

thumbnail_como-instalar-o-pixel-da-aflilio-usando-o-affly-feature.png

como-instalar-o-pixel-da-aflilio-usando-o-affly-feature.png

Como instalar o pixel de conversão da Afilio usando o Affly

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?