Installare l’SDK

Sono disponibili tre modi supportati per utilizzare Adobe Experience Platform Web SDK:

  1. Il modo migliore per utilizzare Adobe Experience Platform Web SDK è tramite l’interfaccia utente di raccolta dati.
  2. Adobe Experience Platform Web SDK è disponibile anche su una rete CDN (Content Delivery Network) da usare.
  3. Utilizzare la libreria NPM che esporta i moduli EcmaScript 5 ed EcmaScript 2015 (ES6).

Opzione 1: Installazione dell’estensione tag

Per la documentazione sull'estensione dei tag, consulta la documentazione di avvio

Opzione 2: Installazione della versione autonoma predefinita

La versione precompilata è disponibile su una rete CDN. Puoi fare riferimento alla libreria sulla rete CDN direttamente sulla tua pagina, oppure scaricarla e ospitarla sulla tua infrastruttura. È disponibile in formati minimizzati e non minimizzati. La versione non minimizzata è utile a scopo di debug.

Struttura URL: https://cdn1.adoberesources.net/alloy/[VERSION]/alloy.min.js OR alloy.js per la versione non minimizzata.

Esempio:

Aggiunta del codice

La versione standalone predefinita richiede un "codice base" aggiunto direttamente alla pagina. Copia e incolla il seguente "codice base" il più in alto possibile nel tag <head> del codice HTML:

<script>
  !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
  []).push(o),n[o]=function(){var u=arguments;return new Promise(
  function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
  (window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

Il "codice base" crea una funzione globale denominata alloy. Usa questa funzione per interagire con l'SDK. Per assegnare alla funzione globale un nome diverso, modificare il nome alloy come segue:

<script>
  !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
  []).push(o),n[o]=function(){var u=arguments;return new Promise(
  function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
  (window,["mycustomname"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

In questo esempio, la funzione globale viene rinominata mycustomname anziché alloy.

IMPORTANTE

Per evitare potenziali problemi, utilizza un nome contenente almeno un carattere che non è una cifra e che non è in conflitto con il nome di una proprietà già trovata in window.

Questo codice base, oltre a creare una funzione globale, carica anche il codice aggiuntivo contenuto all'interno di un file esterno (alloy.js) ospitato su un server. Per impostazione predefinita, questo codice viene caricato in modo asincrono per consentire alla pagina web di essere il più performante possibile. Questa è l’implementazione consigliata.

Supporto di Internet Explorer

Questo SDK utilizza le promesse, un metodo per comunicare il completamento delle attività asincrone. L’implementazione Promise utilizzata dall’SDK è supportata in modo nativo da tutti i browser di destinazione eccetto Internet Explorer. Per utilizzare l'SDK su Internet Explorer, è necessario disporre di window.Promise polyfill.

Per determinare se hai già un window.Promise polyfill:

  1. Apri il tuo sito web in Internet Explorer.
  2. Apri la console di debug del browser.
  3. Digita window.Promise nella console, quindi premi Invio.

Se viene visualizzato un elemento diverso da undefined, è probabile che sia già stato riempito in poliestere window.Promise. Un altro modo per determinare se window.Promise è polifuso è caricare il tuo sito web dopo aver completato le istruzioni di installazione di cui sopra. Se l'SDK genera un errore che indica qualcosa su una promessa, è probabile che non si sia riempita in poliestere window.Promise.

Se hai determinato di dover eseguire il polyfill window.Promise, includi il seguente tag script sopra il codice base fornito in precedenza:

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

Questo tag carica uno script che assicura che window.Promise sia un’implementazione Promise valida.

NOTA

Se scegli di caricare un’implementazione Promise diversa, assicurati che supporti Promise.prototype.finally.

Caricamento del file JavaScript in modo sincrono

Come spiegato nella sezione Aggiunta del codice, il codice di base copiato e incollato nell'HTML del sito web carica un file esterno. Il file esterno contiene le funzionalità di base dell'SDK. Qualsiasi comando che si tenta di eseguire durante il caricamento del file viene messo in coda e quindi elaborato dopo il caricamento del file. Il caricamento asincrono del file rappresenta il metodo di installazione più performante.

In alcune circostanze, tuttavia, potrebbe essere utile caricare il file in modo sincrono \ (ulteriori dettagli su queste circostanze saranno documentati più avanti). In questo modo il resto del documento HTML non viene analizzato ed eseguito dal browser fino a quando il file esterno non viene caricato ed eseguito. Questo ritardo aggiuntivo prima di visualizzare il contenuto principale agli utenti è in genere scoraggiato, ma può avere senso a seconda delle circostanze.

Per caricare il file in modo sincrono anziché in modo asincrono, rimuovi l’attributo async dal secondo tag script come mostrato di seguito:

<script>
  !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
  []).push(o),n[o]=function(){var u=arguments;return new Promise(
  function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
  (window,["alloy"]);
</script>
<script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js"></script>

Opzione 3: Utilizzo del pacchetto NPM

Adobe Experience Platform Web SDK è disponibile anche come pacchetto NPM. 🔗 NPMè il gestore di pacchetti per JavaScript. L'installazione del pacchetto NPM ti consente di avere il controllo del processo di creazione per il JavaScript Adobe Experience Platform Web SDK. Il pacchetto NPM espone i moduli EcmaScript versione 5 o EcmaScript versione 2015 (ES6) destinati ad essere eseguiti nel browser.

npm install @adobe/alloy

Il pacchetto NPM di Adobe Experience Platform Web SDK espone una funzione createInstance . Questa funzione viene utilizzata per creare un'istanza. L'opzione nome passata alla funzione controlla il prefisso utilizzato nella registrazione. Di seguito sono riportati alcuni esempi di utilizzo del pacchetto.

Utilizzo del pacchetto come modulo ECMAScript 2015 (ES6)

import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
NOTA

Il pacchetto NPM si basa su moduli CommonJS; pertanto, quando utilizzi un bundler, assicurati che il bundler supporti i moduli CommonJS. Alcuni bundler, come Rollup, richiedono un plug-in che fornisca il supporto CommonJS.

Utilizzo del pacchetto come modulo ECMAScript 5

var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });

Supporto di Internet Explorer

L’SDK di Adobe Experience Platform utilizza le promesse, che sono un metodo per comunicare il completamento delle attività asincrone. L’implementazione Promise utilizzata dall’SDK è supportata in modo nativo da tutti i browser di destinazione eccetto Internet Explorer. Per utilizzare l'SDK su Internet Explorer, è necessario disporre di window.Promise polyfill.

Una libreria che si può utilizzare per promessa di polyfill è promise-polyfill. Per ulteriori informazioni su come installare con NPM, consulta la documentazione promise-polyfill .

NOTA

Se scegli di caricare un’implementazione Promise diversa, assicurati che supporti Promise.prototype.finally.

In questa pagina