Configurar con autenticación híbrida
Reglas de eCDN para implementaciones híbridas
Einstein Activities para implementaciones híbridas
Habilidades para garantizar el éxito
Ask the Community
Con los paneles de informes&, puede identificar tendencias a lo largo del tiempo y tomar decisiones comerciales más inteligentes en función de sus datos de B2C Commerce.
El análisis de los paneles de informes & solo se puede derivar de los registros del adaptador web o de Einstein Activities API. De forma predeterminada, los datos analíticos de SFRA y SiteGenesis se almacenan en los registros del adaptador web, mientras que el PWA Kit envía datos analíticos a Einstein Activities API.
Si está buscando una implementación híbrida, en la que algunas páginas funcionan con PWA Kit y otras con SFRA o SiteGenesis, y desea usar los paneles de informes & en todo su sitio, debe actualizar la implementación de SFRA o SiteGenesis para usar la Einstein Activities API. Esto garantiza que la API capture la experiencia completa del comprador, independientemente de si el comprador está en PWA Kit, SFRA o SiteGenesis.
Esta guía muestra cómo integrar Einstein Activities API con el checkout de SFRA, de modo que envíe las mismas actividades que el checkout de PWA Kit.
Si su implementación por fases tiene páginas adicionales en SFRA o SiteGenesis que envían datos analíticos a los registros del adaptador web, para esas páginas puede seguir un proceso similar al que se describe en esta guía. Mire las páginas correspondientes en la Retail React App y observe qué actividades envían. Luego, deberá enviar las mismas actividades en sus páginas de SFRA o SiteGenesis. Como recurso, esta visión general de las actividades de Einstein le muestra dónde se supone que se deben usar esas actividades.
Las implementaciones que usan SiteGenesis con Composable Storefront no son oficialmente compatibles.
Note
Tenga cuidado al integrar los ejemplos de código proporcionados y pruebe siempre su código antes de enviarlo a producción.
Las líneas que se deben agregar a un código existente están marcadas con el símbolo de suma (+) y las líneas que se deben eliminar están marcadas con el símbolo de resta (-).
Antes de ejecutar los comandos de este tutorial, reemplace los marcadores de posición por valores reales. Los marcadores de posición tienen el siguiente formato: $PLACEHOLDER.
Comience actualizando el controller de finalización de la compra (checkout) para incluir la identificación de la canasta actual.
1res.render('checkout/checkout', {
2+ basketId: currentBasket.UUID,
3 order: orderModel,
4 customer: accountModel,
5 ...
6});Actualice la plantilla de ISML utilizada para finalizar la compra (checkout). Este cambio hace que la identificación de la canasta, los artículos y el total estén disponibles para el navegador.
1- <div id="checkout-main" class="container data-checkout-stage <isif condition="${pdict.order.usingMultiShipping && pdict.order.shipping.length > 1}">multi-ship</isif>" data-customer-type="${pdict.customer.registeredUser ? 'registered' : 'guest'}" data-checkout-stage="${pdict.currentStage}" data-checkout-get-url="${URLUtils.https('CheckoutServices-Get')}">
2+ <div id="checkout-main" class="container data-checkout-stage <isif condition="${pdict.order.usingMultiShipping && pdict.order.shipping.length > 1}">multi-ship</isif>" data-customer-type="${pdict.customer.registeredUser ? 'registered' : 'guest'}" data-checkout-stage="${pdict.currentStage}" data-checkout-get-url="${URLUtils.https('CheckoutServices-Get')}" data-checkout-price-total="${pdict.order.priceTotal}" data-checkout-items="${JSON.stringify(pdict.order.items)}" data-basket-id="${pdict.basketId}">Cree un archivo de JavaScript llamado js/einsteinHelpers.js que contenga las funciones de asistente:
No olvide reemplazar los marcadores de posición $YOUR_SITE_ID y $YOUR_CLIENT_ID con valores reales.
Important
1'use strict';
2
3/**
4 * Get the value of a cookie
5 * Source: https://gist.github.com/wpsmith/6cf23551dd140fb72ae7
6 * @param {string} name The name of the cookie
7 * @return {string | undefined} The cookie value
8 */
9function getCookie(name) {
10 var value = '; ' + document.cookie;
11 var parts = value.split('; ' + name + '=');
12 var result;
13
14 if (parts.length === 2) {
15 result = parts.pop().split(';').shift();
16 }
17 return result;
18}
19
20/**
21 * Fire a given Einstein activity with the provided data.
22 *
23 * @param {string} name - The name of the activity.
24 * @param {Object} data - The activity payload.
25 */
26function fireEinsteinActivity(name, data) {
27 // NOTE: These should be placed in the custom preferences of BM. This will help
28 // avoid any code deployments if you need to change these values.
29 // NOTE 2: this is _Einstein_ site id (not the same as SFRA one like RefArch).
30 var SITE_ID = '$YOUR_SITE_ID';
31 var CLIENT_ID = '$YOUR_CLIENT_ID';
32 // Reports & Dashboards will only show data that's been tagged as `prd` (production)
33 var INSTANCE_TYPE = 'prd';
34
35 // Assign the realm to the data.
36 var activityData = Object.assign(data, {
37 realm: SITE_ID.split('-')[0],
38 instanceType: INSTANCE_TYPE
39 });
40
41 var userId = data.userId;
42 var cookieId = data.cookieId;
43
44 // Apply payload information for logged in users.
45 if (userId) {
46 activityData = Object.assign(activityData, {
47 userId: userId
48 });
49 }
50
51 if (cookieId) {
52 activityData = Object.assign(activityData, {
53 cookieId: cookieId
54 });
55 }
56
57 var url =
58 'https://api.cquotient.com/v3/activities' +
59 '/' + SITE_ID +
60 '/' + name;
61
62 try {
63 fetch(url, {
64 headers: {
65 'Content-Type': 'application/json',
66 'x-cq-client-id': CLIENT_ID
67 },
68 method: 'POST',
69 body: JSON.stringify(activityData)
70 });
71 } catch (e) {
72 console.error(e);
73 }
74}
75
76var exports = {
77 fireEinsteinActivity: fireEinsteinActivity,
78 getCookie: getCookie
79};
80
81module.exports = exports;Actualice su script de checkout.js para registrar las actividades. Debe agregar esta llamada a require() en la parte superior de su script de finalización de la compra (checkout) y debe aparecer después de todas las importaciones existentes.
1var einsteinHelpers = require('../einsteinHelpers');Dispare la actividad checkoutStep cuando se cambie la etapa de finalización de la compra (checkout). Adjunte el siguiente código al método updateUrl:
1/**
2 * @returns {boolean} whether the current customer is registered or not
3 */
4function isRegisteredCustomer() {
5 return $('.data-checkout-stage').data('customer-type') === 'registered';
6}
7
8/**
9 * Get the cookieId, which is a unique identifier used for linking subsequent activities to the same user.
10 * If the cookieId is not defined, then Reports & Dashboards will treat the activity as coming from an anonymous user.
11 * @returns {string | undefined} value of the cookieId param for Einstein Activities API
12 */
13function getCookieId() {
14 var siteId = window.CQuotient && window.CQuotient.siteId;
15 // This usid cookie is set by either PWA or plugin_slas
16 return einsteinHelpers.getCookie('usid_' + siteId) || einsteinHelpers.getCookie('usid') || undefined;
17}
18
19/**
20 * Get the userId, which is for linking registered users across different devices.
21 * @returns {string | undefined} value of the userId param for Einstein Activities API
22 */
23function getUserId() {
24 var siteId = window.CQuotient && window.CQuotient.siteId;
25 // This enc_user_id is set by PWA
26 return window.localStorage.getItem('enc_user_id_' + siteId) || window.localStorage.getItem('enc_user_id') || undefined;
27}
28
29/**
30 * Updates the URL to determine stage
31 * @param {number} currentStage - The current stage the user is currently on in the checkout
32 */
33function updateUrl(currentStage) {
34 // ...
35
36 var cookieId = getCookieId();
37 var userId = isRegisteredCustomer() ? getUserId() : undefined;
38
39 einsteinHelpers.fireEinsteinActivity('checkoutStep', {
40 basketId: $('#checkout-main').data('basket-id'),
41 stepName: checkoutStages[currentStage],
42 stepNumber: currentStage,
43 cookieId: cookieId,
44 userId: userId
45 });
46}Disparar la actividad checkoutStep en el método updateUrl garantiza que se registren todas las transacciones de una etapa de la finalización de la compra (checkout) a la siguiente (o anterior).
Note
Dispare la actividad beginCheckout al finalizar la función initialize para su código de finalización de la compra (checkout):
1//
2// Send Einstein `beginCheckout` activity
3//
4// Parse total amount value
5var amount = $('#checkout-main').data('checkout-price-total');
6amount = Number(amount.replace(/[^0-9.-]+/g, ''));
7
8var products = $('#checkout-main')
9 .data('checkout-items')
10 .items.map(function (item) {
11 return {
12 id: item.id,
13 price: Number(item.priceTotal.price.replace(/[^0-9.-]+/g, '')),
14 quantity: item.quantity
15 };
16 });
17
18var cookieId = getCookieId();
19var userId = isRegisteredCustomer() ? getUserId() : undefined;
20
21einsteinHelpers.fireEinsteinActivity('beginCheckout', {
22 products: products,
23 amount: amount,
24 cookieId: cookieId,
25 userId: userId
26});La beginCheckout actividad solo se activa una vez por carga de página durante el proceso de pago. La preparación de datos de la actividad se realiza automáticamente.
Note
¡Eso es todo! Ha integrado correctamente Einstein Activities con la finalización de la compra de SFRA. Para finalizar la configuración de Reports & Paneles, complete los pasos en Informes & Cuadros de mando.