Search
Close this search box.

Enviar fuentes de tráfico con contact form 7

Índice del artículo

Muchas veces a nivel medición de datos, por el motivo que sea, necesitamos profundizar mucho más sobre la fuente de procedencia de esos datos y que se envíen por email.

Generalmente esto nos llega y podemos guardarlo en una base de datos externa o conectarlo con algún tipo de gestor de contactos y/o clientes para tener un mejor seguimiento sobre la fuente de procedencia original del contacto.

Para realizar esto que os comento, he seguido los pasos de este post:

El artículo está en inglés y eliminé la parte del seguimiento de la página del formulario y la conversión, pero agregué el seguimiento del Client ID que puede ser más útil.

Estos cambios están reflejados en el segundo paso de este artículo

Instalación

Voy a explicar la instalación, para aquellos que no entiendan el código y variaré ligeramente el código para que puedas extraer:

  • Client ID: aquí en principio no vas a tener problema siempre que se ejecute el script de analytics
  • Campaña: únicamente con utm_campaign.
  • Medio: siempre a excepción de tráfico directo. Se puede modificar con utm_medium.
  • Fuente: siempre a excepción de tráfico directo. Se puede modificar con utm_source.
  • Contenido: únicamente con utm_content.
  • Término: únicamente con utm_keyword.

Copias el siguiente script y lo guardar en una nueva etiqueta de Google Tag Manager de HTML personalizado con el nombre “GA Custom Cookie Script” que se ejecutará en todas las páginas.

Antes de guardar deberás modificar “align.ly” en el código, por el nombre de tu dominio, tal que así “queseo.es”.

<script>
//
//				    .ooooo.          ooo. .oo.     .ooooo.    oooo d8b
//				   d88' `88b         `888P"Y88b   d88' `88b   `888""8P
//				   888888888  88888   888   888   888   888    888
//				   888        88888   888   888   888   888    888       
//				   `"88888"          o888o o888o  `Y8bod8P'   d888b      
//

/***************************************************************************************************
Author: Allaedin Ezzedin
Company: E-Nor Inc
Last Updated: October 14, 2014
/***************************************************************************************************/

/*******************  Google Analytics Legacy Tracking Code  *******************/

// List all top-level domains that are belong to your organization for cross domain tracking
var domains = ["align.ly"]; 
var source, medium, term, content,campaign, session_count, pageview_count;

var hostname = document.location.hostname;
hostname = hostname.match(/(([^.\/]+\.[^.\/]{2,3}\.[^.\/]{2})|(([^.\/]+\.)[^.\/]{2,4}))(\/.*)?$/)[1];
hostname = hostname.toLowerCase();

var _gaq = _gaq || [];
// DON'T UPDATE THE GA ACCOUNT ID - Your site should be tracked using Universal Analytics outside this JavaScript code
_gaq.push(['sfga._setAccount', 'UA-XXXYYYZZZ-1']);
_gaq.push(['sfga._setDomainName', hostname]);
_gaq.push(['sfga._setAllowLinker', true]);
_gaq.push(['sfga._trackPageview']);
_gaq.push(function(){get_campaign_info();});

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

/*******************  Set Up Cross Domain Tracking  *******************/

var arr = document.getElementsByTagName("a");

 for(i=0; i < arr.length; i++)
 {
    var tmp = arr[i].getAttribute("onclick");
	var doname ="";
	try
 	 {
  		doname = arr[i].hostname.match(/(([^.\/]+\.[^.\/]{2,3}\.[^.\/]{2})|(([^.\/]+\.)[^.\/]{2,4}))(\/.*)?$/)[1];
		doname = doname.toLowerCase();
 	 }
	catch(err)
 	 {
	 	doname = arr[i].href;
	 }
	 
	if (tmp != null) 
		{
			tmp = String(tmp);
			if (tmp.indexOf('_gasf.push') > -1) 
				continue;
		}
	 
		for (var j = 0; j < domains.length; j++) 
		{
			//Auto-Linker
			if ( doname != hostname && doname.indexOf(domains[j]) != -1 && doname.indexOf("mailto:") == -1)
			{
				
				arr[i].setAttribute("onclick",""+((tmp != null) ? tmp + '; ' : '')+"_gaq.push(['sfga._link', '"+arr[i].href+"']); return false;");
			}
		}
 }
 
/*******************  Set Up Cross Domain Tracking  *******************/

//This function extracts the "_utma", "_utmb", "_utmc" and "_utmz" strings from the cookies set by Google Analytics
//This function was originally written by the Google Analytics team (urchin.js)

function get_campaign_info()
{
	var utma = get_utm_value(document.cookie, '__utma=', ';');
	var utmb = get_utm_value(document.cookie, '__utmb=', ';');
	var utmc = get_utm_value(document.cookie, '__utmc=', ';');
	var utmz = get_utm_value(document.cookie, '__utmz=', ';');
	
	source = get_utm_value(utmz, 'utmcsr=', '|');
	medium = get_utm_value(utmz, 'utmcmd=', '|');
	term = get_utm_value(utmz, 'utmctr=', '|');
	content = get_utm_value(utmz, 'utmcct=', '|');
	campaign = get_utm_value(utmz, 'utmccn=', '|');
	gclid = get_utm_value(utmz, 'utmgclid=', '|');
	
	session_count = get_session_count(utma);
	pageview_count = get_pageview_count(utmb, utmc);
		
	if (gclid !="-") {
	 source = 'google';
	 medium = 'cpc';
	}
}

