This Justuno support article will cover how to create custom javascript event listeners to run code when certain Justuno events occur for visitors.
At a glance:
Introduction
Wait for Justuno to be ready
The full list of Justuno events available
Where to place this code
Introduction
The following guide requires knowledge of code and javascript, we suggest passing this onto your developer if you're not familiar with it
When using our embeds, Justuno automatically triggers events when Justuno related actions happen on your website. You can listen for these events in your own website/application and create custom behaviours or setup tracking for logs and marketing performance purposes.
Before trying to register a listener to a Justuno event, you should wait for Justuno to be ready, you can do this like so:
Wait for Justuno to be ready
In this example, we are simply logging the event response to console so that you can see what data is returned
<script type="text/javascript">
window.addEventListener('justuno.ready', () => {
// Justuno is ready, you can add your code here
});
</script>
The full list of Justuno events available
<script type="text/javascript">
window.addEventListener('justuno.ready', () => {
// Justuno is ready, you can add your code here
// This event is triggered whenever a Justuno design is shown to a visitor
justuno.events.listen('design.viewed', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string
}
*/
});
// This event is triggered when a user clicks through to a product page from a product suggestion
justuno.events.listen('product.click', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string,
"itemId":string,
"itemSku":string,
"itemName":string,
'itemIndex":int
}
*/
});
// This event is triggered when a user adds an item to the cart via a product suggestion
justuno.events.listen('product.add', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string,
"itemId":string,
"itemSku":string,
"itemName":string,
'itemIndex":int
}
*/
});
// This event is triggered when a discount is shown
justuno.events.listen('discount.shown', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string,
"discountName":string,
"discountId":string,
"discountCode":string
}
*/
});
// This event is triggered when a design switches frames
justuno.events.listen('design.frame', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string,
"elementId":string,
"frameName":string,
"frameId":string
}
*/
});
// This event is triggered once for each click action that is ran from a cta click. Action types names will resemble the action types you can add to a cta within the design studio.
justuno.events.listen('design.action', (event) => {
console.log(event);
/*
{
"workflowName":string,
"workflowId":string,
"designName":string,
"designId":string,
"elementId":string,
"actionType":string,
"propertyUpdates":json,
"propertyFullList":json
}
*/
});
});
</script>
Where to place this code
Here are some common places where you can place this code:
- You can place this Javascript code in your site's html or javascript files directly by editing your website theme files.
- You can place this code in an html snippet in side of Google Tag Manager or any other tag manager.
- You can place this code inside the Custom Code section of the Justuno account settings section here. You would not need the <script></script> tags themselves nor the justuno.ready wrapper function portion.
