Skip to main content
Avant de commencer
Language

Ajouter Device Intelligence a un site Framer

Ajoutez le script cside Device Intelligence et appelez sendClientTelemetry sur un site Framer no-code avec Custom Code et l'element Embed.

Le code personnalise ne s'execute que sur votre site publie

Le code personnalise et les scripts integres de Framer ne s’executent pas dans l’editeur ni dans l’apercu du canvas. Publiez votre site et testez sur l’URL en ligne.

Ce guide explique comment ajouter cside Device Intelligence a un site Framer : chargez le script client.js avec Custom Code de Framer, puis appelez sendClientTelemetry pour qu’un fingerprint de session soit reellement cree.

Vous avez seulement besoin du script de monitoring ?

Pour ajouter le script de monitoring standard de cside a Framer, suivez l’etape 1 ci-dessous mais collez plutot votre script csidetm.com. Le script de monitoring ne necessite aucun appel de fonction, vous pouvez donc ignorer l’etape 2. Ce guide se concentre sur le script Device Intelligence (fingerprinting).

Avant de commencer

  • Ajoutez le domaine de votre site dans le tableau de bord cside et confirmez que Device Intelligence est active pour lui. Voir Ajouter votre domaine.
  • Ayez votre URL de script Device Intelligence a portee de main. Elle ressemble a https://[your-team-id].csidefd.com/client.js. Pour une livraison first-party depuis votre propre domaine, configurez d’abord un CNAME - voir Configurer Device Intelligence.

Etape 1 - Ajoutez le script Device Intelligence

Ouvrez Custom Code

Dans votre projet Framer, allez dans Project Settings > Custom Code, puis cliquez sur Add Script.

Collez le script dans le head

Definissez l’emplacement sur Start of <head> tag pour que le script se charge avant votre page. Collez l’extrait ci-dessous et remplacez [your-team-id] par l’ID de votre equipe, ou utilisez votre domaine first-party, comme fingerprint.example.com.

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

Appliquez-le a chaque page

Donnez au script un nom reconnaissable, appliquez-le a All Pages et configurez-le pour qu’il s’execute a chaque visite de page. Enregistrez vos modifications.

Le script ne cree pas de fingerprint a lui seul

Charger client.js expose seulement la fonction sendClientTelemetry dans le navigateur. Un fingerprint de session n’est cree qu’apres que votre site l’appelle, ce que vous configurez a l’etape 2.

Etape 2 - Appelez sendClientTelemetry

Appelez sendClientTelemetry sur la page ou vous voulez collecter un fingerprint, comme le checkout, l’inscription ou la connexion. Vous pouvez l’appeler sans argument ou passer un objet externalIds optionnel avec des cles comme accountId, orderId, email ou cardLast4.

Comme Framer est no-code, utilisez l’une de ces deux methodes pour executer l’appel.

Option A - Element Embed (recommandee)

Utilisez ceci lorsque vous voulez creer un fingerprint sur une page specifique.

Ajoutez un element Embed

Sur la page, ouvrez Insert > Embed et faites glisser un element Embed sur le canvas. Il n’a pas besoin d’etre visible, vous pouvez donc le placer hors de l’ecran.

Collez l’appel dans le champ HTML

Dans le champ HTML de l’Embed, collez le script ci-dessous. Il attend que client.js finisse de charger, puis appelle sendClientTelemetry.

<script>
  (function () {
    function run() {
      if (typeof sendClientTelemetry !== "function") {
        setTimeout(run, 200); // client.js n'est pas encore pret
        return;
      }
      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }
        var sessionToken = result.token; // envoyez ceci a votre backend
      }).catch(console.error);
    }
    run();
  })();
</script>

Option B - Custom Code a l’echelle du site

Utilisez ceci lorsque vous voulez le meme appel sur plusieurs pages. Ajoutez un deuxieme extrait dans Project Settings > Custom Code, definissez son emplacement sur End of <body> tag, choisissez les pages sur lesquelles il doit s’executer et configurez-le pour qu’il s’execute a chaque visite de page. Collez le meme <script> montre dans l’Option A.

Etape 3 - Utilisez le token de session

sendClientTelemetry renvoie un token de session dans result.token. Envoyez ce token a votre backend et echangez-le avec l’API cside pour lire les datapoints de l’appareil. Les echanges en production utilisent une cle API Device Intelligence cote serveur generee dans le tableau de bord cside.

Depannage

  • Rien ne se passe dans l’editeur - Le code personnalise et les embeds ne s’executent que sur le site publie. Publiez et ouvrez l’URL en ligne.
  • sendClientTelemetry is not defined - Le script client.js est manquant ou charge trop tard. Confirmez que l’etape 1 le place dans Start of <head> tag et qu’il se charge avant votre appel.
  • Le script se charge mais aucun fingerprint n’apparait - Vous avez charge client.js mais n’avez jamais appele la fonction. Confirmez que l’etape 2 s’execute sur la page que vous testez.
  • Les requetes sont bloquees par la CSP - Si vous avez configure une Content Security Policy, autorisez votre domaine Device Intelligence pour script-src et connect-src. Voir Ajuster votre CSP.

Avance : code override

Si vous construisez avec des code components ou des overrides Framer, vous pouvez appeler sendClientTelemetry depuis React, par exemple lors de la soumission d’un formulaire, tant que client.js se charge toujours en premier via l’etape 1. Utilisez la meme forme d’appel montree ci-dessus et gerez le token renvoye dans votre handler.

Was this page helpful?