Tracking custom click events

Overview

This example assumes that you already have a jCustomer environment installed and configured with our sample site “Digitall. See this page, if you want to quickly spin an environment on your local machine.

We also assume you’re using Google Chrome and are comfortable with the developer tools (in particular the Console). Please also note that for simplicity’s sake we’re actually not modifying Digitall itself, therefore changes done in the developer console are only available to you in your current browser tab and will be lost if you refresh the page.

Send events on click

In this example we’re going to send an event every time a user clicks on a particular element in a page. 

If you navigate to the “Our company” page on Digitall you will see a list of elements, with multiple tabs that can be used to filter down the results by category.
 

In our example we want to trigger an event whenever a user clicks on the “Healthcare” category. 

If you look at the page source, you will note that this interactive element is not a link to a different page and even though elements displayed to the user will change when clicking on an element, this filtering is entirely executed on the front-end and such events are not visible to your backend.
 

<div id="filters-container" class="cbp-l-filters-text content-xs">
  <div data-filter="*" class="cbp-filter-item cbp-filter-item-active">All</div>
  |
  div data-filter=".8ee252ef-f605-4307-9819-b3f9e551968e" class="cbp-filter-item">Goods</div>
  |
  <div data-filter=".e6f0b888-089a-4124-9803-c8731b63c8a3" class="cbp-filter-item">Healthcare</div>
  |
  <div data-filter=".f13023fa-217b-4671-8190-c5360ab00d13" class="cbp-filter-item">Media</div>
  |
  <div data-filter=".f62c06be-c5e6-47f0-9d02-d3a3192582f6" class="cbp-filter-item">Retail</div>
  |
  <div data-filter=".026b5c43-0601-4773-8b14-32a6fc7f1a7f" class="cbp-filter-item">Technology</div>
</div>

In our use case, we want to better understand if users click on “Healthcare” and for those who do, we want to update their profile to indicate an interest in Health topics.

// Function executed if the event was successfully submitted
const successfulEventSubmission = () => {
  console.log('Submission of the event was successful')
}

// Function executed if submission of the event failed
const failedEventSubmission = () => {
  console.log('Submission of the event failed')
}

// Function executed when a user clicks on Healthcare
const healthcareClick = () => {
  console.log('User clicked on healthcare')
  const sourcePage = wem.buildSourcePage()
  const target = wem.buildTarget('healthcare', 'interest')
  const newEvent = wem.buildEvent('click', target, sourcePage)
  wem.collectEvents({events: [newEvent]}, successfulEventSubmission, failedEventSubmission)
}

const xpathSelector =  '//*[@id="filters-container"]/div[contains(text(),"Healthcare")]';
const matchingElement = document
  .evaluate(xpathSelector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
  .singleNodeValue
  .addEventListener("click",healthcareClick);

Open Chrome developer tools, navigate to the console and copy the above code sample.

From there, every time you click on “Healthcare” the event defined above will be sent to jCustomer.

You can verify that the even was properly received by Unomi by executing the following curl command (don’t forget to update credentials if needed):

curl --request POST \
  --url http://localhost:8181/cxs/events/search \
  --user karaf:karaf \
  --header 'Content-Type: application/json' \
  --data '{
 "limit": 10,
 "condition": {
     "type": "eventPropertyCondition",
           "parameterValues" : {
               "propertyName" : "target.itemType",
               "comparisonOperator" : "equals",
               "propertyValue" : "interest"
            }
        }
}'

Which will return the following payload:

{
  "list": [
    {
      "itemId": "3d10807b-b527-4b1d-92b5-1bee5d9ea7f5",
      "itemType": "event",
      "scope": "digitall",
      "version": 1,
      "eventType": "click",
      "sessionId": null,
      "profileId": "bd3f182d-a0d4-417d-aa93-85c89ebfb304",
      "timeStamp": "2021-11-26T16:41:57Z",
      "properties": {},
      "source": {
        "itemId": "31f8f638-b6da-4cca-9295-6dda4b31cced",
        "itemType": "page",
        "scope": "digitall",
        "version": null,
        "properties": {
          "pageInfo": {
            "language": "en",
            "destinationURL": "http://localhost:8080/sites/digitall/home/our-companies.html",
            "pageID": "31f8f638-b6da-4cca-9295-6dda4b31cced",
            "nodeType": "jnt:page",
            "pagePath": "/sites/digitall/home/our-companies",
            "pageName": "Our Companies",
            "destinationSearch": "",
            "referringURL": "http://localhost:8080/sites/digitall/home/corporate-responsibility.html",
            "tags": [],
            "sameDomainReferrer": true,
            "templateName": "home",
            "categories": [],
            "isContentTemplate": false
          },
          "attributes": {},
          "consentTypes": []
        }
      },
      "target": {
        "itemId": "healthcare",
        "itemType": "interest",
        "scope": "digitall",
        "version": null,
        "properties": {}
      },
      "persistent": true
    }
  ],
  "offset": 0,
  "pageSize": 1,
  "totalSize": 3,
  "totalSizeRelation": "EQUAL",
  "scrollIdentifier": null,
  "scrollTimeValidity": null
}

From there, one event will be sent to jCustomer every time a user clicks on Healthcare. You can reproduce the same behavior in various parts of your site to collect different interests.