Connexion de Sitecore CDP au site Web Next.js

Présentation rapide

Sitecore CDP signifie Sitecore Customer Data Platform. Ceci est une citation de la documentation de Sitecore :

Une plateforme de données client est un progiciel qui crée une base de données client persistante et unifiée accessible à d’autres systèmes.

En bref, il suit les données des clients sur tous les canaux, et plus tard, ces données peuvent être utilisées pour exécuter la personnalisation pour des segments de clients. Sitecore fournit une documentation détaillée et vous pouvez obtenir plus d’informations sur leur site Web : Qu’est-ce qu’un CDP

Accédez à Sitecore CDP

Merci, Perficient qu’en tant que partenaire Sitecore Platinum, nous avons accès au bac à sable où nous pouvons pratiquer et travailler. L’interface de Sitecore CDP est simple :

Objectif

J’étais intéressé par ce qu’il fallait faire pour connecter le site Web Next.js existant à Sitecore CDP. De plus, je voulais avoir une vue d’ensemble de la manière dont Sitecore CDP collecte les données clients. Il y a Documentation développeur expliquant comment l’intégrer à l’aide de JavaScript vanille. Voyons comment nous pouvons l’appliquer au projet Next.js.

Configurer Sitecore CDP

Obtenir la clé client

Connectez-vous à Sitecore CDP, accédez à Paramètres système -> Accès API

Créer un point de vente

Aller vers Paramètres système -> Point de vente mettre en place un nouveau point de vente pour notre site web

Activer le mode débogage

Le mode débogage permet la visibilité de toutes les données et configurations stockées dans Sitecore CDP. Il nous donnera accès à des informations supplémentaires pour les demandes. Pour activer le mode débogage, cliquez sur le Coin inférieur gauche -> Votre profil -> Drapeaux de fonctionnalités -> Activer l’indicateur de débogage.

Examiner les règles d’identité de l’organisation

Pour pouvoir envoyer un événement d’identité à Sitecore CDP, nous devons connaître les règles d’identité de notre locataire d’organisation. Pour vérifier ces informations, nous devons naviguer vers Paramètres système -> Informations sur la société.

Sur l’écran d’informations sur l’entreprise, nous devons cliquer sur Déboguer, et après ça Afficher en tant que JSON, et puis localisez l’objet JSON identityIndexConfigurations.

Ce sont les règles d’identité pour le locataire de notre organisation. Dans ce cas, l’organisation utilise une règle d’identité : SITECORE_ID. Cela signifie que lorsque nous enverrons un événement IDENTITY à Sitecore CDP, il doit contenir une valeur pour l’attribut SITECORE_ID afin d’identifier un invité.

À ce stade, nous sommes prêts à connecter notre application à Sitecore CDP. Toutes les informations sensibles que nous mettrons dans le fichier de configuration.

// cdpConfig.js

const cdpConfig = {
    client_key: process.env.BOXEVER_CLIENT_KEY,
    cookie_domain: process.env.BOXEVER_COOKIE_DOMAIN,
    pointOfSale: process.env.NEXT_PUBLIC_BOXEVER_POC,
    clientVersion: process.env.BOXEVER_CLIENT_VERSION,
    webFlowTarget: process.env.BOXEVER_WEB_FLOW_TARGET,
};

export default cdpConfig;

Selon la documentation, nous devons activer la bibliothèque JavaScript en ajoutant un extrait de script à chaque page. Nous pouvons encapsuler ce script dans le composant de réaction.

// SitecoreCdp.jsx

import React from 'react';
import cdpConfig from '@/clients/cdpConfig';

const SitecoreCdp = () => {
    return (
        <React.Fragment>
            <script
                dangerouslySetInnerHTML={{
                    __html: `var _boxeverq = _boxeverq || [];                   
                    var _boxever_settings = {
                        client_key: '${cdpConfig.client_key}',
                        target: 'https://api-us.boxever.com/v1.2',
                        cookie_domain: '${cdpConfig.cookie_domain}', 
                        javascriptLibraryVersion: '${cdpConfig.clientVersion}',
                        pointOfSale: '${cdpConfig.pointOfSale}',
                        web_flow_target: '${cdpConfig.webFlowTarget}',
                        web_flow_config: { async: true, defer: true }
                    };                    
                   
                    (function() {
                    var s = document.createElement('script'); s.type="text/javascript"; s.async = true;  
                    s.src="https://d1mj578wat5n4o.cloudfront.net/boxever-${cdpConfig.clientVersion}.min.js";
                    var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
                    })();`,
                }}
            ></script>
        </React.Fragment>
    );
};

export default SitecoreCdp;

Nous pouvons utiliser ce composant à partir de notre _app.js, nous avons donc ce script injecté à chaque page.

// _app.js

import Head from 'next/head';
import GoogleAnalytics from '@/utils/GoogleAnalytics';
import SitecoreCdp from '@/utils/SitecoreCdp';
import { AppProvider } from '@/contexts/app/AppContext';

const App = ({
    Component,
    pageProps
}) => {
    return (
            <Head>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1"
                />
                <meta
                    httpEquiv='Content-Type'
                    content="text/html; charset=utf-8"
                />
                <GoogleAnalytics />
                <SitecoreCdp />
            </Head>
            <AppProvider>
                <Component {...pageProps} />
            </AppProvider>
    );
};

export default App;

Nous devons maintenant implémenter une logique pour envoyer des événements à Sitecore CDP. Quelques fonctions d’assistance nous aideront à fournir des informations communes.

// helpers.js

