Send Custom Events
Oribi automatically captures all button clicks, form submissions and page visits on your site, so you can easily follow conversions and visitors’ activities without using code.
For more advanced actions, such as third-party embedded content (chat windows, Youtube videos, order forms, etc.), you can import your Custom Events from Google or Facebook, or utilizing Oribi’s Javascript API to send an event. Call the
ORIBI.api('track', 'custom event name') function and add your custom event's name.Note: Any JavaScript code added to your website must be wrapped in
<script> and </script> tags.General Example Code:
Code Example
// Sends a "successful subscription" event to Oribi
ORIBI.api('track', 'successful_subscription');
// Sends a "chat initiation" event to Oribi
ORIBI.api('track', 'chat_started');
// Sends an event that a user watched a whole video
ORIBI.api('track', 'user_completed_video');One of the most popular custom code events are embedded Youtube videos. To create a custom code for a Youtube video on your site, first make sure Oribi is set up on the page the video is on.
Then, create a short script to add callback listeners to the video player event. Catch events for the video player progress and send them accordingly to Oribi.
Here’s an example code for embedded Youtube videos. Note that this is just an example and has to be adjusted for each individual site and video.
Add a Javascript code that sends events from the player to Oribi.
Code Example
let player;
let videoInterval;
let videoEventName = "sample-video";
let passedBreakpoint = 0;
const breakpoints = [0.25, 0.5, 0.75];
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "360",
width: "640",
videoId: "M7lc1UVf-VE",
events: {
onStateChange: onPlayerStateChange
}
});
}
let done = false;
function onPlayerStateChange(event) {
if (
!done &&
event.data === YT.PlayerState.PLAYING &&
parseInt(player.getCurrentTime(), 10) === 0
) {
ORIBI.api("track", `clicked-${videoEventName}`);
videoInterval = setInterval(checkVideoState, 1000);
}
if (event.data === YT.PlayerState.ENDED) {
done = true;
ORIBI.api("track", `watched-${videoEventName}-100%`);
clearInterval(videoInterval);
}
}
function checkVideoState() {
const viewedPercentage = player.getCurrentTime() / player.getDuration();
breakpoints.forEach((breakpoint) => {
if (passedBreakpoint < breakpoint && viewedPercentage >= breakpoint) {
passedBreakpoint = breakpoint;
ORIBI.api("track", `watched-${videoEventName}-${breakpoint * 100}%`);
}
});
}