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

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. 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 - criando variaveis

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

como instalar o pixel da aflilio usando o affly - criando variaveis

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 - criando variaveis

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 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 - criando variaveis

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 - criando variaveis

transactionTotal

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

como instalar o pixel da aflilio usando o affly - criando variaveis

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

como instalar o pixel da aflilio usando o affly - criando variaveis

transactionShipping

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

como instalar o pixel da aflilio usando o affly - criando variaveis

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 - criando variaveis

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 - criando variaveis

2º Insira a váriavel de javascript personalizado, copie e cole o código apresentado abaixo:

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

como instalar o pixel da aflilio usando o affly - criando variaveis

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 P@!@#@$%!

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

1º No painel lateral do seu google tag manager clique em TAGS.

como instalar o pixel da aflilio usando o affly - criando o pixel

2º Clique em “NOVA”.

como instalar o pixel da aflilio usando o affly - criando o pixel

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 - criando o pixel



Ta bom, mas como fica meu acionador nesse caso?

Esse passo é crucial e é fundamental que voce tenha feito a instalação do affly corretamente, caso não aconselho que voce 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;

como instalar o pixel da aflilio usando o affly - criando variaveis

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

como instalar o pixel da aflilio usando o affly - criando variaveis

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

como instalar o pixel da aflilio usando o affly - criando variaveis

Com isso o nosso acionador vai ficar da seguinte forma:

como instalar o pixel da aflilio usando o affly - criando o pixel

E o nosso pixel vai ficar da seguinte forma:

como instalar o pixel da aflilio usando o affly - criando o pixel

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