Sitecore personalise and CDP custom implementation to capture additional data

Sharing my learning and implementation for the Sitecore CDP

Recently, I got work to implement the Sitecore CDP to capture the Quiz Question and Answers and when the user subscribe to the site, I need to capture the data, here is a live site.

Sending Q&A data in the below format

{

   "channel":"WEB",

   "type":"VIEW",

   "currency":"AUD",

   "language":"EN",

   "page":"Report",

   "pos":"betheboss",

   "session_data":{

      "answers":[

         {

            "id":"1",

            "value":62,

            "level":1.24,

            "updated":true

         },

         {

            "id":"2",

            "value":50,

            "level":0.41,

            "updated":true

         },

         {

            "id":"3",

            "value":50,

            "level":2.67,

            "updated":true

         },

         {

            "id":"4",

            "value":50,

            "level":2.37,

            "updated":true

         },

         {

            "id":"5",

            "value":50,

            "level":2.77,

            "updated":true

         },

         {

            "id":"6",

            "value":50,

            "level":0,

            "updated":true

         }

      ]

   },

   "browser_id":"fa46222c-aeb4-48c5-89c3-8631df2c4237"

}

and it got capture in the CDP - it can be found in the debug tab, search for the newly created contact.

Here are the list of all the events

Here is the detals of the capture data

Impleementation details - I used axios utility to interact with the Sitecore CDP apis

Here is the sample code

/* eslint-disable no-return-assign */
import axios from "axios";

export function GetBrowserId() {
	if (window?.Boxever && window?.Boxever?.getID()) {
		const result = window?.Boxever?.getID();

		return result;
	}
}

export function PushIdentifyEvent({ event, onSuccess }) {
	const browserID = GetBrowserId();

	event.browser_id = browserID;

	const message = JSON.stringify(event);

	const clientKey = process.env.REACT_APP_CLIENT_KEY;

	const boxeverAPIEndpoint = `https://api-ap-southeast-2-production.boxever.com/v1.2/event/create.json?client_key=${clientKey}&message=${message}`;

	axios
		.get(boxeverAPIEndpoint)
		.then(function (response) {
			onSuccess(true);
		})
		.catch(function (error) {
			// handle error
		});
}

On Success, Used below code to send the message

export default function CardSuccess() {
    const totals = useSelector((state: RootState) => state.totals);
    const [formData, setFormData] = useState({ email: "" });
    const [success, setSuccess] = useState(false);
    const onChange = (e: React.ChangeEvent<HTMLInputElement>): void =>
        setFormData({ ...formData, [e.target.name]: e.target.value });
    const { email } = formData;
    const handleSubmit = (e: React.SyntheticEvent) => {
        e.preventDefault();
        const event = {
            channel: "WEB",
            type: "IDENTITY",
            currency: "AUD",
            language: "EN",
            pos: "betheboss",
            email,
            identifiers: [
                {
                    provider: "email",
                    id: email,
                },
            ],
        };
        PushIdentifyEvent({ event, onSuccess: (val: boolean) => setSuccess(val) });
    };

Also used  useEffect

useEffect(() => {
        if (success) {
            setFormData({
                email: "",
            });
        }
    }, [success]);