Appearance
JavaScript Example
A complete example showing how to integrate InsightCore analytics into a standard web application.
Basic Integration
1. Install the Tag
Add the analytics tag to your HTML template:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Store</title>
</head>
<body>
<!-- Your page content -->
<script>
var rspaq = rspaq || [];
rspaq.push(['init', 'org_00000a1B2c3D4e5']);
</script>
<script async src="https://api.insightcore.retailsuccessplatform.com/api/v1/tag/rsp-analytics.js"></script>
</body>
</html>That's it — page views, clicks, scroll depth, and form submissions are captured automatically.
2. Track Ecommerce Events
Add ecommerce tracking from your application code:
javascript
// Product viewed
rspaq.push(['trackEvent', 'product_view', {
product_id: 'prd_00000k1L2m3N4o5',
product_name: 'Organic Bananas',
product_price: 2.99,
product_category: 'Produce'
}]);
// Added to cart
document.querySelector('#add-to-cart').addEventListener('click', function () {
rspaq.push(['trackEvent', 'add_to_cart', {
product_id: 'prd_00000k1L2m3N4o5',
product_name: 'Organic Bananas',
product_price: 2.99,
quantity: parseInt(document.querySelector('#qty').value, 10)
}]);
});
// Checkout started
function onCheckoutStart(cart) {
rspaq.push(['trackEvent', 'checkout', {
item_count: cart.items.length,
cart_total: cart.total
}]);
}
// Purchase completed
function onPurchaseComplete(order) {
rspaq.push(['trackEvent', 'purchase', {
order_total: order.total,
items: order.items.map(function (item) {
return {
product_id: item.product_id,
quantity: item.quantity,
price: item.price
};
})
}]);
}3. Search Tracking
Track search queries to understand what visitors are looking for:
javascript
document.querySelector('#search-form').addEventListener('submit', function (e) {
var query = document.querySelector('#search-input').value;
rspaq.push(['trackEvent', 'search', {
query: query,
results_count: window.searchResultsCount || 0
}]);
});Server-Side Reporting
Use the reporting API from your backend to display analytics in your admin panel.
Fetch Overview Metrics
javascript
const response = await fetch(
'https://api.insightcore.retailsuccessplatform.com/api/v1/analytics/reports/overview?from=2026-03-01&to=2026-03-26',
{
headers: {
'Authorization': `Bearer ${accessToken}`,
'Accept': 'application/json'
}
}
);
const { data } = await response.json();
console.log(`Visitors: ${data.total_visitors}`);
console.log(`Page Views: ${data.total_page_views}`);
console.log(`Bounce Rate: ${data.bounce_rate}%`);
console.log(`Avg Session: ${data.avg_session_duration_seconds}s`);Fetch Real-Time Visitor Count
javascript
async function pollActiveVisitors() {
const response = await fetch(
'https://api.insightcore.retailsuccessplatform.com/api/v1/analytics/realtime/active-visitors',
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
);
const { data } = await response.json();
document.querySelector('#active-visitors').textContent = data.active_visitors;
}
// Poll every 10 seconds
setInterval(pollActiveVisitors, 10000);
pollActiveVisitors();Fetch Top Pages
javascript
const response = await fetch(
'https://api.insightcore.retailsuccessplatform.com/api/v1/analytics/reports/pages?from=2026-03-01&to=2026-03-26',
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
);
const { data } = await response.json();
data.forEach(page => {
console.log(`${page.page_url}: ${page.views} views, ${page.unique_visitors} unique`);
});Analyze a Funnel
javascript
const funnelId = 'fnl_00000k1L2m3N4o5';
const response = await fetch(
`https://api.insightcore.retailsuccessplatform.com/api/v1/funnels/${funnelId}/analyze?from=2026-03-01&to=2026-03-26`,
{
headers: { 'Authorization': `Bearer ${accessToken}` }
}
);
const { data } = await response.json();
console.log(`Funnel: ${data.name}`);
data.steps.forEach(step => {
const rate = (step.completion_rate * 100).toFixed(1);
console.log(` Step ${step.step_number}: ${step.step_name} — ${step.entries} entries (${rate}% completion)`);
});Complete HTML Example
A self-contained page demonstrating client-side tracking:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InsightCore Demo</title>
</head>
<body>
<h1>My Store</h1>
<div data-rsp-product
data-rsp-product-id="prd_00000k1L2m3N4o5"
data-rsp-product-name="Organic Bananas"
data-rsp-product-price="2.99">
<h2>Organic Bananas</h2>
<p>$2.99</p>
<button id="add-to-cart">Add to Cart</button>
</div>
<form id="search-form">
<input type="text" id="search-input" placeholder="Search products...">
<button type="submit">Search</button>
</form>
<script>
var rspaq = rspaq || [];
rspaq.push(['init', 'org_00000a1B2c3D4e5']);
// Track add-to-cart click
document.getElementById('add-to-cart').addEventListener('click', function () {
rspaq.push(['trackEvent', 'add_to_cart', {
product_id: 'prd_00000k1L2m3N4o5',
product_name: 'Organic Bananas',
product_price: 2.99,
quantity: 1
}]);
});
// Track search
document.getElementById('search-form').addEventListener('submit', function (e) {
e.preventDefault();
rspaq.push(['trackEvent', 'search', {
query: document.getElementById('search-input').value
}]);
});
</script>
<script async src="https://api.insightcore.retailsuccessplatform.com/api/v1/tag/rsp-analytics.js"></script>
</body>
</html>Changelog
| Date | Change |
|---|---|
| 2026-03-26 | Initial publication. |