export const isClientSide = () => typeof window !== 'undefined';

export const getChannel = () => {
    if (!isClientSide()) {
        return null;
    }
    const userAgent =
        window.navigator.userAgent ||
        window.navigator.vendor ||
        (window.opera && window.opera.toString() === `[object Opera]`);

    if (/window phone/i.test(userAgent)) {
        return 'Windows Phone';
    }
    if (/android/i.test(userAgent)) {
        return 'Android';
    }
    if (/iPad/i.test(userAgent)) {
        return 'iPad';
    }
    if (/iPhone/i.test(userAgent)) {
        return 'iPhone';
    }
    return 'WEB';
};

export const getCdpObjects = () => {
    if (!isClientSide()) {
        return null;
    }
    const boxever = window.Boxever;
    const boxeverq = window._boxeverq;

    if (!boxever) {
        return null;
    }
    const browser_id = boxever.getID();
    const channel = getChannel();
    const defaultEvent = {
        browser_id: browser_id,
        channel: channel,
        poc: cdpConfig.pointOfSale,
        ext: {
            userDevice: channel,
        },
    };
    boxever.addUTMParams(defaultEvent);
    return { boxever, boxeverq, defaultEvent };
};

• isClientSide renvoie true ou false selon de quel côté de l’application nous sommes (client ou serveur)
• getChannel nous renvoie une chaîne en fonction du navigateur de l’utilisateur
• getCdpObjects renvoyant des objets boxever pour envoyer des événements, et l’objet d’événement par défaut avec des informations communes

Et la dernière étape de préparation consiste à créer des actions pour envoyer des événements.

// cdpActions.js

import { getCdpObjects } from '@/utils/helpers';
const createCdpEvent = (eventData) => {
    const { boxever, boxeverq, defaultEvent } = getCdpObjects() || {};

    if (!boxever) {
        return;
    }
    const cdpEvent = {
        ...defaultEvent,
        ...eventData,
    };
    boxeverq.push(function () {
        boxever.eventCreate(cdpEvent, function () {}, 'json');
    });
};

const createCdpIdentityEvent = (user, eventData) => {
    const { boxever, boxeverq, defaultEvent } = getCdpObjects() || {};

    if (!boxever || !user) {
        return;
    }
    const cdpEvent = {
        ...defaultEvent,
        ...eventData,
        type: 'IDENTITY',
        email: user.email,
        lastName: user.lastName,
        firstName: user.firstName,
        gender: user.gender,
        age: user.age,
        phone: user.phone,
        identifiers: [
            {
                provider: 'SITECORE_ID',
                id: user.id,
            },
        ],
    };

    cdpEvent.ext.gender = user.gender;
    cdpEvent.ext.age = user.age;

    boxeverq.push(function () {
        boxever.eventCreate(cdpEvent, function () {}, 'json');
    });
};

export { createCdpEvent, createCdpIdentityEvent };

Ce code montre que nous avons créé deux actions qui seront utilisées pour envoyer des événements généraux et identifiés. Nous pouvons maintenant commencer à envoyer des événements à Sitecore CDP depuis notre application. Vous trouverez ci-dessous un exemple d’envoi des deux types d’événements à partir de la page d’accueil.

// pages/index.js

import React, { Fragment } from 'react';
import { createCdpEvent, createCdpIdentityEvent } from '@/actions/cdpActions';
import { useAppContext } from '@/contexts/app/AppContext';


const HomePage = (props) => {   

    const { state } = useAppContext();

    useEffect(() => {
        createCdpEvent({
            type: 'VIEW',
            page: 'home',
        });
    }, []);

    useEffect(() => {
        if (state.user.email === '') {
            return;
        }
        createCdpIdentityEvent(state.user, {
            page: 'home',
        });
    }, [state.user.email]);

    return (
<Fragment>
    …
</Fragment>
    );
}       

export default HomePage;

Lorsque l’utilisateur visite cette page, l’événement ‘View’ est envoyé (qui est 1^St useEffect hook est responsable), et lorsque l’utilisateur est connecté, l’événement Identity est envoyé. C’est la responsabilité de 2^nd utilisez le crochet d’effet.

Examiner les résultats

Si nous visitons ou page d’accueil, nous pouvons voir que l’événement de vue a été envoyé à Sitecore CDP.

C’est la demande :

Voici la réponse :

Nous pouvons rechercher des données dans Sitecore CDP par browser_Id

Toutes les interactions utilisateur associées à cette session sont disponibles

Et depuis que le mode débogage a été activé, les informations détaillées sur les événements au format JSON sont également disponibles

Si nous nous connectons à notre application, l’événement Identifier est envoyé à Sitecore CDP. Voici l’exemple de la façon dont la demande de création d’événement ressemble

Et les données de demande peuvent également être observées du côté Sitecore CDP.

Conclusion

Comme nous pouvons le constater, l’intégration de Sitecore CDP avec une application existante ne nécessite pas beaucoup de travail. L’approche discutée n’est pas la seule façon de faire cette intégration. Il y a Sitecore Personnaliser le package npm qui est un wrapper pour les scripts Sitecore CDP et nous permet de l’ajouter dans les applications de réaction. Une autre approche consisterait à configurer un serveur API qui effectuera des appels vers Sitecore CDP. À partir d’une application, nous ferons des appels à ce serveur. Dans ce cas, nous n’avons pas besoin d’injecter de script sur chaque page. Avec Next.js, cela peut être fait dans le même application. C’est un Exemple à quoi pourraient ressembler ces appels.