Usar o Gerenciador de tags do Google para transmitir valores às tags do Floodlight

Ao implementar tags do Floodlight no Gerenciador de tags do Google, informe valores do site às tags para capturar parâmetros-chave de marketing, que poderão ser usados posteriormente para criar públicos-alvo ou gerar relatórios sobre métricas personalizadas específicas.

O dataLayer é um objeto JavaScript no Gerenciador de tags do Google que oferece uma interface para transmitir valores necessários a macros que poderão ser usadas posteriormente para preencher suas tags designadas. Este artigo explica como usar o dataLayer para se comunicar especificamente com o Campaign Manager 360 e transmitir os valores necessários às suas tags do Floodlight. Para obter explicações mais aprofundadas, acesse a página do Google Developers nas implementações do Gerenciador de tags do Google para a Web.

Tradicionalmente, as tags do Floodlight recém-criadas contêm marcadores que os desenvolvedores da Web substituem pelos valores necessários no momento em que a tag é chamada. Veja esta amostra de fragmento:

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
…

Os elementos em negrito (item, quantity, price, postage e seller) devem ser substituídos pelos valores reais que você pretende transmitir à tag do Floodlight. Em geral, é possível substituí-los usando o sistema de gerenciamento de conteúdo ou pedir que sua equipe de desenvolvedores os programe.

Para configurar que o Gerenciador de tags do Google use variáveis para inserir valores quando as tags são chamadas, siga as etapas abaixo. Para estas etapas, considere que sua conta do Campaign Manager 360 já está conectada à conta relevante do Gerenciador de tags do Google e que é possível enviar tags ao Gerenciador de tags do Google e aprová-las. Siga normalmente o processo de testes e publicação após fazer alterações no Gerenciador de tags do Google.

Configuração

1. No Gerenciador de tags do Google, crie macros para cada valor que precisa ser informado.

   1. Dê um nome descritivo à macro. Por exemplo, se você capturar o nome do produto pedido, o nome da macro pode ser "nome_do_produto".

   2. Defina o tipo de macro como Variável do DataLayer .

   3. Indique o nome da variável como ela será declarada na sua chamada do DataLayer.

   4. Para o número da versão, selecione a Versão 2 .

2. No Campaign Manager 360, crie sua tag do Floodlight e ative suas variáveis u padrão.

3. Envie a tag do Floodlight ao Gerenciador de tags do Google e aprove-a.

4. Edite a tag no Gerenciador de tags do Google e atribua as macros adequadas às diversas variáveis u. Por exemplo, se você quer capturar o nome do produto na variável u “u1”, siga as etapas a seguir:

   1. Vá para a seção Variáveis personalizadas.

   2. Clique na lista suspensa e selecione “u1”.

   3. Clique no ícone da macro ao lado da caixa de texto e escolha a macro “{{product_name}}”, conforme criada na etapa 1. As chaves “{{}}” são usadas para indicar que essa é uma macro e não o texto específico “product_name”.

   4. Repita o processo para todas as outras macros e variáveis u que você quer capturar.

Implementação

Existem várias maneiras diferentes de implementar o DataLayer que dependem das situações a seguir.

Método 1: você tem uma página de confirmação existente que contém todos os valores necessários

Alguns sites usam um sistema de gerenciamento de conteúdo (CMS, na sigla em inglês) ou outro método similar para criar páginas à medida que são solicitadas. O CMS pode informar valores que foram definidos em uma página anterior ou que são provenientes de um banco de dados de back-end.

Nesses casos, é possível:

1. definir uma regra para disparar a tag do Floodlight quando o URL for idêntico à página de confirmação;

