Utilizando cookies para pasar datos entre PHP y Javascript

Cookies PHP Javascript

Hoy escribo para compartir una solución que, aunque pueda parecer poco ortodoxa, en Easyoffer nos ha ayudado a solucionar un problema técnico que a priori nos obligaba a elegir entre sacrificar parte de nuestro sistema de caché o parte de las métricas que estamos recolectando para utilizarlas en el proceso de mejora iterativa de nuestras landing pages. Y esta solución pasa por utilizar cookies de muy corta duración para pasar información del back-end a nuestro front-end.

En Easyoffer nos dedicamos a poner en contacto usuarios que buscan abogados o asesores, con profesionales en su zona especializados en resolver su problema. Por lo tanto, somos una empresa dedicada a la generación de leads, y en toda empresa de este tipo el core tecnológico del negocio pasa por la continua optimización de las landing pages, a la búsqueda de incrementar de forma constante la tasa de conversión de las mismas. Una mejora en la tasa de conversión supone que el coste de adquisición de los leads sea cada vez más bajo y por lo tanto aumente el beneficio.

Para poder tomar decisiones fundadas en datos para esa búsqueda constante de mejora en la tasa de conversión, es imprescindible medir correctamente todo lo que ocurre con las landing. En Easyoffer, aunque empezamos utilizando Mixpanel, ahora utilizamos Google Analytics, que combinado con la potencia que aporta el Data Layer de Google Tag Manager, nos proporciona toda la información que necesitamos.

No voy a meterme en detalle con el Data Layer (entre otras cosas porque es algo que yo no domino), pero a modo de resumen decir que es un objeto que nos permite pasar a Google Tag Manager variables personalizadas, que posteriormente podemos utilizar en Google Analytics. Hay dos formas de pasar estos datos:

Incrustándolo en el HTML de la página como fragmento javascript. Ejemplo:

La otra opción pasa por utilizar el método push proporcionado por Google Tag Manager para enviar las variables desde un fichero javascript. Ejemplo:

En el caso de que se trate de información estática, como la de los ejemplos, no hay ningún inconveniente. El problema llega cuando se quiere enviar información que depende de cada usuario y tiene que estar disponible, tanto si usamos el primer método como el segundo, en el front. Y es que esto entra en conflicto con nuestra caché, porque si tenemos que incluir información dinámica en el marcado de la página, entonces no podemos utilizar HTML estático servido por una caché.

Quien me conoce sabe que una de mis obsesiones en todos los proyectos en los que he trabajado es el rendimiento y los tiempos de carga pensando en la escalabilidad, por lo que para mí seguir utilizando todos los niveles de caché era un asunto innegociable. De hecho, una de mis primeras entradas en este blog fue sobre cómo construir un sistema de caché HTML básico con PHP.

Después de darle muchas vueltas, la primera opción que descarté fue utilizar llamadas AJAX en cada una de las páginas que pudieran requerir de esta información dinámica, principalmente porque supondría saturar de llamadas innecesarias al servidor. La siguiente opción que barajé, y que finalmente ha sido la elegida, fue utilizar cookies para enviar información de PHP al front.

Vale, admito que puede no ser la solución más elegante, pero sin duda hace el trabajo. Desde javascript no se puede acceder a las variables de sesión de PHP, pero sí se puede acceder a las cookies. Lo genial de esta solución es que nos permite combinar lo mejor de ambos mundos, ya que no afecta a la caché, y a la vez nos permite seguir trackeandtoda la información que necesitamos.

Las cookies utilizadas para este propósito, son totalmente instrumentales. Y duran apenas un segundo, ya que en todas las páginas consultamos desde javascript si existe una cookie con la información a enviar al Data Layer, y cuando existe, inmediatamente enviamos dicha información y borramos la cookie. Es decir, utilizamos un sistema de almacenamiento pensado para tener una caducidad elevada, como un instrumento de comunicación inmediata.

A nivel técnico, la implementación no puede ser más sencilla. Unas pocas línea en PHP para encapsular la función que graba en la cookie el nombre de las variables a enviar al Data Layer y sus valores:

Y una función en javascript para consultar el valor de esta cookie y, en caso de existir, enviar el valor al Data Layer con el método push, y limpiar la cookie:

Uso de cookies

Este sitio web, como todos, utiliza cookies. Si continúas navegando por la web estás dando tu consentimiento para la aceptación de la política de cookies de este sitio web. ACEPTAR

Aviso de cookies