Event API usage examples

Follow

below you can see couple of basic examples how to use Web SDK EventAPI on your website. These examples are grouped by usage of jQuery and plain Javascript.

Prerequisite is that your HTML page has for example a button with id="myBtn" and Beemray Web SDK script (see: Web SDK script integration).

<html>
<body>
    <button id="myBtn">ClickMe!</button>
</body>
</html>

Page onLoad Event example:

 

If you want to send Beemray Events right after the client has loaded the web page below is to correct way to do it:

See Web SDK integration

 

document.addEventListener("beemrayOnLoad", function() {
/* Starts the Beemray Web SDK. */
beemray.Initialize.instance().register(function() {
// Event code HERE!
// Example page load Event below
var pageLoad = beemray.EventAPI.instance().create("pageLoad");
pageLoad.addStringElement("url", window.location.href);
pageLoad.addStringElement("referrer", document.referrer);
pageLoad.send();
});
});

 The anonymous callback function is called when Beemray Web SDK is loaded succesfully.

 

 

Javascript examples:

1. No callback on Event creation:

//add eventListener to button and call anonymous function when clicked and Event is send to backend.
 
document.getElementById("myBtn").addEventListener("click", function() {
/* Check that Beemray Web SDK is loaded */
if (typeof beemray == "undefined") {
return;
} var myBtnClicked = beemray.EventAPI.instance().create("button clicked"); myBtnClicked.addBooleanElement("clicked", true); myBtnClicked.addStringElement("myBtn", "clicked"); myBtnClicked.send(); });

 

2. Event creation with callback function:

(Event callback contains only one parameter the error that occured during Event creation or null if Event creation was succesful) 

document.getElementById("myBtn").addEventListener("click", function() {
/* Check that Beemray Web SDK is loaded */
if (typeof beemray == "undefined") {
return;
}      var myBtnClicked = beemray.EventAPI.instance().create("button clicked");      myBtnClicked.addBooleanElement("clicked", true);      myBtnClicked.addStringElement("myBtn", "clicked");      myBtnClicked.send(eventCallback); });   //handle error situation on event creation function eventCallback(error) {    if (error != null) {      //do something with error      console.log("Error HTTP status code: "+error.getCode());      console.log("Error message from backend: "+error.getDescription()); }
}

Also you can define a Function to call when myBtn is clicked to send Event creation:

document.getElementById("myBtn").addEventListener("click", sendEvent);

function sendEvent() {
/* Check that Beemray Web SDK is loaded /*
if (typeof beemray == "undefined") {
return;
}  
var myBtnClicked = beemray.EventAPI.instance().create("button clicked");   
myBtnClicked.addStringElement("button", "clicked");   
myBtnClicked.addBooleanElement("clicked", true);   
myBtnClicked.send();
}

 

jQuery examples:

3. No callback on Event creation:

//add eventListener to button and call anonymous function when clicked and Event is send to backend.
$('#myBtn').bind('click', function() {
/* Check that Beemray Web SDK is loaded */
if (typeof beemray == "undefined") {
return;
}    
var myBtnClicked = beemray.EventAPI.instance().create("button clicked);      myBtnClicked.addStringElement("button", "clicked");     
myBtnClicked.addBooleanElement("clicked", true);     
myBtnClicked.send();
});

 

4. Event creation with callback function:

(Event callback contains only one parameter the error that occured during Event creation or null if Event creation was succesful)

//add eventListener to button and call anonymous function when clicked and Event is send to backend.
$('#myBtn').bind('click', function() {     
/* Check that Beemray Web SDK is loaded */
if (typeof beemray == "undefined") {
return;
}
var myBtnClicked = beemray.EventAPI.instance().create("button clicked");      myBtnClicked.addStringElement("button", "clicked");     
myBtnClicked.addBooleanElement("clicked", true);     
myBtnClicked.send(eventCallback);
});

//handle error situation on event creation
function eventCallback(error) {     
if (error != null) {     
//do something with error     
console.log("Error HTTP status code: "+error.getCode());     
console.log("Error message from backend: "+error.getDescription());
}
}

Also you can define a Function to call when myBtn is clicked to send Event creation:

$('#myBtn').bind('click', sendEvent);

function sendEvent() {  
/* Check that Beemray Web SDK is loaded */
if (typeof beemray == "undefined") {
return;
}
var myBtnClicked = beemray.EventAPI.instance().create("button clicked");    myBtnClicked.addStringElement("button", "clicked");   
myBtnClicked.addBooleanElement("clicked", true);   
myBtnClicked.send(eventCallback);
}
Have more questions? Submit a request

Comments