This document provides step-by-step instructions for integrating Nitro's JavaScript API into your website.
It explains how to use various methods to track custom events, and implement Nitro's tracking features after manually installing the script.
Add the Nitro installation script inside the section of your website.
The script should be added to every page where visitor activity needs to be tracked.
<script type="text/javascript">
(function(n,i,t,r,o) {
var a,m;n['NitroObject']=o;n[o]=n[o]||function(){
(n[o].q=n[o].q||[]).push(arguments)},n[o].l=1*new
Date();n[o].h=r;a=i.createElement(t),
m=i.getElementsByTagName(t)[0];a.async=1;a.src=r;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://x.nitrocommerce.ai/nitro.js','nitro');
nitro('configure', '<YOUR_ORG_TOKEN>');
</script>
Note: Replace <YOUR_ORG_TOKEN> with the token provided by the Nitro team.
Trigger the identify method when a visitor logs in, creates an account, submits their contact information, or becomes identifiable to track their activity on the website.
nitro.identify(
"<VISITOR_EMAIL>",
"<VISITOR_PHONE>",
"<VISITOR_NAME>",
{
None
None
source: '<SOURCE>',
template_id: "",
org_token: "<YOUR_ORG_TOKEN>",
is_consented: true,
otp_verified: true
}
);
Note: Depending on the location where the user provides their information, the source parameter should be set to brand_popup, brand_lead_form, brand_account_login, or brand_checkout. Please ensure you swap <YOUR_ORG_TOKEN> with the specific token issued by the Nitro team.
Implement the following events according to the customer journey on your website.
Trigger this event when a visitor opens a product detail page.
<script>
var payload = {
title: '<PRODUCT_TITLE>',
image: '<PRODUCT_IMAGE>',
page: '<PAGE_URL>'
};
if (!window.nitro) {
window.nitroSettings = {
ready: function (orgId, roamingId, nitroId) {
nitro.track('productView', payload);
}
};
} else {
window.nitro.track('productView', payload);
}
</script>
Trigger this event when a visitor opens a category or collection page.
<script>
var payload = {
page: '<PAGE_URL>',
category: '<CATEGORY_NAME>'
};
if (!window.nitro) {
window.nitroSettings = {
ready: function (orgId, roamingId, nitroId) {
nitro.track('categoryView', payload);
}
};
} else {
window.nitro.track('categoryView', payload);
}
</script>
Use the updatecart event whenever:
● A product is added to the cart
● A product is removed from the cart
● The quantity of a product changes
Always send all products currently present in the cart and trigger this event whenever anything in the cart changes so that we can capture the timeline of cart activity in order.
const cart_data = {
cart_url: "<CART_URL>",
cart_value: <TOTAL_CART_VALUE>,
line_items: [
{
quantity: <QUANTITY>,
title: "<PRODUCT_TITLE>",
line_price: <PRODUCT_PRICE>,
id: "<VARIANT_ID>",
product_id: "<PRODUCT_ID>",
image_url: "<PRODUCT_IMAGE>"
},
{
quantity: <QUANTITY>,
title: "<SECOND_PRODUCT_TITLE>",
line_price: <SECOND_PRODUCT_PRICE>,
id: "<SECOND_VARIANT_ID>",
product_id: "<SECOND_PRODUCT_ID>",
image_url: "<SECOND_PRODUCT_IMAGE>"
}
]
};
nitro.updatecart(cart_data);
Trigger this event when the visitor starts the checkout process.
const checkout_data = {
checkout_url: "<CHECKOUT_URL>",
cart_value: <TOTAL_CART_VALUE>,
items: [
{
product_id: <PRODUCT_ID>,
price: <PRODUCT_PRICE>,
product_url: "<PRODUCT_URL>"
},
{
product_id: <SECOND_PRODUCT_ID>,
price: <SECOND_PRODUCT_PRICE>,
product_url: "<PRODUCT_URL>"
}
]
};
nitro.checkout(checkout_data);
Trigger this event after the purchase is successfully completed.
It should ideally be fired on the order confirmation or thank-you page.
<script>
var payload = {
checkout_url: "<CHECKOUT_URL>",
order_id: <ORDER_ID>,
order_amount: <TOTAL_ORDER_AMOUNT>,
coupon_code: "<DISCOUNT_COUPON>",
discount_amount: <DISCOUNT_AMOUNT>,
items: [
{
product_id: <PRODUCT_1_ID>,
price: <PRODUCT_1_PRICE>,
product_url: "<PRODUCT_1_URL>"
},
{
product_id: <PRODUCT_2_ID>,
price: <PRODUCT_2_PRICE>,
product_url: "<PRODUCT_2_URL>"
}
]
};
if (!window.nitro) {
window.nitroSettings = {
ready: function (orgId, roamingId, nitroId) {
nitro.track('buy', payload);
}
};
} else {
window.nitro.track('buy', payload);
}
</script>
Ensure that the buy event is triggered only once for each order.
Use custom events to track additional actions that are specific to your website.
Examples include:
● Wishlist addition
● Form submitted
● CTA clicked
<script>
var payload = {
page : '<PAGE_URL>',
KEY_1: 'VALUE_1',
KEY_2: 'VALUE_2'
};
if (!window.nitro) {
window.nitroSettings = {
ready: function (orgId, roamingId, nitroId) {
nitro.track('<EVENT_NAME>', payload);
}
};
} else {
window.nitro.track('<EVENT_NAME>', payload);
}
</script>
Note: The key-value pairs can be customized with specific parameters or attributes, such as customer email,
phone number, name, and more, as needed.
Before completing the integration, verify that:
● The Nitro script is present on all website pages
● The correct organisation token is configured
● Product View fires on product pages
● Category View fires on collection pages
● Update Cart fires after every cart change
● Checkout fires when checkout begins
● Buy fires only after a successful purchase
● Phone numbers and email addresses are passed correctly
● Event values are populated dynamically
● No event is being triggered multiple times for the same action
Once the setup is completed, inform the Nitro team so that the integration and incoming events can be validated.