Désactivation des cookies dans Sitecore SDKS / Blogs / Perficient

Intro 📖

Dans cet article, nous allons jeter un œil à quelques SDK Sitecore couramment utilisés pour créer des applications de tête de cloud XM. Plus précisément, nous examinerons comment désactiver les cookies utilisés par ces SDK. Cela peut être utile pour des raisons de confidentialité des données et / ou de conformité réglementaire. Ces SDK permettent à votre application de s’intégrer à d’autres services de Sitecore composables comme l’analyse, la personnalisation et la recherche. Les cookies que ces SDK utilisent doivent être pris en compte dans le cadre de la stratégie globale de protection des données de votre application.

Il convient de noter que, même sans aucun SDK supplémentaire, une application XM Cloud Head peut émettre des cookies; voir Cookies de visiteurs de nuages ​​XM pour plus d’informations.

SDK Cloud Sitecore ☁

Le SDK Cloud Sitecore permet aux développeurs de s’intégrer avec les produits Digital Experience Platform (DXP) de Sitecore. Il s’agit notamment du CDP Sitecore, de la personnalisation de Sitecore, etc. Vous pouvez lire la documentation officielle ici. Pour en savoir plus sur les cookies de premier parti utilisés par ce SDK, voir Cookies SDK Cloud. Ces cookies comprennent:

• sc_{SitecoreEdgeContextid}
  • Stocké dans le navigateur lorsque la fonction d’initialisation du SDK est appelée (plus sur cette fonction plus tard).
• SC_ {SitecoreEdgeContextid} _Sersonalize
  • Nécessaire pour exécuter des tests A / B / N; configuré dans le AddPersonalize () fonction. Également stocké dans le navigateur lorsque la fonction d’initialisation est appelée.

📝 Sitecore travaille activement à l’intégration des SDKS de Sitecore disparates dans le SDK Cloud Sitecore. La dernière version, 0,5a été publié le 29 janvier 2025 et a ajouté des capacités de recherche (voir le cloud XM changelog entrée ici). Comme le chef de produit technique de Sitecore, Christian Hahn ce récent Découvrez Sitecore Vidéo YouTube:

«…[the] Le sdk cloud n’est pas un autre SDK Sitecore – c’est le SDK Sitecore.

Il est sûr de supposer que, finalement, le SDK Cloud Sitecore sera les seuls développeurs du SDK Sitecore doit inclure dans leurs applications de tête pour s’intégrer à toutes les autres offres DXP Sitecore (ce qui sera bien 👌).

ℹ Pour le reste de ce post, supposons qu’un Avant 0,5 La version du SDK Cloud est utilisée, par exemple, 0.3.0– toute version qui n’a pas Incluez les widgets de recherche (de sorte que la réaction de la recherche JS SDK est toujours requise).

Sitecore Search JS SDK pour React 🔍

La recherche JS SDK pour React permet aux développeurs de créer des composants tels que des barres de recherche, des composants de résultats de recherche, etc. Ces composants interagissent avec les sources de recherche définies et indexées dans Recherche de Sitecore. Vous pouvez lire la documentation officielle ici. Alors que la dernière version du SDK Cloud comprend certaines dépendances de recherche, pour les applications plus anciennes Next.js utilisant des versions plus anciennes du SDK Cloud, le SDK JS de recherche peut toujours être utilisé pour créer des interfaces de recherche.

Le SDK de recherche JS pour React utilise un cookie pour suivre le contexte des événements appelés __ (référence). Ce SDK est historiquement basé sur Sitecore Discover dont les cookies sont également documentés icipar exemple, __rutma.

ℹ Pour le reste de cet article, supposons cette version 2.5.5 de la recherche JS SDK pour React est utilisé.

Le problème 🙅‍️

Disons que votre projet Cloud XM exploite JSS pour next.js, y compris le complément multisite. Ce module complémentaire (qui est inclus dans le kit de démarrage officiel Par défaut) permet à une seule application Next.js de conduire plusieurs sites sans tête. Ensuite, supposons que certains de ces sites opèrent en dehors des États-Unis et sont potentiellement soumis à différentes lois sur la protection des données et la confidentialité. Enfin, supposons que tous les sites n’utiliseront pas l’ensemble des fonctionnalités complètes de ces SDK. Par exemple, que se passe-t-il si quelques sites sont petits et n’ont pas du tout besoin de s’intégrer à la recherche Sitecore?

Comment désactivez-vous les cookies écrits au navigateur lorsque le SDK de recherche Le composant est initialisé? Même si les petits sites n’utilisent pas de widgets de recherche sur aucune de leurs pages, la la composante est (généralement) incluse dans le Disposition.tsx fichier et est toujours initialisé. Nous ne voulons pas supprimer le composant depuis d’autres sites faire Utilisez des widgets de recherche et nécessitez le composant.

Ces SDK peuvent-ils être configurés pour ne pas créer de cookies sur le navigateur client?

La solution ✅

🚨 D’abord et avant tout (avant de savoir comment désactiver les cookies utilisés par ces SDK), sachez que vous devez vous assurer que votre application est conforme à toutes les lois sur la confidentialité et la protection des données des données auxquelles il est sujet. Cela inclut les utilisateurs de se désabonner à tous les cookies de navigateur. Préférences de cookies, leur gestion, solutions tierces, RGPD, CCPAetc. sont tous d’excellents sujets mais sont bien en dehors de la portée de ce post. Pour commencer, reportez-vous à la documentation de Sitecore sur confidentialité des données Pour comprendre qui est responsable de la création d’une application Cloud XM.

