The Nitro JS API Integration Guide (for Custom Script Installation) provides step-by-step instructions for integrating Nitro's JavaScript API into your website.
It explains how to use various methods to identify visitors, track custom events, and implement Nitro's tracking features after manually installing the script.
Use nitro.identify method to identify visitors by providing their email, phone, and name.
nitro.identify("<visitor_email>", "<visitor_phone>", "<visitor_name>");
Different events can be tracked with the help of methods enlisted below:
Use nitro.view method to track page views.
// Example view event data
view_data = {
page: "https://someurl.com"
}
// Track view event
nitro.view(view_data);
Use nitro.updatecart method to track when items are added to the cart or removed from the cart. line_items should contain all items currently in the cart.
While sending update cart event send all the line items currently in cart. Trigger this event whenever anything in cart changes so that we can capture the timeline of cart activity in order.
// Example add to cart event data
cart_data = {"line_items": line_items, "cart_value": cart_value}
cart_data = {
cart_url: "https://someurl.com",
product_id: 123456,
line_items: [{
"quantity": 1,
"title": "Black Box",
"line_price", 24.00,
"id": "987654" (Variant Id),
"product_id": "1234567",
"image_url": "variant or product image url"
},
{
"quantity": 1,
"title": "Pink Box",
"line_price", 20.00,
"id": "987654" (Variant Id),
"product_id": "1234568",
"image_url": "variant or product image url"
}],
cart_value: 44.00
}
// Track add to cart event
nitro.updatecart(cart_data);
Use nitro.checkout method to track checkout events.
// Example checkout event data
checkout_data = {
checkout_url: "<checkout_url>",
items: [
{
product_id: 12345,
price: 12.00,
product_url: "https://someurl.com/product_id"
},
{
product_id: 12346,
price: 18.00,
product_url: "https://someurl.com/product_id"
}
],
cart_value: <total_checkout_amount>,
}
// Track checkout event
nitro.checkout(checkout_data);
Use nitro.buy method to track purchase events.
// Example buy event data
buy_data = {
checkout_url: "https://someurl.com",
order_id: "1231312312312",
items: [
{
product_id: 12345,
price: 12.00,
product_url: "https://someurl.com/product_id"
},
{
product_id: 12346,
price: 12.00,
product_url: "https://someurl.com/product_id"
}
]
}
// Track buy event
nitro.buy(buy_data);
Use nitro.productView method to track product view events.
// Example product view event data
product_data = {
"title": "Your product title",
"image": "https://https://someurl.com/cdn/shop/files/Main.jpg?v=1718006767",
"page": "https://https://someurl.com/products/the-videographer-snowboard",
}
// Track product view event
nitro.productView(product_data);
Use nitro.categoryView method to track category view events.
// Example category view event data
category_data = {
"page" : "https://https://someurl.com/collections/all",
"category" : "All",
}
// Track category view event
nitro.categoryView(category_data);
Use the nitro.track method to capture custom events based on specific user actions. This allows you to track interactions such as button clicks, feature usage, campaign engagement, or any custom behavior relevant to your website.
You need to pass an event name and an associated value or data object. The event name should clearly describe the action, while the value can be a simple indicator or detailed contextual data to help with analysis.
// Track custom event
nitro.track("<EVENT_NAME>", EVENT_VALUE);
To ensure tracking events work reliably, wrap your nitro.track() calls inside nitroSettings.ready. This guarantees the Nitro SDK is fully initialized and all identifiers are available.
Place this snippet before the Nitro script tag on your page:
window.nitroSettings = {
ready: function(orgId, roamingId, nitroId) {
// You can fire multiple tracking events here
nitro.track('product_view', {
page: window.location.href,
title: 'Yellow Threadwork Tissue Readymade Lehenga',
image: 'https://cdn.shopify.com/...'
});
nitro.track('another_event', { key: 'value' });
}
};
nitroSettings.ready fires once when the SDK is initialized. Use it for any tracking events you want to fire on page load.
For events triggered by user actions (button clicks, add to cart, etc.), you don't need nitroSettings.ready — the SDK will already be initialized by then. You can directly call:
nitro.track('addtocart', { title: '...', image: '...' });
If your page data (product title, image, etc.) loads dynamically and may not be available immediately, use this pattern to wait for both the SDK and the page data:
window.nitroSettings = {
ready: function(orgId, roamingId, nitroId) {
window._nitroReady = true;
if (window._pageDataReady) fireTrackEvent();
}
};
function fireTrackEvent() {
nitro.track('product_view', {
page: window.location.href,
title: document.querySelector('meta[property="og:title"]')?.content,
image: document.querySelector('meta[property="og:image"]')?.content
});
} // this is only example payload
document.addEventListener('DOMContentLoaded', function() {
window._pageDataReady = true;
if (window._nitroReady) fireTrackEvent();
});
Events to enter funnel = ["addtocart", "updatecart", "checkout"]
Events to exit funnel = "buy"