Add segmentation opt-in controls to your site

The previous tutorial steps describe how you set up the Customer Data Platform (CDP) to track user events on your website and set up segment rules that group customers based on particular event conditions. This tutorial step describes a very simplified UI implementation you can use to test the basic segmentation functionality in this tutorial.

Before you start

This code is not considered a production-ready implementation. You should consider implementing the Consent Banner component for a more robust opt-in experience for your customers.

Steps

Add a standard page to your site and name it "Change Segments".
View the Content tab of the standard page.

Add a WYSIWYG component with the following basic instructional text.

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

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 and you should now have been placed into the segment you selected.

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

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

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

Add a Code component.

Declare the first block of code that controls the Give Consent and Revoke Consent buttons, and the related functions that pass the user consent action through to the CDP.

<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>

In the same Code component, directly below the closing <div> element of your consent block, add the Segment buttons that website users will click to place themselves into one of the segments you configured.

Read the callouts for helpful information about this code block.

...
</script>
</div>

<h2>Select a segment </h2> (1)
<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) (2)
        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'); (3)
    var demo2 = document.getElementById('prospect');

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

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

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

1	Start the next code section from this point to add in the buttons and the logic behind each button.
2	Replace `https://your-organization.matrix.squiz.cloud` with the name of your Squiz DXP Content Management instance name.
3	These vars introduce your segment names from CDP into your frontend code, so that CDP can pick up the action on-click.
4	These functions use the `persona-selector` events you set up for each segment to present the right content.
5	This basic style section adds a border around the `response` `<div>` element.

Select Save.
View the Details tab, and change the status from Under Construction to Live. Save these changes.
Continue to the next part of the tutorial to add content blocks with different personalized content for the segments.

Help Center

Menu

Add segmentation opt-in controls to your site

Before you start

Steps