Incorporare una scorecard

Una scorecard pubblicata può essere eseguita direttamente sul tuo sito web. Ti basta inserire un singolo tag script, il quale crea un iframe reattivo che regola automaticamente la propria altezza man mano che l’utente procede tra le domande.

Plugin per WordPress

Usi WordPress? Il plugin ufficiale DimensionKit per WordPress ti permette di incorporare le scorecard usando un blocco Gutenberg o uno shortcode senza toccare il codice.

Attivare l’incorporamento

L’incorporamento è disattivato per impostazione predefinita e va abilitato per ciascuna scorecard.

1. Apri il pannello di controllo all’indirizzo https://app.dimensionkit.com/admin
2. Modifica la scorecard e apri la scheda Embed
3. Attiva l’opzione Embed
4. Elenca le origini (domini) autorizzate a incorporarla
5. Copia lo snippet di codice generato

Solo le scorecard pubblicate possono essere incorporate. Una bozza restituisce 404.

Origini autorizzate

Un’origine è costituita da protocollo, host e porta — senza percorsi specifici o barre finali:

https://example.com
https://www.example.com
http://localhost:3000

https://example.com e https://www.example.com rappresentano origini distinte. Se il tuo sito risponde su entrambe, elencale entrambe.

Lo script comunica alla piattaforma l’indirizzo della pagina in cui si trova. Se tale origine non è inclusa nell’elenco autorizzato, l’iframe restituisce 403. Questa protezione è garantita lato server tramite l’header Content-Security-Policy: frame-ancestors e resta efficace anche se qualcuno copia il codice su un altro dominio.

Lo snippet di codice

<div id="scorecard"></div>
<script
  src="https://app.dimensionkit.com/embed.js"
  data-dk-scorecard="il-tuo-scorecard-slug"
  data-dk-target="#scorecard"
></script>

Attributo	Obbligatorio	Finalità
data-dk-scorecard	sì	Lo slug identificativo della scorecard
data-dk-target	sì	Il selettore CSS dell’elemento contenitore
data-dk-min-height	no	Altezza iniziale in pixel prima del primo ridimensionamento
data-dk-title	no	Titolo di accessibilità dell’iframe

Inizializzazione manuale in JavaScript

Se desideri gestire l’inserimento in maniera dinamica — all’interno di una Single Page Application o tramite un CMS:

<div id="scorecard"></div>
<script src="https://app.dimensionkit.com/embed.js"></script>
<script>
  window.DimensionKit.embed({
    target: '#scorecard',
    scorecard: 'il-tuo-scorecard-slug',
    minHeight: 640,
    title: 'Scorecard',
  });
</script>

Reagire alle azioni del visitatore

L’embed genera eventi personalizzati sull’elemento di destinazione, consentendo di attivare sistemi di analisi o mostrare contenuti extra alla fine del percorso:

document.querySelector('#scorecard')
  .addEventListener('dimensionkit:completed', () => {
    // Il visitatore ha visualizzato la pagina dei risultati
  });

Evento	Quando scatta
dimensionkit:loaded	La scorecard è stata caricata ed è pronta
dimensionkit:resize	L’altezza dei contenuti è cambiata; l’iframe si riadatta
dimensionkit:completed	Il partecipante ha raggiunto i risultati
dimensionkit:error	Si è verificato un errore di caricamento o invio

I medesimi eventi vengono inoltrati anche alla finestra principale mediante postMessage.

Risoluzione dei problemi

Spazio vuoto al posto della scorecard. Si tratta quasi sempre di un problema di origine non autorizzata. Consulta la console del browser: un errore 403 significa che il dominio non è registrato nell’elenco. Controlla la presenza di www. e l’uso corretto di http o https.

Errore 404 invece della scorecard. Lo slug non è corretto, la scorecard è ancora in bozza oppure non è stata attivata la funzione di incorporamento.

La scorecard si carica ma non adatta l’altezza. Un elemento genitore sulla tua pagina sta bloccando le dimensioni. Lo script adatta l’iframe, ma non può superare contenitori con altezza prefissata o proprietà overflow: hidden.