- Vistas de página
- Personalizar objetivos
- Cómo crear un objetivo personalizado
- Cómo trackear botones
- Cómo trackear links
- Cómo trackear formularios
- Cómo medir las búsquedas en mi web
- Cómo trackear las exit urls
- Cómo medir el scroll que hacen los usuarios
- Cómo editar los objetivos que tengo ya creados
Los objetivos se utilizan para rastrear acciones específicas de los usuarios que no aparecen en el Dashboard (por ejemplo, cuántos clics se han hecho en el botón de “Suscribirse”. Para crear un objetivo inicia sesión en tu cuenta de Overtracking y pulsa el icono de la copa
Recuerda que para crear objetivos personalizados tendrás que editar el código de tu web. Si no te sientes muy cómodo haciéndolo no te preocupes, hemos desarrollado unos tutoriales para ayudarte.
Vistas de pagina #
El objetivo de vistas de página es el más fácil de configurar y la conversión del objetivo se producirá una vez que un visitante llegue a una determinada página específica.
Un buen ejemplo sería cuando tienes una página de «agradecimiento» después de que se produce la conversión (boletín, compra, envío de formulario, etc.) a la que accederá el usuario después.
Personalizar objetivos #
Los objetivos personalizados requerirán algún código adicional implementado en el sitio web rastreado, que se especifica cuando crea un nuevo objetivo desde el panel.
Un objetivo personalizado se utiliza principalmente cuando desea realizar un seguimiento de un evento específico que ocurre en su sitio web, que no se puede rastrear con el método de vista de página.
Algunos ejemplos de dónde brillarán los objetivos personalizados son:
- Seguimiento de clics en enlaces externos
- Seguimiento de envíos de formularios más avanzados
- Seguimiento de clics en partes específicas de sus páginas
Así es como se vería un fragmento de JavaScript para el seguimiento de objetivos:
analítica.objetivo(‘mi-objetivo’);
Cuando este código se active dentro de su página, la conversión del objetivo también se activará de nuestra parte.
Cómo crear un objetivo personalizado #
Para crear una meta, inicia sesión en tu cuenta de Overtracking y presiona el ícono de la copa. Dependiendo de lo que quieras rastrear tendrás que hacerlo de manera diferente:
Cómo trackear botones #
1. Crea un objetivo #
Lo primero que tienes que hacer es ir a tu Dashboard, hacer clic en el icono de la copa y después pulsar en el botón de ‘Crear objetivo’.En la ventana emergente, da un nombre a tu objetivo y selecciona el tipo de objetivo que quieres crear. En este caso, seleccionaremos ‘Botón’ y nosotros lo hemos llamado ‘social_shared’ ya que vamos a trackear los botones de compartir en redes sociales.
2. Añádele una clase al botón #
Ahora que has creado un objetivo, tienes que añadirle una class (clase – no ID, son cosas diferentes) al botón que quieres rastrear. Esto te permite identificar el botón en el código de JavaScript. Tienes que tener en cuenta que no puedes tener elementos con la misma class. En este caso, vamos a llamar a la class como el botón de la red social a la que corresponda (WhatsApp, Facebook, Twitter…).
Para añadir una clase al botón, abre el archivo HTML de tu sitio web y en el apartado querySelector busca el botón que quieres rastrear. Añade la clase al botón:
button[class*=»facebook»]
button[class*=»whatsapp»]
3. Añade el código JavaScript #
Ahora tienes que añadir este trozo de código en el archivo de JavaScript de tu página web. Puedes agregarlo en cualquier parte del archivo.
//esperamos a la carga de la página web
window.onload = function() {
//add listener if(document.querySelector('button[class*="facebook"]')) {
document.querySelector('button[class*="facebook"]').addEventListener('click', function({ analytics.goal('social_shared', 'facebook');
});
} });
}Recuerda que tienes que cambiar la parte del código donde pone ‘social_shared’ por la llave de vuestro evento y ‘facebook’ por la clase que le hayas dado al botón.
El código final con todos los botones quedaría así:
//esperamos a la carga de la página web
window.onload = function() {
//add listener
//add listener
if(document.querySelector('button[class*="facebook"]')) {
document.querySelector('button[class*="facebook"]').addEventListener('click', function() {
analytics.goal('social_shared', 'facebook');
});
}
if(document.querySelector('button[class*="twitter"]')) {
document.querySelector('button[class*="twitter"]').addEventListener('click', function() {
analytics.goal('social_shared', 'twitter');
});
}
if(document.querySelector('button[class*="pinterest"]')) {
document.querySelector('button[class*="pinterest"]').addEventListener('click', function() {
analytics.goal('social_shared', 'pinterest');
});
}
if(document.querySelector('button[class*="whatsapp"]')) {
document.querySelector('button[class*="whatsapp"]').addEventListener('click', function() {
analytics.goal('social_shared', 'whatsapp');
});
}
if(document.querySelector('button[class*="telegram"]')) {
document.querySelector('button[class*="telegram"]').addEventListener('click', function() {
analytics.goal('social_shared', 'telegram');
});
}
}4. Comprueba los resultados #
Para asegurarte de que no hayas cometido ningún error en el proceso, inicia sesión en Overtracking y revisa si aparecen tus Custom Values dentro del nuevo objetivo.
Desde el Dashboard de Overtracking tendrías que ver algo así:
Cómo trackear enlaces #
En este tutorial aprenderás a rastrear enlaces de tu sitio web. Esto te permitirá saber cuántas personas hacen clic en tus enlaces, aunque depende del tipo de enlace no podrás saber si se ha terminado de convertir o no.
Por ejemplo, imagínate qué quieres trackear cuantos usuarios se registran con Google. pero claro, esto te lleva a una página externa, por lo que solo vamos a contabilizar los clicks qué hacen en el botón (también podríamos trackearlo en el callback de google, pero eso lo mostraremos en otro tutorial).
1. Crea un objetivo #
Lo primero que tienes que hacer es ir a tu Dashboard, hacer clic en el icono de la copa y después pulsar en el botón de ‘Crear objetivo’. En la ventana emergente, da un nombre a tu objetivo y selecciona el tipo de objetivo que quieres crear. En este caso, seleccionaremos «Enlace» y en este caso lo podríamos llamar ‘register’.
2. Añade el código JavaScript #
Ahora tienes que añadir este trozo de código en el archivo de JavaScript de tu página web. Puedes agregarlo en cualquier parte del archivo.
Esto, aunque parezca un botón, realmente es un enlace que nos lleva a una URL que comienza por esto: https://accounts.google.com/o/oauth2
Por lo que podríamos así el código:
window.onload = function() {
if(document.querySelector('a[href*="https://accounts.google.com/o/oauth2"]')) {
document.querySelector('a[href*="https://accounts.google.com/o/oauth2"]').addEventListener('click', function() {
analytics.goal('register', 'google');
});
}
}En este código, debeis cambiar «https://accounts.google.com/o/oauth2” por parte de vuestro enlace o el enlace completo. Por último, modificar el objetivo, cambiando la llave register, por la qué vosotros creasteis y google, por el valor qué quieras darle.
3. Comprueba los resultados #
Para asegurarte de que no hayas cometido ningún error en el proceso, inicia sesión en Overtracking y revisa si aparecen tus Custom Values dentro del nuevo objetivo.
Cómo trackear formularios #
En este tutorial vas a aprender a rastrear formularios en tu sitio web usando Overtracking. Esto te permitirá ver cuántas personas han enviado formularios como el de contacto o el de registro del usuario.
1. Crea un objetivo #
Lo primero que tienes que hacer es ir a tu Dashboard, hacer clic en el icono de la copa y después pulsar en el botón de «Crear objetivo«. En la ventana emergente, da un nombre a tu objetivo y selecciona el tipo de objetivo que quieres crear. En este caso, seleccionaremos «formulario» y en este caso lo vamos llamar «manual«.
Si no sabes crear un evento personalizado, mira este tutorial.
2. Añádele una clase al formulario #
Necesitamos definir la etiqueta <form> una clase y en vez de usar el evento “click” vamos a usar el evento “submit”. En este caso nosotros vamos a usar la clase «is_form_register«
3. Añade el código JavaScript #
Ahora que has añadido una clase al formulario, debes añadir el código JavaScript que rastreará el formulario. Para ello, abre el archivo JavaScript de tu sitio web y añade el siguiente código:
El código, sería este:
window.onload = function() {
if(document.querySelector('form[class*="is_form_register"]')) {
document.querySelector('form[class*="is_form_register"]').addEventListener('submit', function(e) {
//paramos el envio
e.preventDefault();
//registramos el evento
analytics.goal('register', 'manual');
//envamos el form
document.querySelector('form[class*="is_form_register"]').submit();
});
}
}En este código, tenemos que destacar lo siguiente.
- La class del formulario es «is_form_register«. Debéis cambiarla por el nombre de vuestra clase.
- Debéis cambiar la clave “register” por la qué registrasteis en el evento.
- Cambiar “manual” por el valor que hayáis decidido para reconocer mejor el formulario.
4. Comprueba los resultados #
Para asegurarte de que no hayas cometido ningún error en el proceso, inicia sesión en Overtracking y revisa si aparecen tus Custom Values dentro del nuevo Objetivo.
Cómo medir las búsquedas en mi web #
En este apartado vamos a medir las búsquedas que los usuarios hacen en nuestro sitio web. La mayoría de las páginas web realizan las búsqueda a través de una variable en la URL, por lo que vamos a trackear esa variable.
1. Crea un evento personalizado #
En este caso, hemos creado un un evento personalizado llamado “search” y estamos trackeando la variable “s”. Si no sabéis crear un evento puedes ver este tutorial sobre como crear un evento personalizado.
document.addEventListener("_ot_start", function(){
//obtenemos la url var url = new URL(window.location.href);
// Obtener el valor de la variable GET llamada "search"
var searchParam = url.searchParams.get("s");
if (searchParam !== null) {
analytics.goal('search', searchParam);
}
});2. Añade el código a tu web #
Este código podemos ponerlo donde queramos, modificando s por el valor qué tenga tu búsqueda (suele ser algo así /?s=overtracking). También recuerda modificar el valor de evento personalizado, qué en este caso es «search» pero tu puedes llamarle como quieras.
Cómo trackear las URLs de salida #
Las url de salida nos indican por qué páginas nos abandonan nuestros usuarios. Esto puede ayudar a identificar páginas con contenido a mejorar, el éxito de tus campañas de marketing o detectar enlaces o botones que es mejor cambiar a otras páginas.
1. Crea un evento personalizado #
Lo primero qué tenemos qué hacer es crear un evento personalizado, en este ejemplo, lo hemos llamado “exiturl”.
Si no sabéis crear un evento puedes ver este tutorial sobre como crear un evento personalizado.
2. Añade el código #
Ahora tienes que agregar en cualquier lado de la página este código. Sólo tienes que modificar la llave del evento, que en este caso es “exiturl” por el nombre que tú le hayas puesto.
window.onload = function() {
//get exit url
function trackExitLink(event) {
analytics.goal('exiturl', this.href);
}
// Obtén todos los enlaces en la página
const exitLinks = document.querySelectorAll('a');
// Agrega el evento de clic a cada enlace saliente
exitLinks.forEach(link => {
//si son enlaces externos
if (link.hostname !== window.location.hostname) {
link.addEventListener('click', trackExitLink);
}
});
}3. Revisa que lo hayas implementado bien y analiza tus datos #
Una vez que hayas agregado el código de seguimiento a tu sitio web, podrás empezar a analizar tus datos. Para ver los datos de tus eventos personalizados, deberás ir a la sección «Objetivos» de Overtracking. En la página de objetivos, selecciona el de «exiturl» o como tú lo hayas llamado.
Cómo medir el scroll que hacen los usuarios #
La métrica del porcentaje de scroll nos ayuda saber si las personas que entran en nuestra web encuentran una página interesante o no, en qué punto del artículo ‘perdemos al lector’ o a qué altura es mejor introducir los call to action para asegurarnos de el usuario los ve.
En este tutorial vamos aprender a medir el scroll y lo haremos a través de crear un objetivo.
1. Crea un nuevo objetivo y un evento personalizado #
Lo primero es crear un objetivo, nosotros lo hemos llamado “scroll”. Si no sabéis crear un evento puedes ver este tutorial sobre como crear un evento personalizado.
2. Edita y copia el código en tu web #
Una vez que tengas tu objetivo creado y sea un evento personalizado, solo tienes que editar el código y pegarlo en nuestra web. Puedes introducirlo donde quieras.
En el siguiente código, solo tienes que modificar la variable var ot_nameEvent = ‘scroll’; cambiando el nombre scroll, por el que le diste al objetivo.
<script type="text/javascript">
var ot_nameEvent = 'scroll';
var ot_scroll = {'25': false, '50': false, '75': false, '100': false};
function ot_scroll_y() {
//Obtenemos el el tamaño de la pantalla y de la página
var windiws_height = window.innerHeight || (document.documentElement || document.body).clientHeight;
var document_height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop;
var trackLength = document_height - windiws_height;
var scroll = Math.floor(scrollTop/trackLength * 100);
//Comprobamos hasta donde llega
if(scroll>=25 && ot_scroll['25']==false) {
ot_scroll['25'] = true;
analytics.goal(ot_nameEvent, '25%');
} else if(scroll>=50 && ot_scroll['50']==false) {
ot_scroll['50'] = true;
analytics.goal(ot_nameEvent, '50%');
} else if(scroll>=75 && ot_scroll['75']==false) {
ot_scroll['75'] = true;
analytics.goal(ot_nameEvent, '75%');
} else if(scroll>97 && ot_scroll['100']==false) {
ot_scroll['100'] = true;
analytics.goal(ot_nameEvent, '100%');
}
}
//Agregamos un listener para el evento scroll
document.addEventListener("_ot_start", function(){
window.addEventListener("scroll", function(){ ot_scroll_y(); }, false);
});
</script> 3. Elimina la caché y comprueba que se ha implementado bien #
Una vez pegado el código, recuerda eliminar la caché para qué los usuarios puedan ver el código implementado y así tracker los eventos.
Cómo editar los objetivos que ya tengo creados #
Una vez tengas creados tus objetivos, recuerda que puedes ver las estadísticas y editarlos siempre que quieras.
Para editarlos sólo tienes que pulsar en el lápiz que aparece a la derecha del todo, realizar los cambios que necesites y darle al botón de «actualizar«.