Avec ce petit avertissement à l’écart, les crochets programmatiques discutés dans les sections ci-dessous peuvent être utilisées en conjonction avec la solution de gestion des cookies qui a du sens pour votre application. Supposons que, pour ces petits sites opérant dans différentes géographies qui ne nécessitent ni CDP ni recherche, nous voulons simplement désactiver complètement les cookies de ces SDK.

Pour désactiver les cookies SDK cloud:

La version courte: juste ne le faites pas Appelez les SDK init () fonction 😅. Cela peut être fait pour ajouter une variable d’environnement et vérifier sa valeur dans le . \ src \ \ src \ lib \ context \ sdk \ events.ts dossier et retourne tôt ou lancer avant l’appel à Events.init ():

import * as Events from '@sitecore-cloudsdk/events/browser';
import { SDK } from '@sitecore-jss/sitecore-jss-nextjs/context';

const sdkModule: SDK<typeof Events> = {
  sdk: Events,
  init: async (props) => {
    // Events module can't be initialized on the server side
    // We also don't want to initialize it in development mode
    if (typeof window === 'undefined')
      throw 'Browser Events SDK is not initialized in server context';
    if (process.env.NODE_ENV === 'development')
      throw 'Browser Events SDK is not initialized in development environment';
    // We don't want to initialize if the application doesn't require it
    if (process.env.DISABLE_CLOUD_SDK === 'true') // <===== HERE
      throw 'Browser Events SDK is not initialized for this site';

    await Events.init({
      siteName: props.siteName,
      sitecoreEdgeUrl: props.sitecoreEdgeUrl,
      sitecoreEdgeContextId: props.sitecoreEdgeContextId,
      // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
      cookieDomain: window.location.hostname.replace(/^www\./, ''),
      // Cookie may be created in personalize middleware (server), but if not we should create it here
      enableBrowserCookie: true,
    });
  },
};

export default sdkModule;

En n’appelant pas Events.init ()les cookies ne sont pas écrits au navigateur.

📝 Notez que dans les versions plus récentes du kit de démarrage XM Cloud à l’aide du SDK Cloud, la fonction initialisée peut être dans le Bootstrap.tsx déposer; Cependant, le même principe s’applique – n’appelez pas le initialiser() Fonction en retournant tôt ou en configurant des conditions de telle sorte que la fonction n’est jamais appelée.

Pour la cohérence, en supposant que votre application utilise l’OOTB CdppageView.tsx Composant, vous voudriez probablement faire quelque chose de similaire dans ce composant. Par défaut, les événements de vue de la page sont désactivés lorsque développement mode. Ajoutez simplement une autre condition pour vous assurer que la valeur de retour de désactivé() est vrai:

import {
  CdpHelper,
  LayoutServicePageState,
  useSitecoreContext,
} from '@sitecore-jss/sitecore-jss-nextjs';
import { useEffect } from 'react';
import config from 'temp/config';
import { context } from 'lib/context';

/**
 * This is the CDP page view component.
 * It uses the Sitecore Cloud SDK to enable page view events on the client-side.
 * See Sitecore Cloud SDK documentation for details.
 * https://www.npmjs.com/package/@sitecore-cloudsdk/events
 */
const CdpPageView = (): JSX.Element => {
  ...
  /**
   * Determines if the page view events should be turned off.
   * IMPORTANT: You should implement based on your cookie consent management solution of choice.
   * By default it is disabled in development mode
   */
  const disabled = () => {
    return process.env.NODE_ENV === 'development' || process.env.DISABLE_CLOUD_SDK === 'true'; // <===== HERE
  };
  ...
  return <></>;
};

export default CdpPageView;

Pour désactiver la recherche JS SDK pour les cookies React (Sitecore Discover):

Le composant (importé de @ Sitecore-Search / React) comprend une propriété nommée TrackConsent (documenté ici) et il contrôle exactement cela – que ce soit ou non le suivi des cookies liés aux actions des visiteurs. Définition de la valeur de cette propriété sur FAUX désactive les différents cookies. Dans le Disposition.tsx Fichier, en supposant que nous avons ajouté une autre variable d’environnement, le code ressemblerait à ceci:

ata-enlighter-language="typescript">/**
 * This Layout is needed for Starter Kit.
 */
import React from 'react';
...
import { Environment, WidgetsProvider } from '@sitecore-search/react';

const Layout = ({ layoutData, headLinks }: LayoutProps): JSX.Element => {
  ...
  return (
    <>
      ...
        <div className="App">
          <WidgetsProvider
            env={process.env.NEXT_CEC_APP_ENV as Environment}
            customerKey={process.env.NEXT_CEC_CUSTOMER_KEY}
            apiKey={process.env.NEXT_CEC_API_KEY}
            publicSuffix={true}
            trackConsent={!(process.env.DISABLE_TRACK_CONSENT === 'true') /* <===== HERE */}
          >
            ...
          </WidgetsProvider>
        </div>
      ...
    </>
  );
};

export default Layout;

Si consentement de piste est FAUXalors les divers __r… Les cookies ne sont pas écrits au navigateur.

⚠ Il convient de mentionner que, par défaut, consentement de piste est vrai. Pour retirer les cookies, les développeurs doivent définir la propriété sur FAUX.

Que vous contrôliez l’utilisation de cookies en utilisant des variables d’environnement comme décrit dans ce post ou en intégrant un système de gestion des cookies et de consentement plus complexe, il est sur vous et votre application de tête de cloud XM pour éviter d’utiliser des cookies sans le consentement d’un utilisateur.

Merci pour la lecture! 🙏