Fornecer ofertas usando a API do Edge Decisioning edge-decisioning-api
Introdução e pré-requisitos edge-overview-and-prerequisites
A variável Adobe Experience Platform Web SDK O é uma biblioteca JavaScript do lado do cliente que permite aos clientes da Adobe Experience Cloud interagir com os vários serviços no Experience Cloud por meio da Rede de borda do 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 em criação de uma oferta.
Há duas maneiras de implementar a gestão de decisões com a SDK da Web da Platform. 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 Adobe Experience Platform Web SDK.
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.
-
Configurar o fluxo de dados na guia Coleção de dados da sua conta na Adobe Experience Cloud.
-
Instale o SDK. Existem vários métodos para fazer isso, que são abordados no Instalar a página do SDK. Esta página continuará com cada método diferente de implementação.
Para usar o SDK, é necessário ter um schema e uma sequência de dados definido.
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 o necessário Elementos de dados. 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 seu 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
-
Criar e publicar 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 JavaScript da Opção 2: a versão independente pré-criada em esta página no <head> seção da sua página de 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 do 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 o sendEvent função 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 de borda.
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 um sendEvent chamada, sua resposta poderá parecer 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 lidar 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;