2. inserir uma definição de dataLayer no site antes da tag do Gerenciador de tags do Google, como no exemplo abaixo. Substitua todos os elementos entre colchetes pelos valores que você quer transmitir, considerando que todas as suas macros estejam nomeadas com o sufixo _value.

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   Exemplo de tag preenchida:

   <script>
    var dataLayer = [{“item_value”:“great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

Quando o Gerenciador de tags do Google aciona as tags do Floodlight, as macros especificadas são substituídas pelos valores especificados na definição do dataLayer.

Método 2: suas páginas de confirmação e finalização de compra têm o mesmo URL ou a página usa AJAX (método JavaScript)

1. Crie uma regra para disparar a tag após um evento. Por exemplo, é possível criar um evento chamado "purchase_complete".

   Nome da regra: fire_floodlight_tag
   Condições: {{event}} equals purchase_complete
   Tags com essa regra: nenhuma

2. Use o JavaScript para acionar o evento e transmitir todos os dados necessários à tag do Floodlight:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   Exemplo de chamada do JavaScript preenchida:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:“great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   O valor do evento adicionado (acima, em negrito) é usado para sinalizar o evento utilizado pelo Gerenciador de tags do Google para disparar a tag do Floodlight.

Método 3: suas páginas de confirmação e finalização de compra têm o mesmo URL ou a página usa AJAX (método de acompanhamento automático de eventos)

O acompanhamento automático de eventos usa listeners de evento, um tipo especial de tag que fica na página à espera de eventos de usuários. Quando os eventos ocorrem, ela cria um evento programático que pode ser usado para acionar outras tags. Os eventos de usuários podem incluir ações, como o clique de um botão ou de um link, o envio de um formulário ou um timer atingindo um intervalo definido.

O exemplo a seguir descreve como usar um listener de clique de link para disparar uma tag. Nesse cenário, o evento ocorre quando o usuário seleciona um produto clicando em uma lista ou selecionando-o em um menu suspenso, sendo redirecionado em seguida a uma página para fazer o download de uma brochura em PDF. Essa página terá um link para a brochura, e é essa ação de clicar no link que desejamos rastrear como uma conversão.

Acesse sua conta do Gerenciador de tags do Google e execute as seguintes ações:

1. Configure um listener de clique de link.

   1. Escolha Nova tag.

   2. Digite um nome descritivo, como "downloadLinkListener" (esse pode ser o nome usado no link para o download da brochura em PDF).

   3. Na lista suspensa "Tipo de tag", passe o cursor sobre a seção "Listener de eventos" e, em seguida, selecione Listener de clique de link na lista suspensa expandida à direita.

   4. Se a função do link for levar o visitante a uma página diferente, verifique se Aguardar tags está marcado. Não altere o campo "Máximo tempo de espera" a menos que você tenha um motivo específico para isso, por exemplo, caso você esteja disparando um grande número de tags e deseje garantir que todas elas sejam executadas.

2. Configure uma macro para capturar o URL quando o link for clicado.

   1. Escolha Nova macro.

   2. Digite um nome descritivo como “linkURL”.

   3. Escolha Variável do evento automático na lista suspensa "Tipo de macro".

   4. Escolha URL do elemento na lista suspensa "Tipo de variável". Essa opção funcionará somente com links de formato HREF padrão, ao contrário dos links JavaScript.

3. Configure uma macro para capturar o produto selecionado pelo usuário. Neste exemplo, vamos considerar que o nome do produto está listado em um menu suspenso e a tag de ID no HTML do menu é "productName". Consulte sua equipe de desenvolvedores da Web caso precise de ajuda para encontrar o ID.

   1. Escolha Nova macro.

   2. Digite um nome descritivo, como "selectedProduct".

   3. Escolha um Elemento DOM na lista suspensa “Tipo de macro”.

   4. No campo "Código do elemento", digite o código do campo. Neste caso, o código será "productName" (sem as aspas).

   5. Digite o valor no campo “Nome do atributo”, e o conteúdo do valor será recuperado quando a lista suspensa for selecionada.

4. Configure uma regra para disparar a tag do listener de evento.

   1. Escolha Nova regra.

   2. Digite um nome descritivo como "downloadLinkClicked".

   3. Em "Condições", defina a primeira lista suspensa como {{event}}, a segunda como equals e a caixa de texto como gtm.linkClick.

   4. Clique no sinal de adição (+).

   5. Defina a primeira lista suspensa na nova linha para a macro {{linkURL}} que você criou na etapa 2. Depois, defina a segunda como equals e a caixa de texto para o URL do PDF do qual será feito o download (por exemplo, http://www.site.com/pdfs/brochure1.pdf).

5. Configure uma tag do Floodlight para capturar a conversão. Caso você já tenha criado ou compartilhado essa tag a partir do Campaign Manager 360, pule para a etapa E.

   1. Escolha Nova tag.

   2. Digite um nome descritivo, como "brochureDownloadTag".

   3. Escolha o tipo apropriado de tag com base nas suas necessidades, como "Contador do Floodlight".

   4. Defina "ID do anunciante", "Tag do grupo" e "String da tag de atividade" com os valores da tag de identificação e configure os outros valores padrão das tags conforme necessário.

   5. Na lista suspensa em "Variáveis personalizadas", escolha "u1" ou outra variável personalizada que você deseje usar para fins de rastreamento.

   6. Clique no botão Macro ao lado da caixa de texto e escolha a macro {{selectedProduct}} que você criou na etapa 3.

6. Teste e publique conforme necessário.