Documentación Journey Optimizer Guía de Journey Optimizer

Entrega de ofertas mediante la API de Edge Decisioning edge-decisioning-api

Last update: Wed Jul 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

Experimentado
Desarrollador

Introducción y requisitos previos edge-overview-and-prerequisites

Adobe Experience Platform Web SDK es una biblioteca JavaScript del lado del cliente que permite a los clientes de Adobe Experience Cloud interactuar con los distintos servicios del Experience Cloud a través del Edge Network del Experience Platform.

El SDK web de Experience Platform admite la consulta de las soluciones de personalización en el momento del Adobe, incluida la Gestión de decisiones, lo que le permite recuperar y procesar ofertas personalizadas creadas mediante API o la Biblioteca de ofertas. Para obtener instrucciones más detalladas, consulte la documentación sobre creación de una oferta.

Existen dos maneras de implementar la administración de decisiones con Platform Web SDK. Una forma está dirigida a los desarrolladores y requiere conocimientos de sitios web y programación. La otra forma es utilizar la interfaz de usuario de Adobe Experience Platform para configurar ofertas, lo que solo requiere que se haga referencia a un pequeño script en el encabezado de la página del HTML.

Consulte la documentación de Adobe Experience Platform sobre administración de decisiones para obtener más información sobre cómo entregar ofertas personalizadas mediante el SDK web de Adobe Experience Platform.

SDK web de Adobe Experience Platform aep-web-sdk

El SDK web de Platform sustituye a los siguientes SDK:

Visitor.js
AppMeasurement.js
AT.js
DIL.js

El SDK no combinó estas bibliotecas y es una nueva implementación desde cero. Para utilizarlo, primero debe seguir estos pasos:

Asegúrese de que su organización tiene los permisos adecuados para utilizar el SDK y de que ha configurado los permisos correctamente.
Configure su secuencia de datos en la ficha Recopilación de datos de su cuenta en Adobe Experience Cloud.
Instale el SDK. Existen varios métodos para hacerlo, que se tratan en la página Instalar el SDK. Esta página continuará con cada método de implementación diferente.

Para usar el SDK, debe tener definidos un esquema y un conjunto de datos.

Para personalizar ofertas, debe configurar por separado la personalización/perfiles.

Para configurar el SDK para la administración de decisiones, siga uno de estos dos pasos:

Opción 1: Instalar la extensión de etiqueta y la implementación mediante Launch

Esta opción es más fácil de usar para las personas que pueden tener menos experiencia en la codificación.

Crear una propiedad de etiqueta
Agregar el código incrustado
Instale y configure la extensión SDK para web de Adobe Experience Platform con la secuencia de datos que creó seleccionando la configuración en la lista desplegable "Secuencia de datos". Consulte la documentación sobre extensiones.
Cree los elementos de datos necesarios. Como mínimo, debe crear un mapa de identidad del SDK web de Platform y un elemento de datos del objeto XDM de SDK web de Platform.
Cree sus reglas:

Agregue una acción Enviar evento del SDK web de Platform y agregue los ámbitos de decisión relevantes a la configuración de esa acción
Cree y publique una biblioteca que contenga todas las reglas, elementos de datos y extensiones relevantes que haya configurado.

Opción 2: Implementar manualmente con la versión independiente prediseñada

Estos son los pasos necesarios para utilizar la administración de decisiones mediante la instalación independiente prediseñada del SDK web. En esta guía se da por hecho que es la primera vez que implementa el SDK, por lo que es posible que no se le apliquen todos los pasos. Esta guía también supone cierta experiencia de desarrollo.

Incluya el siguiente fragmento de JavaScript de la opción 2: La versión independiente prediseñada en esta página en la sección <head> de la página de su 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>

Necesitará dos ID desde su cuenta de Adobe para configurar el SDK: su edgeConfigId y su orgId. edgeConfigId es el mismo que el ID de su secuencia de datos, que debería haber configurado en Requisitos previos.

Para encontrar el ID de edgeConfigID/secuencia de datos, vaya a Recopilación de datos y seleccione la secuencia de datos. Para encontrar su orgId, vaya a su perfil.

Configure el SDK en JavaScript siguiendo las instrucciones de esta página. Siempre utilizará edgeConfigId y orgId en la función de configuración. La documentación también describe qué parámetros opcionales existen para la configuración. La configuración final puede tener un aspecto similar al siguiente:

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 la extensión de Chrome de Debugger para utilizarla con la depuración. Se puede encontrar aquí: https://chrome.google.com/webstore/detail/adobe-experience-platform/bfnnokhpnncpkdmbokanobigaccjkpob

A continuación, inicie sesión en su cuenta desde Debugger. A continuación, vaya a Registros y asegúrese de que está conectado al espacio de trabajo correcto. Ahora, copie la versión codificada en base64 del ámbito de decisión de su oferta.

Al editar el sitio web, incluya el script con la configuración y la función sendEvent para enviar el ámbito de decisión al Adobe.

Ejemplo:

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    });

Consulte lo siguiente para ver un ejemplo sobre cómo gestionar la respuesta:

javascript
    alloy("sendEvent", {
        "decisionScopes":
        [
        "eyJ4ZG06YWN0aXZpdHlJZCI6Inhjb3JlOm9mZmVyLWFjdGl2aXR5OjE0ZWE4MDhhZjJjZDM1NzQiLCJ4ZG06cGxhY2VtZW50SWQiOiJ4Y29yZTpvZmZlci1wbGFjZW1lbnQ6MTRjNGFmZDI2OTXXXXXXXXXX"
        ]
    }).then(function(result) {
        Object.entries(result).forEach(([key, value]) => {
            console.log(key, value);
        });
    });

Puede utilizar el depurador para comprobar que se ha conectado correctamente a la red de Edge.

NOTE

Si no ve una conexión al perímetro de en los registros, es posible que tenga que deshabilitar el bloqueador de anuncios.

Consulte cómo creó la oferta y el formato utilizado. En función de los criterios cumplidos en la decisión, se le devolverá una oferta que contiene la información especificada al crearla en Adobe Experience Platform.

En este ejemplo, el JSON que se va a devolver es:

json
{
   "name":"ABC Test",
   "description":"This is a test offer",
   "link":"https://sampletesting.online/",
   "image":"https://sample-demo-URL.png"
}

Administre el objeto response y analice los datos que necesite. Dado que puede enviar varios ámbitos de decisión en una llamada de sendEvent, la respuesta podría ser ligeramente 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\"}"
                }
            }
        ]
    }
    ]
}

En este ejemplo, la ruta necesaria para gestionar y utilizar los detalles específicos de la oferta en la página web era: result['decisions'][0]['items'][0]['data']['content']

Para establecer las variables de 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;

recommendation-more-help

b22c9c5d-9208-48f4-b874-1cefb8df4d76