Análisis del lado del servidor con Jamstack Sites

Los sitios Jamstack no tienen backend. Esto hace que su capacidad para recopilar datos analíticos sea especialmente vulnerable a los bloqueadores. Vamos a solucionar ese problema.

Este ejemplo incluye una Función Netlify que enviará nuestros eventos a Google Analytics, y una función Netlify Redirect de Netlify.

El problema

Los rastreadores y píxeles de seguimiento son códigos HTML diseñados para capturar el comportamiento o las visitas de los usuarios cuando visitan un sitio web o abren un correo electrónico. Son útiles para hacer un seguimiento del uso de su sitio web y, en ocasiones, de las conversiones.

El problema es que algunos rastreadores son lentos y a menudo invasivos. Los bloqueadores de anuncios se idearon en un principio para evitar que los anuncios y los píxeles de seguimiento ralentizaran el rendimiento de las páginas web, o para mejorar la experiencia del usuario, pero posteriormente se han ampliado para mejorar la privacidad de los usuarios.

Un efecto secundario fue que muchos propietarios de sitios perdieron la visibilidad de lo que funcionaba y lo que no funcionaba en sus sitios. Las características físicas de rastreo aún pueden utilizarse para realizar un seguimiento de determinadas métricas, por ejemplo, añadiendo el identificador de un artículo en un enlace de registro para ver dónde se originó el registro.

Esto sigue sin ayudarnos a determinar con precisión si nuestro contenido está siendo visto, un requisito clave para determinar la conversión.

La solución

La analítica del servidor se ha convertido en una forma popular de seguir la actividad de los usuarios. No tiene el alcance de la analítica tradicional (no puede rastrear fácilmente las interacciones en la página), pero puede capturar detalles importantes, como las páginas vistas únicas.

Plataformas de alojamiento como Netlifyo proveedores de Edge como Cloudflare y Fastly, ofrecen análisis del lado del servidor como parte de sus soluciones. Pero, cuando se utiliza un proveedor para el análisis, a menudo se restringe la forma en que se puede almacenar esa información, lo que limita la presentación de informes internos.

Por esa razón, a algunos les gusta desarrollar sus propias analíticas del lado del servidor. Para ello, Google tiene algunos quick starts para algunos lenguajes, y para otros existen paquetes como universal-analytics.

Aquí, vamos a hacer nuestro propio uso de universal-analytics y una función de Netlify.

Función Netlify

Netlify Functions son básicamente funciones AWS Lambda, sin AWS. La experiencia del desarrollador de AWS deja MUCHO que desear, y Netlify ha convertido la experiencia del usuario en un modelo de negocio. Netlify Functions no son una excepción, permitiendo a la gente escribir JavaScript o Go a un directorio configurado, y publicarlo en unos pocos pasos. El punto final se deriva por el nombre del archivo o carpeta, y puede utilizar las dependencias de la aplicación principal, o ser responsable de su propia.

Una función muy sencilla podría tener este aspecto:

// functions/hello-world/index.js

exports.handler = (event, context) => {
  console.log('Only the server will see this!')

  return {
    statusCode: 200,
    body: 'Hello, world!',
  }
}

Una vez desplegado, podrá acceder a él a través de una URL como ésta: https://your-app.netlify.app/.netlify/functions/hello-world

Pero también puedes seguir haciendo cosas después de enviar una respuesta, como ésta:

// functions/hello-world/index.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  console.log('The server will still see this!')
}

Ahora, podríamos utilizar esta funcionalidad para enviar nuestras analíticas a Google.

Nota: Si está añadiendo dependencias a una función, tendrá que añadir el plugin @netlify/plugin-functions-install-core plugin a su netlify.toml configuración. Este plugin se asegurará de que todas las dependencias de la función se instalan cuando se despliega la función.

Necesitamos instalar universal-analytics primero, así que asegúrate de que estás en el directorio de tu función antes de ejecutar el siguiente comando.

Asegúrese de que dispone de un ID de Google Analytics y añádalo a sus Variables de entorno de Netlify.

Ahora, podemos utilizarlo en nuestra función.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Ahora, desde tu navegador, puedes enviar los datos de la URL directamente a Google: https://your-app.netlify.app/.netlify/functions/hello-world?dp=/my-custom-page

Los datos que puede enviar incluyen estos parámetros, aunque no se limitan a ellos:

{
  dp, // path e.g. /my-custom-page
  dt, // title of the page
  dh, // hostname e.g. https://netlify.com
  dr, // referrer e.g. https://netlify.com/as-a-referrer or /a-link
  ua, // user agent e.g. very obscure string meaning "chrome on mac"
  cs, // utm_source
  cm, // utm_medium
  cn, // utm_campaign
  ck, // utm_term
  cc, // utm_content
}

He aquí una lista completa de parámetros aceptables.

Añadir la "Imagen

Llamar a este script por sí solo, con algo como un router middleware o una petición AJAX, podría ser suficiente en muchos casos para obtener informes decentes, pero aún así podría ser reconocido como una petición XHR por un navegador o un bloqueador de anuncios del navegador, y ser bloqueado.

Una solución (típicamente sobredimensionada) que decidí utilizar era similar al método del píxel de seguimiento. Pero, como devolvemos una imagen estructural visible, los bloqueadores de anuncios lo han ignorado por completo hasta ahora.

Screenshot of AdBlock Plus

Vamos a devolver una imagen SVG de la función Netlify y colocarla en una página utilizando una etiqueta de imagen.

Utilicemos esta imagen.

La fuente de esta imagen se encuentra aquí:

<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>

Ahora, para devolver la imagen de nuestra función:

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/svg+xml',
    },
    body: `<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>`,
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Añádelo a tu sitio utilizando la URL que hemos usado antes:

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/.netlify/functions/hello-world?dp=/my-custom-page"
/>

Con un poco de suerte, se verá así:

An image of a smiley

Regla de redireccionamiento

Así pues, la parte más ingeniosa de mi malvada idea podría ser la siguiente. Me daba un poco de paranoia que un bloqueador de anuncios pudiera detectar una URL sin imagen con parámetros de cadena de consulta tan poco sospechosos como una fuente de imagen, y bloquearla de todos modos.

Introduzca Redirecciones Netlify.

Utilizando el netlify.toml en la raíz del proyecto, puede sustituir una ruta por otra.

[[redirects]]
  from = "/images/smiley-face.svg"
  to = "/.netlify/functions/hello-world"
  status = 200
  force = true

Ahora, puede utilizar una ruta de imagen para incluir su cara sonriente.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/images/smiley-face.svg?dp=/my-custom-page"
/>

Puedes codificar la cadena de consulta como quieras, sólo recuerda decodificarla dentro de la función.

Conclusión

La analítica es un superpoder para el marketing y los creadores de contenidos. Nos permite servir mejor a la comunidad, ajustando nuestros objetivos en función de los datos que podemos recopilar.

Los rastreadores suelen plantear problemas de privacidad y velocidad. Pero siempre que se actúe de buena fe, como creo que es nuestro caso, la analítica beneficia a los espectadores tanto como a los demás.

Esta es una buena forma de conseguir análisis del lado del servidor (que los bloqueadores no pueden bloquear), cuando no se dispone de un servidor.