Configurer avec l’authentification hybride
Règles eCDN pour les implémentations hybrides
Einstein Activities pour les implémentations hybrides
Les compétences pour réussir
Ask the Community
Avec les tableaux de bord Reports&, vous pouvez identifier les tendances dans le temps et prendre des décisions commerciales plus intelligentes en fonction de vos données B2C Commerce.
Les analyses des tableaux de bord Reports & ne peuvent être dérivées que des journaux de l’adaptateur web ou de l’Einstein Activities API. Par défaut, les données d’analyse SFRA et SiteGenesis sont stockées dans les journaux de l’adaptateur web, tandis que le PWA Kit envoie les données d’analyse à Einstein Activities API.
Si vous envisagez une implémentation hybride, où certaines pages sont optimisées par PWA Kit et d’autres par SFRA ou SiteGenesis, et que vous souhaitez utiliser Reports & Dashboards sur l’ensemble de votre site, vous devez mettre à jour votre implémentation SFRA ou SiteGenesis pour utiliser l’Einstein Activities API. Cela garantit que l’API capture l’intégralité de l’expérience d’achat, que l’acheteur se trouve dans PWA Kit, SFRA ou SiteGenesis.
Seuls les clients existants peuvent accéder à certains des liens de cette page. Visitez Salesforce Commerce Cloud GitHub Repositories and Access pour plus d’informations sur l’accès aux référentiels Commerce Cloud.
Tip
Ce guide vous montre comment intégrer l’Einstein Activities API au checkout de SFRA, afin qu’il envoie les mêmes activités que le checkout de PWA Kit.
Si votre déploiement progressif comporte des pages supplémentaires sur SFRA ou SiteGenesis qui envoient des données d’analyse aux journaux de l’adaptateur web, vous pouvez suivre un processus similaire à celui décrit dans ce guide pour ces pages. Regardez les pages correspondantes dans l’application Retail React App et observez les activités qu’elles envoient. Vous devrez ensuite envoyer les mêmes activités sur vos pages SFRA ou SiteGenesis. En tant que ressource, cette vue d’ensemble des activités Einstein vous montre où ces activités sont censées être utilisées.
Les implémentations utilisant SiteGenesis avec Composable Storefront ne sont pas officiellement prises en charge.
Note
Faites preuve de prudence lorsque vous intégrez les exemples de code fournis et testez toujours minutieusement votre code avant de l’envoyer en production.
Les lignes à ajouter au code existant sont signalées par le symbole d’addition (+) et les lignes à supprimer sont signalées par le symbole de soustraction (-).
Avant d’exécuter les commandes de ce tutoriel, remplacez les espaces réservés par des valeurs réelles. Les espaces réservés sont formatés ainsi : $PLACEHOLDER.
Commencez par mettre à jour votre contrôleur de checkout pour inclure l’identifiant du panier actuel.
1res.render('checkout/checkout', {
2+ basketId: currentBasket.UUID,
3 order: orderModel,
4 customer: accountModel,
5 ...
6});Mettez à jour le modèle ISML utilisé pour le checkout. Cette modification permet au navigateur d’accéder à l’identifiant du panier, aux articles et au total.
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}">Créez un fichier JavaScript appelé js/einsteinHelpers.js qui contiendra des fonctions d’assistance :
N’oubliez pas de remplacer les espaces réservés $YOUR_SITE_ID et $YOUR_CLIENT_ID par leur valeur réelle.
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;Mettez à jour votre script checkout.js pour consigner les activités. Vous devez ajouter cet appel à require() en haut de votre script de checkout et il doit s’afficher après toutes les importations existantes.
1var einsteinHelpers = require('../einsteinHelpers');Déclenchez l’activité checkoutStep lors de modifications de l’étape du checkout. Ajoutez le code suivant à la méthode 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}Le déclenchement de l’activité checkoutStep dans la méthode updateUrl garantit le suivi de toutes les transitions d’une étape du checkout vers la suivante (ou vers la précédente).
Note
Déclenchez l’activité beginCheckout à la fin de la fonction initialize pour votre code de 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’activité beginCheckout n’est déclenchée qu’une seule fois par chargement de page lors du checkout. La préparation des données d’activité est gérée automatiquement.
Note
Et voilà ! Vous avez réussi à intégrer Einstein Activities au checkout de SFRA. Pour terminer la configuration de Reports & ; Tableaux de bord, suivez les étapes décrites dans Rapports & ; Tableaux de bord.