function get_utm_value(l,n,s)
{
if (!l || l=="" || !n || n=="" || !s || s=="") return "-";
var i, j, k, utm="-";
i=l.indexOf(n);
k=n.indexOf("=")+1;

if (i > -1)
{
    j=l.indexOf(s,i);
    if (j < 0)
        {
         j=l.length;
         }
    utm=l.substring((i+k),j);
     }
return utm;
}

//This function extracts the "Count of Sessions" value from the _utma cookie
function get_session_count(str) 
{
var i, vc='-';
	if (str != '-') {
		i = str.lastIndexOf(".");
		i++;
		vc = str.substring(i);
	}
return vc;
}

//This function extracts the "Count of Pageviews" value from the _utmb cookie
function get_pageview_count(utmb,utmc)
{
var i, j, pc='-'; 
	if(utmb != '-' && utmc != '-'){
		utmc=utmc+'.';

		i=utmc.length;
		j=utmb.indexOf(".", i);
		pc=utmb.substring(i,j);
	}
return pc;
}
</script>

El siguiente paso es muy similar al anterior aunque este código si incluye ligeras modificaciones respecto al original como ya indiqué al principio.

Copias de nuevo otro script que verás a continuación y lo guardas en una nueva etiqueta de Google Tag Manager de HTML personalizado con el nombre “GA Cookie Extraction Script” con el activador también de todas las páginas.

Aquí también deberemos reemplazar “align.ly” por nuestro nombre de dominio, en mi caso sería “queseo.es”.

<script>
// 2 second delay to let Google Analytics cookies load
    setTimeout(function () {

        // Split the GA cookie
        var GATrafficSource = (function () {
            var pairs = (/(?:^|; )__utmz=([^;]*)/.exec(document.cookie) || []).slice(1).pop().split('.').slice(4).join('.').split('|');
            var vals = {};
            for (var i = 0; i < pairs.length; i++) {
                var temp = pairs[i].split('=');
                vals[temp[0]] = temp[1];
            }
            return {
                'utm_source': (vals.utmgclid) ? "google" : vals.utmcsr,
                'utm_medium': (vals.utmgclid) ? "cpc" : vals.utmcmd,
                'utm_campaign': vals.utmccn,
                'utm_content': vals.utmcct,
                'utm_term': vals.utmctr
            };
        }());

        // Find and split campaign name cookie
        function readCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        var campaignName = /[^(=)]*(?=\|utmcmd)/.exec(readCookie('__utmz'))

        // Create cookie function
        function setCookie(cname, cvalue, exdays, path) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires + ";domain=.align.ly;" + "path=" + path;
        }
        
        // If cookie is empty, create cookie. This should be one loop.

        if (readCookie("source") === null) {
            setCookie("source", GATrafficSource.utm_source, 1, '/');
        }
        if (readCookie("medium") === null) {
            setCookie("medium", GATrafficSource.utm_medium, 1, '/');
        }
        if (readCookie("content") === null) {
            setCookie("content", GATrafficSource.utm_content, 1, '/');
        }
        if (readCookie("keyword") === null) {
            setCookie("keyword", GATrafficSource.utm_term, 1, '/');
        }
        if (readCookie("campaign") === null) {
            setCookie("campaign", campaignName, 1, '/');
        }
        
        var gaCookie = document.getElementById('gaCookie');
     
        if(gaCookie) {
          gaCookie.value = {{GA - Cookie de usuario}}.substr(6,45);
        }

	// Add cookie info to hidden fields for web to lead fields
        jQuery('input:hidden[name=ga_source]').val(readCookie('source'));
        jQuery('input:hidden[name=ga_medium]').val(readCookie('medium'));
        jQuery('input:hidden[name=ga_content]').val(readCookie('content'));
        jQuery('input:hidden[name=ga_term]').val(readCookie('keyword'));
        jQuery('input:hidden[name=ga_campaign]').val(readCookie('campaign'));
      }, 2000); // The 2 second delay from the beginning
</script>

Importante: una vez creemos esta etiqueta, debemos irnos a la creada anteriomente y decir que después de su activación, active esta etiqueta.

activación cookie

Este paso es para poder extraer el Client ID de analytics.

Vamos a variables y creamos una nueva variable personalizada por el usuario. Seleccionamos Cookie de origen e insertamos el valor “_ga“. Luego la guardamos con el nombre de “GA – Cookie de usuario“:

cookie tag manager

Insertamos campos en el formulario de Contact Form 7

Seguramente funcione en otros tipos de formularios, pero actualmente solo lo he probado con contact form 7, aunque el artículo original estaba pensado para formularios de Sales Force.

Lo que debes asegurarte a la hora de crear los campos en el formulario es que estén como se especifica en el código:

campos formulario fuente trafico

Para guardar la cookie solo necesitamos un campo con un valor de id=”gaCookie”.

En el caso de las fuentes, deben ser inputs invisibles y con el name indicado, de tal forma que dentro del formulario insertaremos los siguientes campos:

[hidden gaCookie id:gaCookie]
[hidden ga_campaign]
[hidden ga_medium]
[hidden ga_source]
[hidden ga_content]
[hidden ga_keyword]

Comprobaciones

Guardamos los cambios y publicamos el contenedor.

A continuación accedemos desde un navegador privado a Google o a una web que que contenga un enlace a nuestra web, para acceder por una página intermediaria y comprobar que funciona correctamente.

Una vez accedemos a la página del formulario, pulsamos sobre este con el botón derecho del ratón y vamos a la opción de inspeccionar para ver el código y confirmar que los campos se rellenan correctamente:

valores formularios name

Sobre la autoría del artículo