Skip to main content
Voordat je begint
Language

Device Intelligence toevoegen aan een Framer-site

Voeg het cside Device Intelligence-script toe en roep sendClientTelemetry aan op een no-code Framer-site met Custom Code en het Embed-element.

Aangepaste code draait alleen op je gepubliceerde site

Aangepaste code en ingesloten scripts in Framer worden niet uitgevoerd in de editor of de canvasvoorbeeldweergave. Publiceer je site en test op de live URL.

Deze handleiding laat zien hoe je cside Device Intelligence aan een Framer-site toevoegt: laad het client.js-script met Custom Code van Framer en roep daarna sendClientTelemetry aan zodat er daadwerkelijk een sessie-fingerprint wordt aangemaakt.

Heb je alleen het monitoringscript nodig?

Om het standaard cside-monitoringscript aan Framer toe te voegen, volg je Stap 1 hieronder maar plak je in plaats daarvan je csidetm.com-script. Het monitoringscript heeft geen functieaanroep nodig, dus je kunt Stap 2 overslaan. Deze handleiding richt zich op het Device Intelligence-script (fingerprinting).

Voordat je begint

  • Voeg het domein van je site toe in het cside-dashboard en bevestig dat Device Intelligence ervoor is ingeschakeld. Zie Uw domein toevoegen.
  • Houd je Device Intelligence-script-URL bij de hand. Die ziet er zo uit: https://[your-team-id].csidefd.com/client.js. Voor first-party levering vanaf je eigen domein stel je eerst een CNAME in - zie Device Intelligence instellen.

Stap 1 - Voeg het Device Intelligence-script toe

Open Custom Code

Ga in je Framer-project naar Project Settings > Custom Code en klik op Add Script.

Plak het script in de head

Stel de locatie in op Start of <head> tag zodat het script laadt voordat je pagina laadt. Plak het onderstaande fragment en vervang [your-team-id] door je team-ID, of gebruik je first-party domein, zoals fingerprint.example.com.

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

Pas het toe op elke pagina

Geef het script een herkenbare naam, pas het toe op All Pages en stel het in om uit te voeren bij elk paginabezoek. Sla je wijzigingen op.

Het script maakt zelf geen fingerprint aan

Het laden van client.js stelt alleen de functie sendClientTelemetry beschikbaar in de browser. Een sessie-fingerprint wordt pas aangemaakt nadat je site die aanroept, wat je instelt in Stap 2.

Stap 2 - Roep sendClientTelemetry aan

Roep sendClientTelemetry aan op de pagina waar je een fingerprint wilt verzamelen, zoals checkout, registratie of inloggen. Je kunt de functie zonder argumenten aanroepen of een optioneel externalIds-object meegeven met sleutels zoals accountId, orderId, email of cardLast4.

Omdat Framer no-code is, gebruik je een van deze twee manieren om de aanroep uit te voeren.

Optie A - Embed-element (aanbevolen)

Gebruik dit wanneer je een fingerprint op een specifieke pagina wilt maken.

Voeg een Embed-element toe

Open op de pagina Insert > Embed en sleep een Embed-element naar het canvas. Het hoeft niet zichtbaar te zijn, dus je kunt het buiten beeld plaatsen.

Plak de aanroep in het HTML-veld

Plak in het HTML-veld van de Embed het onderstaande script. Het wacht tot client.js klaar is met laden en roept dan sendClientTelemetry aan.

<script>
  (function () {
    function run() {
      if (typeof sendClientTelemetry !== "function") {
        setTimeout(run, 200); // client.js is nog niet klaar
        return;
      }
      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }
        var sessionToken = result.token; // stuur dit naar je backend
      }).catch(console.error);
    }
    run();
  })();
</script>

Optie B - Custom Code voor de hele site

Gebruik dit wanneer je dezelfde aanroep op veel pagina’s wilt. Voeg een tweede fragment toe in Project Settings > Custom Code, stel de locatie in op End of <body> tag, kies de pagina’s waarop het moet draaien en stel het in om uit te voeren bij elk paginabezoek. Plak hetzelfde <script> dat in Optie A wordt getoond.

Stap 3 - Gebruik het sessietoken

sendClientTelemetry retourneert een sessietoken in result.token. Stuur dat token naar je backend en wissel het in bij de cside-API om de apparaat-datapoints te lezen. Productie-uitwisselingen gebruiken een server-side Device Intelligence-API-sleutel uit het cside-dashboard.

Problemen oplossen

  • Er gebeurt niets in de editor - Aangepaste code en embeds draaien alleen op de gepubliceerde site. Publiceer en open de live URL.
  • sendClientTelemetry is not defined - Het client.js-script ontbreekt of laadt te laat. Bevestig dat Stap 1 het in Start of <head> tag plaatst en dat het laadt voordat je aanroep wordt uitgevoerd.
  • Script laadt maar er verschijnen geen fingerprints - Je hebt client.js geladen maar de functie nooit aangeroepen. Bevestig dat Stap 2 draait op de pagina die je test.
  • Verzoeken worden geblokkeerd door CSP - Als je een Content Security Policy hebt ingesteld, sta dan je Device Intelligence-domein toe voor script-src en connect-src. Zie Uw CSP aanpassen.

Geavanceerd: code override

Als je bouwt met Framer code components of overrides, kun je sendClientTelemetry in plaats daarvan vanuit React aanroepen, bijvoorbeeld bij het verzenden van een formulier, zolang client.js nog steeds eerst wordt geladen via Stap 1. Gebruik dezelfde aanroepvorm die hierboven wordt getoond en verwerk het geretourneerde token in je handler.

Was this page helpful?