Agregar Device Intelligence a un sitio Webflow

Esta guía muestra cómo agregar cside Device Intelligence a un sitio Webflow: cargue el script client.js con Webflow Custom code y luego llame a sendClientTelemetry para crear un fingerprint de sesión.

Antes de empezar

• Use un plan de sitio o Workspace de Webflow que admita Custom code y Code Embed.
• Agregue el dominio de su sitio en el dashboard de cside y confirme que Device Intelligence esté habilitado para él. Consulte Agregar su dominio.
• Tenga lista su URL del script de Device Intelligence. Se ve así: https://[your-team-id].csidefd.com/client.js. Para ver su URL completa, vaya al dashboard de cside. Para entrega first-party desde su propio dominio, configure primero un CNAME - consulte Configurar Device Intelligence.

Paso 1 - Agregue el script de Device Intelligence

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

Paso 2 - Llame a sendClientTelemetry

Llame a sendClientTelemetry en la página donde quiere recopilar un fingerprint, como checkout, registro o inicio de sesión. Puede llamarla sin argumentos o pasar un objeto externalIds opcional con claves como accountId, orderId o email.

Como Webflow puede ejecutar código personalizado globalmente o en una sola página, use una de estas opciones.

Opción A - Custom code a nivel de página (recomendada)

Use esto cuando quiera crear fingerprint en una página específica.

<script>
  (function () {
    var attempts = 0;
    var maxAttempts = 25;

    function run() {
      if (typeof sendClientTelemetry !== "function") {
        attempts += 1;

        if (attempts >= maxAttempts) {
          console.warn("cside Device Intelligence script did not load.");
          return;
        }

        setTimeout(run, 200);
        return;
      }

      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }

        var sessionToken = result.token; // envíe esto a su backend
      }).catch(console.error);
    }

    run();
  })();
</script>

Opción B - Footer code del sitio

Use esto cuando quiera la misma llamada en muchas páginas. En Site settings > Custom code, agregue un segundo snippet en Footer code y pegue el mismo <script> de la Opción A.

Opción C - Code Embed

Use Webflow Code Embed solo cuando necesite la llamada dentro de una sección o componente específico. Pegue el mismo <script> de la Opción A en el embed y publique la página antes de probar.

Opcional - Use el token de sesión

sendClientTelemetry devuelve un token de sesión en result.token. Solo necesita enviar ese token a su backend si su aplicación quiere recuperar y usar los datapoints del dispositivo. Los intercambios de producción usan una clave API de Device Intelligence del lado servidor desde el dashboard de cside.

No coloque la clave API de Device Intelligence en snippets de Webflow Custom code o Code Embed. Manténgala en los secretos de su backend.

• Events API - el flujo completo de intercambio de token y el esquema de respuesta
• Recuperar datapoints - leer los datos detrás de un token

Solución de problemas

• No aparece nada en Preview - Si prueba en el modo Preview o Comment de Webflow, confirme que la vista previa de código personalizado esté habilitada. Publique y abra la URL activa para la validación final.
• sendClientTelemetry is not defined - Falta el script client.js o carga demasiado tarde. Confirme que el Paso 1 lo coloca en Head code y que la página publicada lo carga antes de su llamada.
• El script carga, pero no aparecen fingerprints - Cargó client.js, pero nunca llamó a la función. Confirme que el Paso 2 se ejecuta en la página que está probando.
• La URL del script es de monitoreo, no de Device Intelligence - El script de monitoreo estándar usa csidetm.com. Device Intelligence usa su URL csidefd.com o su dominio first-party de fingerprint.
• La CSP bloquea solicitudes - Si configuró una Content Security Policy, permita su dominio de Device Intelligence en script-src y connect-src. Consulte Ajustar su CSP.