O Google Tag Manager tem como finalidade simplificar como os scripts e códigos personalizados são inseridos e gerenciados em seu site. Ao invés de fazer as inserções e manutenções diretamente no código fonte de seu site, é possível incluir apenas o script do Google Tag Manager e usar o painel administrativo da ferramenta para adicionar e gerenciar todos os scripts do seu site.

O link abaixo (oficial do Google) contém informações adicionais:
https://www.google.com/intl/pt-BR/tagmanager/

Este artigo tem por finalidade explicar como o Google Tag Manager pode ser usado para capturar informações de um formulário do seu site para gerar Leads no Ploomes. Similarmente você pode usar a técnica para fazer qualquer inserção no Ploomes, como Clientes, Contatos, Negócios entre outros, mas vamos focar nosso exemplo nos Leads que é o pedido mais recorrente.

Primeiramente é necessário criar uma nova TAG, clicando no botão vermelho como da imagem a seguir:

Então é preciso escolher o tipo de TAG. Usaremos "HTML Customizado".

É aqui que vamos inserir o código da integração. Este código é um script que em nada difere de um script que você colocaria no seu site direto no código fonte. A imagem abaixo mostra um trecho de exemplo.

O próximo passo é escolher o acionador, ou seja, o que fará com que a TAG recém-criada seja acionada. O ideal é utilizar o evento "Envio de formulário". Isso garante que sempre que um formulário seja enviado, a TAG será acionada.

Nesta etapa é possível escolher quais formulários dispararão a TAG. Caso nenhum seja especificado, isso implicará que qualquer envio de formulário pelo visitante do seu site fará com que a TAG seja acionada.

Geralmente as chamadas https nos scripts (Javascript) são feitas via AJAX. Para possibilitar isso, em nosso exemplo criamos uma TAG adicional do tipo "HTML" customizado que faz o carregamento do AJAX nas páginas onde ele será requisitado, ou seja, basicamente onde existem formulários integrados com o Ploomes.

Abaixo existe um exemplo de código para fazer o carregamento do AJAX. Use-o e modifique-o conforme necessário:
__________________________________

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {
    var script = document.createElement('script');
    script.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js';
    document.getElementsByTagName('head')[0].appendChild(script);
   
    var done = false;
   
    script.onload = handleLoad;
    script.onreadystatechange = handleReadyStateChange;
 
    function handleLoad() {
      if (!done) {
        done = true;
        runNoConflict();
      }
     }

    function handleReadyStateChange() {
        var state;

        if (!done) {
            state = script.readyState;
            if (state === "complete") {
                handleLoad();
            }
        }
    }
   
    function runNoConflict() {
      if (window.jQuery) {      
      window.$ = jQuery.noConflict(true);      
      }
    }
 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
</script>

__________________________________

Para este exemplo, duas TAGs foram criadas como mostrada a seguir:

Uma é o código da integração com o Ploomes em si, que captura os dados do formulário e envia para a API do Ploomes, o outro é o código que permite que o AJAX seja carregado na sua página.

Como explicado no início do artigo, o GTM permite que scripts sejam adicionados e gerenciados externamente ao seu site, facilitando a manutenção uma vez que o código-fonte do seu site não precisa ser alterado. Os scripts usados em nada diferem de scripts que você escreveria normalmente em seu site, sendo assim, o artigo abaixo, que explica como integrar seu site com o Ploomes via programação direta, pode ser útil:
https://suporte.ploomes.com/como-fazer/como-integrar-o-formulario-de-contato-de-seu-site-com-o-ploomes

Para demais dúvidas sobre a API do Ploomes, nossa equipe de suporte estará sempre à disposição para ajudar.

Encontrou sua resposta?