Event response

Event response in Tracardi refers to the data that is sent back from the server after processing an event. This response typically includes information about the current profile ID and may also contain additional data based on the configurations and logic defined within workflows.

Structure of Event Response

Event responses in Tracardi are structured in JSON format and contain various keys and values. The response typically includes information related to different aspects of the workflow, such as saved events, errors, IDs, and types. For example, in the provided example response:

{
  "response": {
    "segments": ["a", "b"]
  },
  "ux": {},
  "profile": {
    "id": "0d2d9dc5-0d60-471e-956f-8766dcb8aba2"
  }
}

The above response includes information about segments, profile ID, etc.

Tracardi provides you with the flexibility to configure response data within each event type workflow. This means that you can define what data should be included in the response generated by a specific workflow, which is bound to a defined event type and its properties. The response data can be structured and organized using response keys, such as segments, which are defined fields that contain the data returned by a workflow and can be copied from a profile, for example.

By configuring response data in your event type workflows, you can specify the data that should be included in the response generated by that particular workflow. This allows you to return and data captured and processed in Tracardi based on your specific requirements and business needs. You can define the response keys that should be included in the response, which can be used in downstream processes for further analysis, actions, and decision-making (e.g. content personalisation).

Capturing Tracker Response

Tracardi allows you to capture the event response, which can be useful for customizing page content based on customer segments or utilizing data returned from workflows. In the provided example, the event response is captured using the window.onTracardiReady event and accessed through the context.response object. For example:

Example

 // Change page if has response custom.text
 window.onTracardiReady.bind( ({tracker, helpers, context, config}) => {
     if(context?.response?.custom?.text) {
         const customText = document.getElementById('custom')
         customText.innerText = context?.response?.custom?.text
     }
 })

In the above example, the context.response.custom.text value is accessed from the response and used to update the content of an HTML element with the id attribute of 'custom'. This allows you to dynamically change the page content based on the data returned from Tracardi workflows.

Binding Page Elements

You can also bind events to page elements. To do that you will need to be sure that the page loads and every element of the page is accessible.

To do that bind the function to window.onTracardiReady property.

window.onTracardiReady.bind( ({helpers, context, config, tracker}) => {
      // Code that binds events.
    }
});

The whole configuration should look like this.

<script>
        !function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeo...

        window.onTracardiReady.bind( ({helpers, context, config, tracker}) => {
              // Code that binds events.
            }
        });

        const options = {
            tracker: {
                url: {
                    script: 'http://192.168.1.103:8686/tracker',
                    api: 'http://192.168.1.103:8686'
                },
                source: {
                    id: "ee2db027-46cf-4034-a759-79f1c930f80d"
                }
            }
        }

  </script>

The above example will run on every page after the events are triggered. It will not run if TRACARDI did not respond.

The function have the following parameters.

• helpers - this is a reference to class that will allow you to raise another events
• context has the response from Tracardi to you initial events. It will have profile data, and if configured debug information.
• config - it is the tracker config as defined in options
• tracker - it is tracker object.

OnTracardiReady triggered on selected page

You can bind functions to windows.OnTracardiReady on selected pages together with track events. Then it will be executed only on selected pages.

window.tracker.track("page-view",{}); // (1)
window.onTracardiReady = ({tracker, helpers, context, config}) => {
    // Code
}

1. Set tracks first. Then bind a function.

Binding events to page elements

Then you can write a code that binds for example onClick event on a button to tracardi event.

This is the example code that you can bind to window.onTracardiReady

({helpers, context}) => {
    const btn0 = document.querySelector('#button')

    helpers.onClick(btn0, async ()=> {
        const response = await helpers.track("page-view", {"page": "hello"});

        if(response) {
            const responseToCustomEvent = document.getElementById('response-to-custom-event');
            responseToCustomEvent.innerText = JSON.stringify(response.data, null, " ");
            responseToCustomEvent.style.display = "block"
        }
    });
}

It looks for the element with id="button"

const btn0 = document.querySelector('#button')

Then using helpers binds onClick on that element to function:

async ()=> {
        // Send event to tracardi
        const response = await helpers.track("page-view", {"page": "hello"});

        if(response) {
            const responseToCustomEvent = document.getElementById('response-to-custom-event');
            responseToCustomEvent.innerText = JSON.stringify(response.data, null, " ");
            responseToCustomEvent.style.display = "block"
        }
    }

Inside the function we send the event to Tracardi:

const response = await helpers.track("page-view", {"page": "hello"});

And on response we make a string from JSON response and bind it as innerText of element with id='response-to-custom-event'

Wrap up

The whole configuration looks like this:

<script>

    // Compiled code must be always in the first line

    !function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeo...

    // Configure tracker

    const options = {
        tracker: {
            url: {
                script: 'http://192.168.1.103:8686/tracker',
                api: 'http://192.168.1.103:8686'
            },
            source: {
                id: "ee2db027-46cf-4034-a759-79f1c930f80d"
            }
        }
    }

    // Bind some function when TRACARDI responds

    window.onTracardiReady.bind(({helpers, context}) => {
        const btn0 = document.querySelector('#button')

        helpers.onClick(btn0, async ()=> {
            const response = await helpers.track("page-view", {"page": "hello"});

            if(response) {
                const responseToCustomEvent = document.getElementById('response-to-custom-event');
                responseToCustomEvent.innerText = JSON.stringify(response.data, null, " ");
                responseToCustomEvent.style.display = "block"
            }
        });
    });

</script>

Tracardi helpers

You probably noticed that we use helpers to bind events. We used onClick method to bind to click event. You might need to bind to other than click event. To do that use addEventListener:

const btn0 = document.querySelector('#button')                 
helpers.addListener(btn0, 'mouseover', async ()=> {
    // Code
});

Helpers also have track method that let you send custom event to Tracardi at any time.

This is how you can use it:

const response = await helpers.track("new-page-view", {"page": "hello"});