Configurazione con l'autenticazione ibrida
Regole eCDN per implementazioni ibride
Einstein Activities per implementazioni ibride
Competenze tecniche necessarie
Ask the Community
Con Reports & Dashboards è possibile identificare le tendenze nel tempo e prendere decisioni aziendali più intelligenti in base ai dati di B2C Commerce.
L’analisi di Reports & Dashboards può essere derivata solo dai registri del web adapter o da Einstein Activities API. Per impostazione predefinita, i dati di analisi SFRA e SiteGenesis vengono archiviati nei registri del web adapter, mentre il PWA Kit invia i dati di analisi ad Einstein Activities API.
Se si sta perseguendo un’implementazione ibrida, in cui alcune pagine sono basate su PWA Kit e altre su SFRA o SiteGenesis, e si desidera utilizzare Reports & Dashboards per l’intero sito, è necessario aggiornare l’implementazione SFRA o SiteGenesis per utilizzare Einstein Activities API. Ciò garantisce che l’API acquisisca l’esperienza completa dell’acquirente, indipendentemente dal fatto che l’acquirente si trovi in PWA Kit, SFRA o SiteGenesis.
Solo i clienti esistenti possono accedere ad alcuni dei link di questa pagina. Per informazioni su come accedere ai repository di Commerce Cloud, vedere Salesforce Commerce Cloud GitHub: repository e accesso.
Tip
Questa guida mostra come integrare Einstein Activities API con il checkout di SFRA, in modo che invii le stesse attività del checkout di PWA Kit.
Se l’implementazione graduale include pagine aggiuntive su SFRA o SiteGenesis che inviano dati di analisi ai registri del web adapter, per tali pagine è possibile seguire una procedura simile a quella descritta in questa guida. Guarda le pagine corrispondenti nella Retail React App e osserva quali attività inviano. Dovrai quindi inviare le stesse attività sulle tue pagine SFRA o SiteGenesis. Come risorsa, questa panoramica delle attività di Einstein mostra dove tali attività devono essere utilizzate.
Le implementazioni che utilizzano SiteGenesis con Composable Storefront non sono supportate ufficialmente.
Note
Prestare attenzione quando si integrano gli esempi di codice forniti e testare sempre attentamente il codice prima di effettuare il push in Production.
Le righe da aggiungere al codice esistente sono contrassegnate dal simbolo di addizione (+), mentre quelle da eliminare sono contrassegnate dal simbolo di sottrazione (-).
Prima di eseguire i comandi di questo tutorial, sostituire tutti i segnaposto con valori effettivi. I segnaposto sono formattati nel seguente modo: $PLACEHOLDER.
Iniziare aggiornando il controller di checkout per includere l’ID di carrello corrente.
1res.render('checkout/checkout', {
2+ basketId: currentBasket.UUID,
3 order: orderModel,
4 customer: accountModel,
5 ...
6});Aggiornare il modello ISML utilizzato per il checkout. Questa modifica rende disponibili al browser l’ID, gli articoli e il totale del carrello.
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}">Creare un file JavaScript denominato js/einsteinHelpers.js contenente funzioni helper:
Non dimenticare di sostituire i segnaposto $YOUR_SITE_ID e $YOUR_CLIENT_ID con i valori effettivi.
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;Aggiornare lo script checkout.js per registrare le attività. È necessario aggiungere questa chiamata a require() nella parte superiore dello script di checkout e fare in modo che compaia dopo qualsiasi importazione esistente.
1var einsteinHelpers = require('../einsteinHelpers');Attivare l’attività checkoutStep quando la fase di checkout viene modificata. Aggiungere il seguente codice al metodo 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}L’attivazione dell’attività checkoutStep nel metodo updateUrl garantisce che qualsiasi transizione da una fase di checkout alla successiva (o alla precedente) venga monitorata.
Note
Attivare l’attività beginCheckout alla fine della funzione initialize per il codice di 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});L’attività viene attivata una sola volta per caricamento di pagina durante il beginCheckout checkout. La preparazione dei dati dell’attività viene gestita automaticamente.
Note
La procedura è terminata. L’integrazione di Einstein Activities con il checkout di SFRA è stata completata. Per completare la configurazione di Reports & Dashboard, completa i passaggi in Reports & Dashboard.