Send tracking data to Sitecore CDP

Question

I am currently working with Sitecore CDP. I have Sitecore site .when user visit the site , I need to capture the user Interactions using Sitecore CDP, In Official Document I found JavaScript snippet to track the visitor Action but pageviews are not tracked.

Can anyone help me to resolve this? Thanks in advance.

Answer 1

Full workflow to track any events:

1. Connect website with Sitecore CDP: Navigate to CDP -> System Settings -> API Access and copy Client Key value:

Navigate to CDP -> System Settings -> Points of Sale and create new one with values that match your website hostname:

2. Insert javascript snippet to your website layout, replace client_key, pointOfSale, cookie_domain with your values:

<script type = "text/javascript" >
    var _boxeverq = _boxeverq || [],
        _boxever_settings = {
            client_key: "xxxxxxxxxxxxxxxxx",
            target: "https://api.boxever.com/v1.2",
            cookie_domain: ".website.com",
            pointOfSale: "website.com",
            web_flow_target: "https://d35vb5cccm4xzp.cloudfront.net"
        };
! function() {
    var e = document.createElement("script");
    e.type = "text/javascript", e.async = !0, e.src = "https://d1mj578wat5n4o.cloudfront.net/boxever-1.4.8.min.js";
    var t = document.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(e, t)
}() < /script>

3. Trigger _boxeverq.push when it is necessary:

// Place an anonymous function in the Boxever queue 
_boxeverq.push(function() { 
    var viewEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "VIEW",
        "language": "EN",
        "currency": "EUR",
        "page": "/home",
        "pos": "website.com"
    };
    //Add UTM params
    viewEvent = Boxever.addUTMParams(viewEvent);
    // Invoke event create 
    // (<event msg>, <callback function>, <format>)
    Boxever.eventCreate(viewEvent, function(data){}, 'json');
});

My custom wrapper for event triggering:

export const sendBoxeverEvent = (type, options, callback) => { 
  const { page, currency } = options; 
 
  _boxeverq.push(function () { 
    const boxeverEvent = { 
      browser_id: Boxever.getID(), 
      channel: 'WEB', 
      type: type, 
      language: getCookie('lang').toUpperCase() || 'EN', 
      pos: window.location.host, 
      currency: currency || 'EUR', 
      page: page || '/'
    }; 
 
    Boxever.eventCreate( 
      boxeverEvent, 
      function (data) { 
        if (callback) callback(); 
      }, 
      'json' 
    ); 
  }); 
};

// example of usage:
sendBoxeverEvent('VIEW', {page: window.location.pathname});

4. Once javascript _boxeverq.push is triggered, you can see JS request with your values to api.boxever.com in browser Network tab:

This means that yout event was successfully pushed to Sitecore CDP. BUT: if your website visitor is anonymous, you will NOT find this event immideatelly in CPD guest Interactions Timeline tab. But if your visitor is identified - you will see it almost immideatelly:

5. To Identity your visitor you need to push IDENTITY event to Sitecore CDP. Example:

_boxeverq.push(function() { 
    var identityEvent = {
        "browser_id": Boxever.getID(),
        "channel": "WEB",
        "type": "IDENTITY",
        "language": "EN",
        "currency": "EUR",
        "page": "/home",
        "pos": "website.com",
        "email": "myemail@gmail.com",
        "firstName": "First",
        "lastName": "Last"
    };

    Boxever.eventCreate(identityEvent , function(data){}, 'json');
});

P.S. For easy debugging: if your visitor is identified, you can see full user + sessions + events + orders realtime information in Test Canvas tool of any Decision Model, if you select your user:

See more information on Sitecore Knowledge Hub.

Answer 2

I understand that you are using OOTB Email Corner Capture Template such as the one I have pasted below.

You can create a Web experience variant using the OOTB Web template Email Capture, and customize it to your needs by using the Advanced Edit feature as highlighted in Orange. Advanced Edit will allow you to edit and extend the HTML, CSS Properties, JS Code and construct any API to support additional field details such as First Name, Last Name, Gender Etc.

The existing web template's HTML, CSS can be edited as below using Advanced Edit. Here is the HTML example

Update JavaScript code and add listener method for additional fields such as FirstName, LastName etc using ID(identifier). Add code to use the field values for your purpose.

Here is the way the Html web experience will render after you edit the HTML.

Sitecore CDP Web Template gives marketers the ease to reuse the experience, plug and play to create a web experience or experiment from a template in minutes.

Hence, I suggest that you create your own original web template that includes the required fields and the business logic using JS and APIs. This will ensure the template can be reused across multiple experience and experiments by Analyst and Marketers (non-technical)