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
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 useEffectuseEffect(() => {if (success) {setFormData({email: "",});}}, [success]);
