Instalar o SDK

Há três maneiras compatíveis de usar o Adobe Experience Platform Web SDK:

  1. A maneira preferida de usar o SDK da Web da Adobe Experience Platform é pela interface do usuário da coleta de dados ou pela interface do usuário do Experience Platform.
  2. O SDK da Web da Adobe Experience Platform também está disponível em uma rede de entrega de conteúdo (CDN) para você usar.
  3. Use a biblioteca NPM que exporta módulos EcmaScript 5 e EcmaScript 2015 (ES6).

Opção 1: Instalação da extensão de tag

Para obter a documentação sobre a extensão de tag, consulte documentação de lançamento

Opção 2: Instalação da versão independente pré-criada

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:

Adicionar o código

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.6.4/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.6.4/alloy.min.js" async></script>

Neste exemplo, a função global é renomeada mycustomname, em vez de alloy.

IMPORTANTE

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.

Suporte ao Internet Explorer

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:

  1. Abra seu site em Internet Explorer.
  2. Abra o console de depuração do navegador.
  3. Tipo 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.

OBSERVAÇÃO

Se optar por carregar uma implementação de Promessa diferente, verifique se ela suporta Promise.prototype.finally.

Carregamento sincronizado do arquivo JavaScript

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.6.4/alloy.min.js"></script>

Opção 3: Uso do pacote NPM

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 .

Uso do pacote como um módulo ECMAScript 2015 (ES6)

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

O pacote NPM depende de módulos CommonJS; portanto, ao usar um pacote, verifique se o pacote suporta módulos CommonJS. Alguns pacotes, como Rollup, requerem um plugin que fornece suporte ao CommonJS.

Uso do pacote como um módulo ECMAScript 5

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

Suporte ao Internet Explorer

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.

OBSERVAÇÃO

Se optar por carregar uma implementação de Promessa diferente, verifique se ela suporta Promise.prototype.finally.

Nesta página