Installare Web SDK

Ultimo aggiornamento: 2024-01-09
  • Argomenti:
  • Web SDK
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
    User
    Admin
    Leader

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

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

Opzione 1: installazione dell’estensione tag

Per la documentazione sull’estensione tag, consulta Documentazione sui tag

Opzione 2: installazione della versione standalone precompilata

La versione predefinita è 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/[VERSIONE]/alloy.min.js OR alloy.js per la versione non minimizzata.

Ad esempio:

Aggiunta del codice

La versione standalone precompilata richiede l’aggiunta di un "codice di base" direttamente alla pagina. Copia e incolla il seguente "codice di base" il più in alto possibile nel <head> tag del 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.14.0/alloy.min.js" async></script>

Il "codice di base" crea una funzione globale denominata alloy. Utilizza questa funzione per interagire con l’SDK. Se si desidera assegnare un altro nome alla funzione globale, modificare il alloy nome 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.14.0/alloy.min.js" async></script>

In questo esempio, la funzione globale viene rinominata mycustomname, invece di alloy.

IMPORTANTE

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

Questo codice di base, oltre a creare una funzione globale, carica anche il codice aggiuntivo contenuto in 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 ottenere le massime prestazioni possibili. Questa è l’implementazione consigliata.

Supporto di Internet Explorer

IMPORTANTE

Alla fine di aprile 2024, Adobe Experience Platform Web SDK rimuoverà il supporto per tutte le versioni di Internet Explorer.

Questo SDK utilizza le promesse, un metodo per comunicare il completamento di attività asincrone. Il Promessa L'implementazione utilizzata dall'SDK è supportata in modalità nativa da tutti i browser di destinazione eccetto Internet Explorer. Per utilizzare l’SDK su Internet Explorer, devi avere window.Promise poleriempito.

Per determinare se si dispone già di window.Promise poleriempito:

  1. Apri il sito web in Internet Explorer.
  2. Apri la console di debug del browser.
  3. Tipo window.Promise e premere Invio.

Se qualcosa di diverso da undefined è probabile che sia già stato eseguito il polyfill window.Promise. Un altro modo per determinare se window.Promise è polyfill è caricando il tuo sito web dopo aver completato le istruzioni di installazione di cui sopra. Se l’SDK genera un errore nel menzionare qualcosa su una promessa, probabilmente non sei stato polilemizzato window.Promise.

Se hai stabilito che devi riempire il computer window.Promise, includi il seguente tag script sopra il codice di 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 è 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 nel HTML del sito web carica un file esterno. Il file esterno contiene le funzionalità principali 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 del file in modo asincrono è il metodo di installazione più performante.

In determinate circostanze, tuttavia, potrebbe essere necessario caricare il file in modo sincrono. In questo modo si impedisce al resto del documento HTML di essere analizzato e renderizzato 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 sconsigliato, ma può essere utile a seconda delle circostanze.

Per caricare il file in modo sincrono anziché asincrono, rimuovere async attributo dal secondo 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.14.0/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 consente di avere il controllo del processo di build per il JavaScript di Adobe Experience Platform Web SDK. Il pacchetto NPM espone i moduli EcmaScript versione 5 o EcmaScript versione 2015 (ES6) destinati a essere eseguiti nel browser.

npm install @adobe/alloy

Il pacchetto NPM di Adobe Experience Platform Web SDK espone un createInstance funzione. Questa funzione viene utilizzata per creare un’istanza. L’opzione name 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 sui moduli CommonJS; pertanto, quando utilizzi un bundler, assicurati che il bundler supporti i moduli CommonJS. Alcuni bundle, come Rollup, richiedono un plugin che fornisce supporto per 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, un metodo per comunicare il completamento di attività asincrone. Il Promessa L'implementazione utilizzata dall'SDK è supportata in modalità nativa da tutti i browser di destinazione eccetto Internet Explorer. Per utilizzare l’SDK su Internet Explorer, devi avere window.Promise poleriempito.

Una libreria che potresti utilizzare per il polyfill della promessa è promise-polyfill. Consulta la documentazione promise-polyfill per ulteriori informazioni su come eseguire l'installazione con NPM.

NOTA

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

In questa pagina