Device Intelligence toevoegen aan een Webflow-site

Deze handleiding laat zien hoe je cside Device Intelligence toevoegt aan een Webflow-site: laad het client.js-script met Webflow Custom code en roep daarna sendClientTelemetry aan zodat er een sessiefingerprint wordt gemaakt.

Voordat je begint

• Gebruik een Webflow-siteplan of Workspace-plan dat Custom code en Code Embed ondersteunt.
• Voeg het domein van je site toe in het cside-dashboard en controleer dat Device Intelligence ervoor is ingeschakeld. Zie Je domein toevoegen.
• Houd je Device Intelligence-script-URL bij de hand. Die ziet eruit als https://[your-team-id].csidefd.com/client.js. Om je volledige script-URL te zien, ga je naar het cside-dashboard. 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

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

Stap 2 - Roep sendClientTelemetry aan

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

Omdat Webflow custom code globaal of op een enkele pagina kan uitvoeren, gebruik je een van deze opties.

Optie A - Custom code op paginaniveau (aanbevolen)

Gebruik dit wanneer je een specifieke pagina wilt fingerprinten.

<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; // stuur dit naar je backend
      }).catch(console.error);
    }

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

Optie B - Sitebrede Footer code

Gebruik dit wanneer je dezelfde call op veel pagina’s wilt. Voeg in Site settings > Custom code een tweede snippet toe in Footer code en plak hetzelfde <script> als in Optie A.

Optie C - Code Embed

Gebruik Webflow Code Embed alleen wanneer de call in een specifieke sectie of component moet staan. Plak hetzelfde <script> als in Optie A in de embed en publiceer de pagina voordat je test.

Optioneel - Gebruik het sessietoken

sendClientTelemetry retourneert een sessietoken in result.token. Je hoeft dat token alleen naar je backend te sturen als je applicatie de apparaat-datapoints wil ophalen en gebruiken. Productie-uitwisselingen gebruiken een server-side Device Intelligence API-sleutel uit het cside-dashboard.

Plaats de Device Intelligence API-sleutel niet in Webflow Custom code of Code Embed-snippets. Bewaar deze in je backendsecrets.

• Events API - de volledige tokenuitwisseling en het responseschema
• Datapoints ophalen - de data achter een token lezen

Problemen oplossen

• Er verschijnt niets in Preview - Als je test in Webflow Preview- of Comment-modus, controleer dan dat previewondersteuning voor custom code is ingeschakeld. Publiceer en open de live URL voor de laatste validatie.
• sendClientTelemetry is not defined - Het client.js-script ontbreekt of wordt te laat geladen. Controleer dat Stap 1 het in Head code plaatst en dat de gepubliceerde pagina het laadt voordat je call draait.
• Script laadt, maar er verschijnen geen fingerprints - Je hebt client.js geladen, maar de functie nooit aangeroepen. Controleer dat Stap 2 draait op de pagina die je test.
• De script-URL is voor monitoring, niet voor Device Intelligence - Het standaard monitoringscript gebruikt csidetm.com. Device Intelligence gebruikt je csidefd.com-URL of je first-party fingerprintdomein.
• 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 Je CSP aanpassen.