Add segmentation opt-in controls to your site

This page will help you get placed into a segment so that you can test personalization.

To put yourself in a particular segment:

1. Click the 'Give consent' button to simulate a 'Cookie banner'.
 This lets the CDP know that you consent to be tracked.

2. Click one of the segment buttons: I am a customer.

3. Wait 30 seconds; you should now have been placed into the selected segment.

4. Visit a page with personalized content and test the result.

5. To remove yourself from a segment, click the Revoke Consent button.

6. Repeat the process to put yourself into another segment.

<h2>Give or revoke consent to CDP tracking</h2>
<div id="component_365">

    <div id="consent-buttons">
    <button id="consent-button-give" >Give Consent</button>
    <button  id="consent-button-revoke" >Revoke Consent</button>
    </div>
<script>
function giveConsent() {
    setConsent(1);
    return false;
}
function revokeConsent() {
    setConsent(0);
    return false;
}

function setConsent(consented) {
    fetch(`/__dxp/cdp/setConsent`, {
        method: `POST`,
        headers: {
            [`Content-Type`]: `application/json`
 },
        body: JSON.stringify({
            "CDPConsent": consented,
            "documentVersion": "1.0"
 }),
        redirect: `follow`
 }).then((data) => {
        console.log("testing consent")
        console.log(data)
        console.log(`consent set to ${consented}`);
        //location.reload();
 }).catch(() => {
        alert(`Failed to set consent`);
 });
}

//give button
document.getElementById('consent-button-give').addEventListener('click', function(e){
        console.log('click')
        giveConsent();
        e.preventDefault();
});

//revoke button
document.getElementById('consent-button-revoke').addEventListener('click', function(e){
        console.log('click')
        revokeConsent();
        e.preventDefault();
});
</script>
</div>

<h2>Select a segment </h2>
<p><button id="customer">I am a customer</button></p>
<p><button id="prospect">I am a prospect</button></p>

<div id="response">...</div>
<script>
 function sendCustomEvent(id, type) {
 var successMessage = "...";
 document.getElementById("response").innerHTML = successMessage;
 var myHeaders = new Headers();
 myHeaders.append("Content-Type", "application/json");

 var raw = JSON.stringify({
 "source": "custom",
 "action": id,
 "event": {
 "type": type
 }
 });

 var requestOptions = {
 method: 'POST',
 headers: myHeaders,
 body: raw,
 redirect: 'follow'
 };

 //fetch("https://your-organization.matrix.squiz.cloud/__dxp/events/custom", requestOptions) (1)
 fetch("/__dxp/events/custom", requestOptions)
 .then(response => {
 var successMessage = "";
 if (response.status === 202){
 successMessage = "Event successfully tracked - persona should be updated within 30 seconds.";
 }else{
 successMessage = "Error with event - please try again, or grant consent first."
 }
 document.getElementById("response").innerHTML = successMessage;
 })
 .then((result) => {
 console.log(result)
 })
 .catch(error => console.log('error', error));

 }

 var demo1 = document.getElementById('customer'); (2)
 var demo2 = document.getElementById('prospect');

 demo1.addEventListener('click', function(e) { (3)
 sendCustomEvent('persona-selector', 'customer');
 });

 demo2.addEventListener('click', function(e) {
 sendCustomEvent('persona-selector', 'prospect');
 });

</script>
<style> (4)
 .response{
 margin: 1em 0;
 padding: 1em 2em;
 border: 1px solid grey;
 background: #efefef;
 }
</style>