Skip to main content
Antes de comecar
Language

Adicionar Device Intelligence a um site Framer

Adicione o script cside Device Intelligence e chame sendClientTelemetry em um site Framer no-code usando Custom Code e o elemento Embed.

O codigo personalizado so roda no seu site publicado

O codigo personalizado e os scripts incorporados do Framer nao sao executados no editor nem na previa do canvas. Publique seu site e teste na URL ao vivo.

Este guia mostra como adicionar o cside Device Intelligence a um site Framer: carregue o script client.js com o Custom Code do Framer e depois chame sendClientTelemetry para que um fingerprint de sessao seja realmente criado.

So precisa do script de monitoramento?

Para adicionar o script de monitoramento padrao do cside ao Framer, siga o Passo 1 abaixo mas cole o seu script csidetm.com no lugar. O script de monitoramento nao precisa de nenhuma chamada de funcao, entao voce pode pular o Passo 2. Este guia foca no script de Device Intelligence (fingerprinting).

Antes de comecar

  • Adicione o dominio do seu site no painel do cside e confirme que o Device Intelligence esta habilitado para ele. Veja Adicionando seu dominio.
  • Tenha a URL do seu script de Device Intelligence em maos. Ela se parece com https://[your-team-id].csidefd.com/client.js. Para entrega first-party a partir do seu proprio dominio, configure primeiro um CNAME - veja Configurar Device Intelligence.

Passo 1 - Adicione o script de Device Intelligence

Abra o Custom Code

No seu projeto Framer, va em Project Settings > Custom Code e clique em Add Script.

Cole o script no head

Defina o local como Start of <head> tag para que o script carregue antes da sua pagina. Cole o trecho abaixo e substitua [your-team-id] pelo ID do seu time, ou use o seu dominio first-party, como fingerprint.example.com.

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

Aplique-o a cada pagina

De ao script um nome reconhecivel, aplique-o a All Pages e configure-o para rodar a cada visita de pagina. Salve suas alteracoes.

O script nao cria fingerprints sozinho

Carregar o client.js apenas expoe a funcao sendClientTelemetry no navegador. Um fingerprint de sessao so e criado depois que o seu site a chama, o que voce configura no Passo 2.

Passo 2 - Chame sendClientTelemetry

Chame sendClientTelemetry na pagina onde voce quer coletar um fingerprint, como checkout, cadastro ou login. Voce pode chama-la sem argumentos ou passar um objeto externalIds opcional com chaves como accountId, orderId, email ou cardLast4.

Como o Framer e no-code, use uma destas duas formas para executar a chamada.

Opcao A - Elemento Embed (recomendada)

Use isto quando quiser criar um fingerprint em uma pagina especifica.

Adicione um elemento Embed

Na pagina, abra Insert > Embed e arraste um elemento Embed para o canvas. Ele nao precisa ser visivel, entao voce pode posiciona-lo fora da tela.

Cole a chamada no campo HTML

No campo HTML do Embed, cole o script abaixo. Ele aguarda o client.js terminar de carregar e entao chama sendClientTelemetry.

<script>
  (function () {
    function run() {
      if (typeof sendClientTelemetry !== "function") {
        setTimeout(run, 200); // client.js ainda nao esta pronto
        return;
      }
      sendClientTelemetry({
        accountId: "customer-123",
        orderId: "order-456",
      }).then(function (result) {
        if (result.errors) {
          console.error(result.errors);
          return;
        }
        var sessionToken = result.token; // envie isto para o seu backend
      }).catch(console.error);
    }
    run();
  })();
</script>

Opcao B - Custom Code para todo o site

Use isto quando quiser a mesma chamada em muitas paginas. Adicione um segundo trecho em Project Settings > Custom Code, defina o local como End of <body> tag, escolha as paginas em que ele deve rodar e configure-o para rodar a cada visita de pagina. Cole o mesmo <script> mostrado na Opcao A.

Passo 3 - Use o token de sessao

sendClientTelemetry retorna um token de sessao em result.token. Envie esse token para o seu backend e troque-o com a API do cside para ler os datapoints do dispositivo. As trocas em producao usam uma chave de API de Device Intelligence do lado do servidor gerada no painel do cside.

Solucao de problemas

  • Nada acontece no editor - O codigo personalizado e os embeds so rodam no site publicado. Publique e abra a URL ao vivo.
  • sendClientTelemetry is not defined - O script client.js esta ausente ou carrega tarde demais. Confirme que o Passo 1 o coloca em Start of <head> tag e que ele carrega antes da sua chamada.
  • O script carrega mas nenhum fingerprint aparece - Voce carregou o client.js mas nunca chamou a funcao. Confirme que o Passo 2 roda na pagina que voce esta testando.
  • As requisicoes sao bloqueadas pela CSP - Se voce configurou uma Content Security Policy, permita o seu dominio de Device Intelligence para script-src e connect-src. Veja Ajustando sua CSP.

Avancado: code override

Se voce constroi com code components ou overrides do Framer, pode chamar sendClientTelemetry a partir do React, por exemplo no envio de um formulario, desde que o client.js ainda seja carregado primeiro pelo Passo 1. Use a mesma forma de chamada mostrada acima e trate o token retornado no seu handler.

Was this page helpful?