Tracking User Personal Information in sitecore CDP

Question

In sitecore CDP, I'm using Email Corner PopUp template to Track user email address and their Interactions on the site, Now I want to get first name, last name, gender of the user. For this , am I need to create a custom web template or can override an existing one.

Can anyone Suggest me the ways to track the Personal Details of the user in sitecore CDP?

Answer 1

You can both, create new web template or extend existing one. Example, how to extend existing Email Corner PopUp:

1. Add first name, last name, gender in HTML markup. It`ll look like:

<div>
    <input type="email" name="bx-email_input" class="bx-email_input input-box" id="bx-email_input" placeholder="[[ Input Ghost Text | string | Email | { required: true , group: Email Input, groupOrder: 4, order: 1 } ]]">
    <input type="text" name="bx-firstname_input"  id="bx-firstname_input" placeholder="[[ Input Firstname Text | string | First name  | { required: true } ]]">
    <input type="text" name="bx-lastname_input"  id="bx-lastname_input" placeholder="[[ Input Lastname Text | string | Last name  | { required: true } ]]">
    <select id="bx-gender_input" name="bx-gender_input">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    <a id="bx-transition-card--primary" class="options-container__primary">[[ Button Text | string | Submit | {required: true,max: 15, group: Submit Button, order: 1  } ]]</a>
</div>

Pay attention on placeholders markup: https://doc.sitecore.com/cdp/en/users/sitecore-customer-data-platform/create-a-form-for-a-web-template.html

2. Once HTML with parameters added, you will see corresponding placeholder inputs in template:

3. Add CSS styles on CSS tab.

4. Extend Javascript to pass new parameters in IDENTITY request:

bxCTA.onclick = function(){
    let bxEmail = document.getElementById("bx-email_input").value;
    let firstname = document.getElementById("bx-firstname_input").value;
    let lastname = document.getElementById("bx-lastname_input").value;
    let gender = document.getElementById("bx-gender_input").value;
    let emailVerified = validateEmail(bxEmail);
    emailVerified ?
        onSuccessValidation(bxEmail, firstname, lastname, gender)
    :
        //friendly error
        document.getElementById("bx-email_input").style.backgroundColor = 'rgba(200,0,0,0.1)';
};

const onSuccessValidation = function(email, firstname, lastname, gender){
    sendInteractionToBoxever("IDENTITY")
    let event = {
        "channel": "WEB",
        "type": "IDENTITY",
        "language": "EN",
        "currency": "EUR",
        "page": "Home",
        "pos": "spinair.com",
        "browser_id": Boxever.getID(),
        "email":email,
        "firstNme" : firstname,
        "lastName" : lastname,
        "gender" : gender
    };
    Boxever.eventCreate(event, function(data){}, 'json');

    bxEmailCaptureContainer.style.display = "none";
    let X = document.querySelector(".bx__btn-close");
    X.style.display = "none";
    showThankYou();
    // flash thank you message
    setTimeout(function(){ document.querySelector('#bx-transition-card').style.display= 'none'; }, 100);
}

P.S. You can click Preview button and test your experience in Sitecore CDP QA Tool. Just check that firstname, lastname and gender are included in IDENTITY request on submit: