Skip to main content
Antes de empezar
Language

Agregar Device Intelligence a un sitio Framer

Agrega el script de cside Device Intelligence y llama a sendClientTelemetry en un sitio Framer no-code usando Custom Code y el elemento Embed.

El codigo personalizado solo se ejecuta en tu sitio publicado

El codigo personalizado y los scripts embebidos de Framer no se ejecutan en el editor ni en la vista previa del canvas. Publica tu sitio y pruebalo en la URL en vivo.

Esta guia muestra como agregar cside Device Intelligence a un sitio Framer: carga el script client.js con Custom Code de Framer y luego llama a sendClientTelemetry para que realmente se cree un fingerprint de sesion.

Solo necesitas el script de monitoreo?

Para agregar el script de monitoreo estandar de cside a Framer, sigue el Paso 1 de abajo pero pega tu script de csidetm.com en su lugar. El script de monitoreo no necesita ninguna llamada de funcion, asi que puedes omitir el Paso 2. Esta guia se centra en el script de Device Intelligence (fingerprinting).

Antes de empezar

  • Agrega el dominio de tu sitio en el panel de cside y confirma que Device Intelligence este habilitado para el. Consulta Agregar su dominio.
  • Ten lista tu URL del script de Device Intelligence. Se ve asi: https://[your-team-id].csidefd.com/client.js. Para entrega first-party desde tu propio dominio, configura primero un CNAME - consulta Configurar Device Intelligence.

Paso 1 - Agrega el script de Device Intelligence

Abre Custom Code

En tu proyecto de Framer, ve a Project Settings > Custom Code y haz clic en Add Script.

Pega el script en el head

Establece la ubicacion en Start of <head> tag para que el script cargue antes que tu pagina. Pega el siguiente fragmento y reemplaza [your-team-id] con el ID de tu equipo, o usa tu dominio first-party, como fingerprint.example.com.

<script
  src="https://[your-team-id].csidefd.com/client.js"
  referrerpolicy="origin"
  data-src="6">
</script>

Aplicalo a cada pagina

Dale al script un nombre reconocible, aplicalo a All Pages y configuralo para que se ejecute en cada visita de pagina. Guarda los cambios.

El script no crea fingerprints por si solo

Cargar client.js solo expone la funcion sendClientTelemetry en el navegador. Un fingerprint de sesion se crea solo despues de que tu sitio la llama, lo cual configuras en el Paso 2.

Paso 2 - Llama a sendClientTelemetry

Llama a sendClientTelemetry en la pagina donde quieres recopilar un fingerprint, como checkout, registro o inicio de sesion. Puedes llamarla sin argumentos o pasar un objeto externalIds opcional con claves como accountId, orderId, email o cardLast4.

Como Framer es no-code, usa una de estas dos formas para ejecutar la llamada.

Opcion A - Elemento Embed (recomendada)

Usa esto cuando quieras crear un fingerprint en una pagina especifica.

Agrega un elemento Embed

En la pagina, abre Insert > Embed y arrastra un elemento Embed al canvas. No necesita ser visible, asi que puedes colocarlo fuera de la pantalla.

Pega la llamada en el campo HTML

En el campo HTML del Embed, pega el script de abajo. Espera a que client.js termine de cargar y luego llama a sendClientTelemetry.

<script>
  (function () {
    function run() {
      if (typeof sendClientTelemetry !== "function") {
        setTimeout(run, 200); // client.js aun no esta listo
        return;
      }
      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }
        var sessionToken = result.token; // envia esto a tu backend
      }).catch(console.error);
    }
    run();
  })();
</script>

Opcion B - Custom Code en todo el sitio

Usa esto cuando quieras la misma llamada en muchas paginas. Agrega un segundo fragmento en Project Settings > Custom Code, establece su ubicacion en End of <body> tag, elige las paginas en las que debe ejecutarse y configuralo para que se ejecute en cada visita de pagina. Pega el mismo <script> mostrado en la Opcion A.

Paso 3 - Usa el token de sesion

sendClientTelemetry devuelve un token de sesion en result.token. Envia ese token a tu backend e intercambialo con la API de cside para leer los datapoints del dispositivo. Los intercambios de produccion usan una clave API de Device Intelligence del servidor del panel de cside.

Solucion de problemas

  • No pasa nada en el editor - El codigo personalizado y los embeds solo se ejecutan en el sitio publicado. Publica y abre la URL en vivo.
  • sendClientTelemetry is not defined - El script client.js falta o se carga demasiado tarde. Confirma que el Paso 1 lo coloque en Start of <head> tag y que cargue antes de tu llamada.
  • El script carga pero no aparecen fingerprints - Cargaste client.js pero nunca llamaste a la funcion. Confirma que el Paso 2 se ejecute en la pagina que estas probando.
  • Las solicitudes son bloqueadas por CSP - Si configuraste una Content Security Policy, permite tu dominio de Device Intelligence en script-src y connect-src. Consulta Ajustar su CSP.

Avanzado: code override

Si trabajas con code components u overrides de Framer, puedes llamar a sendClientTelemetry desde React, por ejemplo en el envio de un formulario, siempre que client.js siga cargando primero mediante el Paso 1. Usa la misma forma de llamada mostrada arriba y maneja el token devuelto en tu handler.

Was this page helpful?