Código de seguimiento anti-adblock de Clicky en CloudFront

Introducción

Clicky + CloudFront

Si tienes un sitio web alojado en AWS S3/CloudFront y utilizas Clicky para analíticas, es posible que te enfrentes a problemas con bloqueadores de anuncios y navegadores que bloquean el código de seguimiento de Clicky. Para evitar esto, Clicky ofrece una solución de Adblock/Proxy, que implica pasar el código de seguimiento a través de tu propio dominio para disfrazarlo.

Normalmente, esto requiere modificar la configuración de servidores como Nginx, Apache o Caddy. Sin embargo, dado que nuestro sitio web es un sitio estático alojado en AWS S3 detrás de CloudFront, necesitamos una solución diferente.

Suposiciones

  • Tienes un sitio web alojado en AWS S3 detrás de CloudFront.
  • Tienes una cuenta de Clicky.

Preparación

Primero, abre las instrucciones en la página Prefs » Tracking Code. Nos interesa la sección Código de seguimiento anti-adblock (para usuarios avanzados). Verás los valores para Javascript path y Beacon path que necesitas usar en tu sitio web.

Ejemplo de configuración de Clicky para el código de seguimiento anti-adblock
Ejemplo de configuración de Clicky para el código de seguimiento anti-adblock

Configuremos un proxy inverso desde nuestro sitio web a los servidores de Clicky. Utilizaremos el ejemplo para nginx como guía.

http {
	server {
		### COPY THE CODE BELOW INTO YOUR WEBSITE'S EXISTING SERVER{} (VIRTUAL HOST) BLOCK
		### CLICKY ANTI-ADBLOCK PROXY - https://clicky.com/help/proxy
		
		# IMPORTANT NOTE: Incoming X-Forwarded-For headers are supported by default.
		# To disable this, replace all "$proxy_add_x_forwarded_for" references with "$remote_addr".
		
		# DNS RESOLVER - if already defined elsewhere, this can optionally be deleted.
		resolver 1.1.1.1;
		
		# COOKIES - override cookie header to just send the service-related first party cookies.
		set $cookie "";
		if ($cookie__cky_ignore) {
			set $cookie "_cky_ignore=$cookie__cky_ignore; _cky_osa=$cookie__cky_osa";
		}
		
		# JAVASCRIPT TRACKING CODE
		location = /d63e7f9a80329d6.js {
			proxy_pass https://static.getclicky.com/js?in=%2F67c5f93e3b0915a;
			proxy_connect_timeout 10s;
			proxy_http_version 1.1;
			proxy_ssl_server_name on;
			proxy_set_header Host static.getclicky.com;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Cookie "";
		}
		
		# JAVASCRIPT BEACON
		location = /67c5f93e3b0915a {
			proxy_pass https://in.getclicky.com/in.php;
			proxy_connect_timeout 10s;
			proxy_http_version 1.1;
			proxy_ssl_server_name on;
			proxy_set_header Host in.getclicky.com;
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-Forwarded-Host  $host;
			proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
			proxy_set_header Cookie $cookie;
		}
		
		### / CLICKY 
	}
}

Estamos interesados en lo siguiente:

  1. proxy_pass https://static.getclicky.com/js?in=%2F67c5f93e3b0915a; - Ruta del código JavaScript.
  2. proxy_pass https://in.getclicky.com/in.php; - Ruta del Beacon.
  3. Se filtran todas las cookies excepto _cky_ignore y _cky_osa.
  4. Hay algunas manipulaciones con las cabeceras.

Solución

Para empezar, creemos dos nuevos Orígenes en la configuración de nuestra distribución de CloudFront:

  1. Para la ruta del código JavaScript:
    • Origin Domain Name: static.getclicky.com
    • Protocol: HTTPS Only
    • Minimum Origin SSL Protocol: TLSv1.2
  2. Para la ruta del Beacon:
    • Origin Domain Name: in.getclicky.com
    • Protocol: HTTPS Only
    • Minimum Origin SSL Protocol: TLSv1.2

Genial, ahora podemos utilizar estos Orígenes para configurar el comportamiento de nuestra distribución de CloudFront.

Ejemplo de configuración de Orígenes para CloudFront
Ejemplo de configuración de Orígenes para CloudFront

Ahora configuremos el comportamiento de nuestra distribución de CloudFront.

Para Ruta del JavaScript:

  • Path Pattern: /d63e7f9a80329d6.js (reemplaza con tu Ruta del Javascript)
  • Origin or Origin Group: static.getclicky.com
  • Viewer Protocol Policy: HTTPS only
  • Allowed HTTP Methods: GET, HEAD
  • Cache Policy: Managed-CachingDisabled
  • Origin Request Policy: Create a new Origin Request Policy
    • Name: FastfoodCoding_Clicky_js (choose any convenient name)
    • Headers: All viewer headers except Host
    • Cookies: Include the following cookies _cky_ignore, _cky_osa
    • Query Strings: All

Para Ruta del Beacon:

  • Path Pattern: /67c5f93e3b0915a (reemplaza con tu Ruta del Beacon)
  • Origin or Origin Group: in.getclicky.com
  • Viewer Protocol Policy: HTTPS only
  • Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
  • Cache Policy: Managed-CachingDisabled
  • Origin Request Policy: FastfoodCoding_Clicky_js (creada en el paso anterior)

¡Wow, hemos configurado el comportamiento para nuestra distribución de CloudFront!

Ejemplo de configuración de comportamientos en CloudFront
Ejemplo de configuración de comportamientos en CloudFront

El último paso que falta es construir correctamente las rutas a los servidores de Clicky. Para hacer esto, crearemos una Función de CloudFront que se activará en la Solicitud del Visor. Elija Runtime: cloudfront-js-2.0 y escriba el siguiente código:

function handler(event) {

    if (event.request.uri === '/d63e7f9a80329d6.js') {
        event.request.uri = '/js'
        event.request.querystring = 'in=%2F67c5f93e3b0915a'
    } else if (event.request.uri === '/67c5f93e3b0915a') {
        event.request.uri = '/in.php'
    }

    return event.request;
}

Ahora, para cada solicitud a /d63e7f9a80329d6.js, redirigiremos a /js?in=%2F67c5f93e3b0915a, y para /67c5f93e3b0915a, a /in.php.

¡Eso es todo! Lo único que queda es conectar nuestra Función de CloudFront a los comportamientos de nuestra distribución, y listo. Solo agrega el siguiente fragmento de código a tu sitio:

<script async data-id="101449625" src="/d63e7f9a80329d6.js"></script>

¡Bien hecho!