Fornecer ofertas usando a API do Edge Decisioning edge-decisioning-api
Introdução e pré-requisitos edge-overview-and-prerequisites
O Adobe Experience Platform Web SDK é uma biblioteca JavaScript no lado do cliente que permite aos clientes da Adobe Experience Cloud interagir com os vários serviços no Experience Cloud por meio do Edge Network Experience Platform.
O SDK da Web do Experience Platform é compatível com a consulta de soluções de personalização no Adobe, incluindo a Gestão de decisões, permitindo recuperar e renderizar ofertas personalizadas que você criou usando APIs ou a Biblioteca de ofertas. Para obter instruções mais detalhadas, consulte a documentação sobre criação de uma oferta.
Há duas maneiras de implementar a gestão de decisões com o SDK da Web da plataforma. Uma maneira é voltada para desenvolvedores e requer conhecimento de sites e programação. Outra maneira é usar a interface do usuário do Adobe Experience Platform para configurar ofertas que exigem apenas um script pequeno para ser referenciado no cabeçalho da página HTML.
Consulte a documentação do Adobe Experience Platform em gestão de decisões para obter mais informações sobre como fornecer ofertas personalizadas usando o SDK da Web da Adobe Experience Platform.
SDK da Web da Adobe Experience Platform aep-web-sdk
O SDK da Web da Platform substitui os seguintes SDKs:
- Visitor.js
- AppMeasurement.js
- AT.js
- DIL.js
O SDK não combinou essas bibliotecas e é uma nova implementação desde o início. Para usá-lo, primeiro siga estas etapas:
-
Verifique se sua organização tem as permissões apropriadas para usar o SDK e se você configurou as permissões corretamente.
-
Configure sua sequência de dados na guia Coleção de dados da sua conta na Adobe Experience Cloud.
-
Instale o SDK. Há vários métodos para fazer isso, que são abordados na página Instalar o SDK. Esta página continuará com cada método diferente de implementação.
Para usar o SDK, você deve ter um esquema e uma sequência de dados definidos.
Para personalizar ofertas, você deve configurar separadamente seus perfis/personalizações.
Para configurar o SDK para a gestão de decisões, siga uma das duas etapas abaixo:
Opção 1 - Instalar a extensão e a implementação da tag usando o Launch
Essa opção é mais fácil de usar para pessoas que podem ter menos experiência em codificação.
-
Instale e configure a extensão Adobe Experience Platform Web SDK com a sequência de dados criada selecionando a configuração na lista suspensa "Sequência de dados". Consulte a documentação em extensões.
-
Crie os Elementos de Dados necessários. No mínimo, você deve criar um Mapa de identidade do SDK da Web da plataforma e um elemento de dados do Objeto XDM do SDK da Web da plataforma.
-
Crie suas Regras:
Adicione uma ação Enviar evento do SDK da Web da Platform e adicione os escopos de decisão relevantes à configuração dessa ação
-
Crie e publique uma biblioteca contendo todas as Regras, Elementos de Dados e Extensões relevantes que você configurou.
Opção 2 - Implementação manual usando a versão independente pré-criada
Estas são as etapas necessárias para usar a gestão de decisões usando a instalação independente pré-criada do SDK da Web. Este guia supõe que esta é a primeira vez que você implementa o SDK, portanto, todas as etapas podem não se aplicar a você. Este guia também pressupõe alguma experiência de desenvolvimento.
Inclua o seguinte trecho de JavaScript da Opção 2: A Versão Autônoma Pré-Compilada em esta página na seção <head> da sua página HTML.
javascript
<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.js" async></script>
Você precisará de duas IDs na conta do Adobe para definir a configuração do SDK: a edgeConfigId e a orgId. O edgeConfigId é o mesmo que a ID do Datastream, que você deve ter configurado nos Pré-requisitos.
Para encontrar sua edgeConfigID/ID do fluxo de dados, vá para Coleção de dados e selecione seu fluxo de dados. Para encontrar sua orgId, acesse seu perfil.
Configure o SDK no JavaScript seguindo as instruções nesta página. Você sempre usará edgeConfigId e orgId na função de configuração. A documentação também descreve quais parâmetros opcionais existem para sua configuração. Sua configuração final pode acabar ficando mais ou menos assim:
javascript
alloy("configure", {
"edgeConfigId": "12345678-0ABC-DEF-GHIJ-KLMNOPQRSTUV",
"orgId":"ABCDEFGHIJKLMNOPQRSTUVW@AdobeOrg",
"debugEnabled": true,
"edgeDomain": "edge.adobedc.net",
"clickCollectionEnabled": true,
"idMigrationEnabled": true,
"thirdPartyCookiesEnabled": true,
"defaultConsent":"in"
});
Instale a extensão Chrome do Debugger para usar com a depuração. Isso pode ser encontrado aqui: https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob
Em seguida, faça logon na conta do no depurador. Em seguida, acesse Logs e verifique se você está conectado ao espaço de trabalho correto. Agora, copie da sua oferta a versão codificada em base64 do escopo de decisão.
Ao editar o site, inclua o script com a configuração e a função sendEvent para enviar o escopo de decisão para o Adobe.
Exemplo:
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
});
Consulte o seguinte para obter um exemplo de como lidar com a resposta:
javascript
alloy("sendEvent", {
"decisionScopes":
[
"eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
]
}).then(function(result) {
Object.entries(result).forEach(([key, value]) => {
console.log(key, value);
});
});
Você pode usar o depurador para verificar se se conectou com êxito à rede do Edge.
Consulte como você criou a oferta e a formatação usada. Com base nos critérios atendidos na decisão, uma oferta será retornada para você contendo as informações especificadas ao criá-la na Adobe Experience Platform.
Neste exemplo, o JSON a ser retornado é:
json
{
"name":"ABC Test",
"description":"This is a test offer",
"link":"https://sampletesting.online/",
"image":"https://sample-demo-URL.png"
}
Manipule o objeto de resposta e analise os dados necessários. Como você pode enviar vários escopos de decisão em uma chamada sendEvent, sua resposta pode ser um pouco diferente.
json
{
"id": "abrxgl843d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"ABC Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
json
{
"propositions":
[
{
"renderAttempted": false,
"id": "e15ecb09-993e-4b66-93d8-0a4c77e3d913",
"scope": "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTVlNWRmOSJ9",
"items":
[
{
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"etag": "1",
"schema": "https://ns.adobe.com/experience/offer-management/content-component-json",
"data": {
"id": "xcore:fallback-offer:14ea7f1ea26ebd0a",
"format": "application/json",
"language": [
"en-us"
],
"content": "{\"name\":\"Claire Hubacek Test\",\"description\":\"This is a test offer\", \"link\":\"https://sampletesting.online/\",\"image\":\"https://sample-demo-URL.png\"}"
}
}
]
}
]
}
Neste exemplo, o caminho necessário para manipular e usar os detalhes específicos da oferta na página da Web foi: result['decisions'][0]['items'][0]['data']['content']
Para definir as variáveis JS:
javascript
const offer = JSON.parse(result['decisions'][0]['items'][0]['data']['content']);
let offerURL = offer['link'];
let offerDescription = offer['description'];
let offerImageURL = offer['image'];
document.getElementById("offerDescription").innerHTML = offerDescription;
document.getElementById('offerImage').src = offerImageURL;