Há três maneiras compatíveis de usar o Adobe Experience Platform Web SDK:
Para obter a documentação sobre a extensão de tag, consulte Documentação de tags
A versão pré-criada está disponível em um CDN. Você pode fazer referência à biblioteca no CDN diretamente na sua página ou baixá-la e hospedá-la em sua própria infraestrutura. Ele está disponível em formatos minificados e não minificados. A versão não minificada é útil para fins de depuração.
Estrutura do URL: https://cdn1.adoberesources.net/alloy/[VERSÃO]/alloy.min.js OU alloy.js para a versão não minificada.
Por exemplo:
A versão independente pré-criada requer um "código base" adicionado diretamente à página. Copie e cole o seguinte "código base" o mais alto possível no <head>
tag do seu 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>
O "código base" cria uma função global chamada alloy
. Use essa função para interagir com o SDK. Se quiser nomear a função global como outra coisa, altere a variável alloy
nome como 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>
Neste exemplo, a função global é renomeada mycustomname
, em vez de alloy
.
Para evitar possíveis problemas, use um nome que contenha pelo menos um caractere que não seja um dígito e que não entre em conflito com o nome de uma propriedade já encontrada em window
.
Esse código base, além de criar uma função global, também carrega um código adicional contido em um arquivo externo (alloy.js
) hospedado em um servidor. Por padrão, esse código é carregado de forma assíncrona para permitir que sua página da Web tenha o maior desempenho possível. Essa é a implementação recomendada.
Esse SDK usa promessas, que são um método de comunicar a conclusão de tarefas assíncronas. O Promessa A implementação usada pelo SDK é nativamente compatível com todos os navegadores de destino, exceto Internet Explorer. Para usar o SDK em Internet Explorer, você deve ter window.Promise
polietileno.
Para determinar se você já tem window.Promise
polietileno:
window.Promise
no console e pressione Enter.Se algo diferente de undefined
for exibido, provavelmente já está com polim window.Promise
. Outra maneira de determinar se window.Promise
for polyfill é carregando seu site após concluir as instruções de instalação acima. Se o SDK gerar um erro mencionando algo sobre uma promessa, você provavelmente não preencheu o polimerio window.Promise
.
Se tiver determinado que você deve preencher polyfill window.Promise
, inclua a seguinte tag de script acima do código base fornecido anteriormente:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
Essa tag carrega um script que garante que window.Promise
é uma implementação válida do Promise.
Se optar por carregar uma implementação de Promessa diferente, verifique se ela suporta Promise.prototype.finally
.
Conforme explicado na seção Adicionar o código, o código base que você copiou e colou no HTML de seu site carrega um arquivo externo. O arquivo externo contém a funcionalidade principal do SDK. Qualquer comando que você tente executar enquanto esse arquivo é carregado está na fila e é processado depois que o arquivo é carregado. Carregar o arquivo de forma assíncrona é o método de instalação mais eficiente.
Em determinadas circunstâncias, no entanto, você pode querer carregar o arquivo de forma síncrona (mais detalhes sobre essas circunstâncias serão documentados posteriormente). Isso impede que o restante do documento do HTML seja analisado e renderizado pelo navegador até que o arquivo externo seja carregado e executado. Normalmente, esse atraso adicional antes de exibir o conteúdo principal para os usuários é desencorajado, mas pode fazer sentido dependendo das circunstâncias.
Para carregar o arquivo de forma síncrona, em vez de de de forma assíncrona, remova o async
atributo do segundo script
conforme mostrado abaixo:
<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>
O SDK da Web da Adobe Experience Platform também está disponível como um pacote NPM. NPM é o gerenciador de pacotes do JavaScript. A instalação do pacote NPM permite ter controle do processo de build do JavaScript do SDK da Web da Adobe Experience Platform. O pacote NPM expõe módulos EcmaScript versão 5 ou módulos EcmaScript versão 2015 (ES6) destinados a serem executados no navegador.
npm install @adobe/alloy
O pacote NPM do SDK da Web da Adobe Experience Platform expõe um createInstance
. Essa função é usada para criar uma instância. A opção name passada para a função controla o prefixo usado no registro. Abaixo estão exemplos de uso do pacote .
import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
var alloyLibrary = require("@adobe/alloy");
var alloy = alloyLibrary.createInstance({ name: "alloy" });
alloy("config", { ... });
alloy("sendEvent", { ... });
O Adobe Experience Platform SDK usa promessas, que são um método de comunicar a conclusão de tarefas assíncronas. O Promessa A implementação usada pelo SDK é nativamente compatível com todos os navegadores de destino, exceto Internet Explorer. Para usar o SDK em Internet Explorer, você deve ter window.Promise
polietileno.
Uma biblioteca que você poderia usar para cumprir a promessa de polyfill é a promessa de polyfill. Consulte a documentação de declaração de polyfill para obter mais informações sobre como instalar com o NPM.
Se optar por carregar uma implementação de Promessa diferente, verifique se ela suporta Promise.prototype.finally
.