2

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.

2 Answers 2

4

Full workflow to track any events:

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

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

  1. 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>
  1. 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});
  1. Once javascript _boxeverq.push is triggered, you can see JS request with your values to api.boxever.com in browser Network tab: enter image description here

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: enter image description here

  1. 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": "[email protected]",
        "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: enter image description here

See more information on Sitecore Knowledge Hub.

1
  • Hi x3mxray I'm using Email Capture corner OOB Template to fetch email address of the visitors. If I want to get first name, last name, gender then should I create a custom web template or can override an existing one?
    – Nithya
    Nov 20, 2021 at 10:59
0

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

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

enter image description here

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.

enter image description here

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

enter image description here

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.