La internet no tiene estado. Básicamente es ciego a tu pasado y no predice lo que podrías hacer en el futuro. Cuando navega a un sitio internet, el navegador solicita la página al servidor internet y luego procede a mostrársela. Éste es un proceso clínico imparcial y cualquier personalizado o con estado La transferencia de datos se deja a la sofisticación de su servidor internet.
La apatridia tiene algunas implicaciones para nosotros que nos preocupamos por el análisis internet y la medición de nuestros visitantes. En Administrador de etiquetas de Googleeste es un elefante siempre presente en la habitación. De hecho, muchos sufren por no poder activar etiquetas, por ejemplo regresando visitantes, o después de las cinco visitas a la página, o si el fuente unique de la sesión fue AdWords. GTM (por ahora) está ciego a este tipo de pensamiento, ya que es simplemente una máquina JavaScript que opera en un entorno sin estado. Cualquier noción de estado debe inyectarse manualmente en la máquina.
¿Y cómo se hace esto? Galletas y el API de almacenamiento internet.
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Cookies del navegador
Las cookies en el navegador son la forma de facto de conservar información en la internet. Han existido durante mucho tiempo (¡más de 20 años!) y son compatibles con casi todos los navegadores, tanto heredados como modernos. Para obtener un repaso sobre qué son las cookies y cómo funcionan, consulte este artículo de Wikipedia. Las características más relevantes de las cookies del navegador son:
-
Limitación de tamaño de 4 KB (por cookie)
-
Sin cifrar en una sola cadena, almacenado en
doc.cookie -
Enviado al servidor con cada solicitud HTTP
-
Se puede configurar con fecha de vencimiento
La limitación de tamaño se convierte rápidamente en un problema con cargas útiles grandes, y el hecho de que se envíen al servidor sin cifrar con cada solicitud puede desanimar a quienes tienen preocupaciones de seguridad.
API de almacenamiento internet
El API de almacenamiento internet es una innovación más reciente, y está representada por la falta de soporte de Web Explorer 7 y versiones anteriores (¡pero a quién le importa!). La API tiene dos interfaces: localStorage y sessionStorage. La principal diferencia es que este último persiste durante la sesión del navegador (es decir, se vacía cuando se cierra la instancia del navegador) y el primero persiste indefinidamente.
Las características de la API de almacenamiento internet son:
-
Sólo se puede leer desde el lado del cliente en el navegador. No se envían datos al servidor.
-
Almacena un máximo de 5 MB por dominio.
-
Almacena datos en una tabla hash, lo que significa que puede realizar consultas exactas sin tener que analizar los datos.
Básicamente, la API de almacenamiento internet es una evolución lógica de la persistencia, que toma lo mejor de las cookies y agrega mejores funciones de administración y acceso a los datos. El gran inconveniente es la falta de comunicación del lado del servidor, por lo que si depende de las cookies para pasar información al servidor internet, migrar a la API de almacenamiento internet no sería lógico a menos que envíe los datos manualmente al servidor (por ejemplo, a través de POST). pedido).
Cookies y GTM
Afortunadamente, Google Tag Supervisor ya nos proporciona una interfaz para consultar los valores de las cookies: Variable de cookie de origen. Cuando configura la Variable con un nombre de cookie, siempre devolverá cualquier valor almacenado en esa cookie en explicit. Esto es de gran ayuda, ya que no necesita pasar por el tedioso proceso de analizar toda la cadena de cookies para encontrar el par nombre-valor que está buscando.
Sin embargo, la configuración de una cookie aún debe realizarse manualmente. La forma más sencilla de configurar una cookie es agregar el siguiente código en una etiqueta HTML personalizada:
doc.cookie = 'cookieName=cookieValue';
Esto establecería una cookie con el nombre nombre de cookie y el valor valor de cookie. Sin embargo, usar este código solo haría que la cookie caduque al remaining del sesión del navegador (es decir, cuando se cierra el navegador), y la cookie se establecería en la página precise camino y la corriente dominio solo. La combinación de ruta y dominio es especialmente importante, ya que solo se podrá acceder a la cookie a través de la página en la que se configuró.
Por eso es routine crear una función auxiliar, con la que se pueden proporcionar algunos parámetros importantes. Para crear este tipo de ayuda en el contexto de GTM, sugiero usar un Variable de JavaScript personalizada nombrado {{JS-setCookie}}:
perform() {
return perform(title, worth, ms, path, area) {
if (!title || !worth) {
return;
}
var d;
var cpath = path ? '; path=' + path : '';
var cdomain = area ? '; area=' + area : '';
var expires = '';
if (ms) {
d = new Date();
d.setTime(d.getTime() + ms);
expires = '; expires=' + d.toUTCString();
}
doc.cookie = title + "=" + worth + expires + cpath + cdomain;
}
}
Esta pequeña y práctica función en realidad regresa otra función, que toma una serie de parámetros:
-
nombre: Requerido. El nombre de la galleta.
-
valor: Requerido. Valor de la galleta.
-
ms: Tiempo de caducidad de la cookie en milisegundos. Si no se establece, el valor predeterminado es Sesión.
-
ruta: Ruta de la cookie. Si no se establece, el valor predeterminado es la ruta precise.
-
dominio: Dominio de la cookie. Si no se establece, el valor predeterminado es el dominio precise.
Para utilizar esta variable en un script, debe utilizar la siguiente sintaxis:
{{JS - setCookie}}('session', 'true', 1800000, '/', 'simoahava.com');
Esto establecería una cookie con el nombre sesión y valor verdaderoque persiste durante 30 minutosy está escrito en la página raíz del dominio raíz.
Si desea omitir un parámetro, deberá reemplazarlo con undefinedsi aún desea enviar uno de estos últimos parámetros. Por ejemplo:
{{JS - setCookie}}('session', 'true', undefined, undefined, 'simoahava.com');
Establecería una cookie con nombre sesiónvalor verdaderoque sería una cookie de sesión, escrita en la página precise del dominio raíz.
¡Uf! Eso es un bocado de código. Pero hace muy bien su trabajo. Mix esto con la excelente Variable de cookies propia y habrá logrado crear un configurador/obtenedor de cookies agradable y práctico.
API de almacenamiento internet y GTM
Podrías crear un elegante conjunto de variables JavaScript personalizadas para localStorage y sessionStorage también, pero ¿por qué molestarse? Es muy sencillo interactuar con ellos.
Para configurar un par clave-valor en el almacenamiento, puede utilizar la siguiente sintaxis:
if (window('Storage')) {
// localStorage persists indefinitely
localStorage.setItem('session', 'true');
// sessionStorage persists till the browser is closed
sessionStorage.setItem('session', 'true');
} else {
// Fallback for when the browser would not assist Net Storage API
{{JS - setCookie}}('session', 'true');
}
En primer lugar, debe comprobar si el navegador es suitable con la API de almacenamiento internet. Eso es sólo un easy if...else bloquear. ¿Ves lo que hice con el respaldo? ¡Así es! utilicé el {{JS-setCookie}} método que acabamos de crear! Qué hermosa transición.
Net Storage solo acepta cadenas como valores, por lo que debe asegurarse de que todo lo que esté almacenando se pueda convertir de forma segura en una cadena. No se preocupe, la API de almacenamiento realiza la conversión por usted si no puede guardar explícitamente un tipo de cadena.
Desafortunadamente, hasta el momento GTM no tiene una variable útil que pueda usar para recuperar elementos del almacenamiento (¡espero que esto cambie pronto!). Pero recuperar un valor es tan easy como establecer uno:
if (window('Storage')) {
var localSession = localStorage.getItem('session');
var sessionSession = sessionStorage.getItem('session');
}
Así es, es el getItem() Método de la API que le permite acceder a las claves almacenadas. regresa null si no se encuentra el artículo.
Y así es como funciona con la API de almacenamiento internet. Te las arreglas con MUCHO menos código y la búsqueda de valores es mucho más intuitiva que con las cookies, aunque GTM te quita mucha carga con su increíble variable de cookie propia.
Resumen
Para muchas interacciones, es muy importante conservar los datos en el navegador. Sin embargo, no toda la persistencia debe dejarse en manos del cliente, ya que los servidores hacen un trabajo mucho mejor y más sólido al almacenar datos basados en el usuario y el uso. Es por eso que Google Analytics pasó de los cálculos del lado del cliente (ga.js y anteriores) a los algoritmos del lado del servidor (Common Analytics). Y es por eso que si realmente tiene necesidades urgentes y críticas para el negocio de conservar información, es posible que desee hablar con sus desarrolladores sobre cómo almacenarla en un almacén de datos o base de datos adecuado, exponiendo la información en el dataLayer cuándo y dónde sea pertinente.
Pero para la persistencia easy en el ámbito de la sesión, los dos métodos descritos en esta guía deberían ser bastante útiles. Recomiendo encarecidamente utilizar la API de almacenamiento internet, pero desafortunadamente es posible que deba introducir una alternativa con las cookies del navegador, ya que todavía hay muchos tontos que utilizan navegadores obsoletos.