DelivrSDK Documentation
SDK & GA4 & Clarity Pixel Documentation
Overview
DelivrSDK is a comprehensive tracking and analytics solution that enables detailed monitoring of user behavior on websites. It automatically tracks various user interactions including page views, clicks, form submissions, scroll depth, and more.
Installation
Basic Installation
The simplest way to add DelivrSDK to your website is by including the script tag directly:
<script id="delivr-ai" src="https://cdn.delivr.ai/pixels/877682fb-6ae5-4dee-8a15-146bbc462ff6/p.js" async></script>Google Analytics Integration
For websites using Google Analytics, you can integrate GA identifiers with DelivrSDK. This implementation automatically captures GA client and session IDs:
<script>
(function () {
var delivrAIScript = document.createElement('script');
delivrAIScript.id = 'delivr-ai';
delivrAIScript.src = '';
delivrAIScript.async = true;
delivrAIScript.setAttribute('data-auto-init', 'false');
delivrAIScript.onload = function () {
function getGACookies(gaKey) {
if (!gaKey) {
console.error('GA Key is missing!');
return {
GA_CLIENT_ID: null,
GA_SESSION_ID: null,
};
}
var getCookie = function (name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) return parts.pop().split(';').shift() || null;
return null;
};
var GA_CLIENT_ID = getCookie('_ga') ? getCookie('_ga').substring(6) : null;
var GA_SESSION_ID = getCookie('_ga_' + gaKey);
return {
GA_CLIENT_ID,
GA_SESSION_ID,
};
}
function getGAIdentifiers(gaKey) {
var cookies = getGACookies(gaKey);
return {
user_id: cookies.GA_CLIENT_ID,
session_id: cookies.GA_SESSION_ID,
};
}
var GAIdentifiers = getGAIdentifiers('YOUR_GA_TRACKING_ID');
if (window.DelivrSDK && typeof window.DelivrSDK.configure === 'function') {
window.DelivrSDK.configure({
globalParams: {
user_id: GAIdentifiers.user_id,
session_id: GAIdentifiers.session_id,
},
}).init();
} else {
console.error('DelivrSDK not loaded!');
}
};
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(delivrAIScript, firstScript);
})();
</script>
Key points about the GA integration:
Set data-auto-init="false" to prevent automatic initialization
Replace 'YOUR_GA_TRACKING_ID' with your actual GA tracking ID
The integration captures:
GA Client ID (from _ga cookie)
GA Session ID (from ga[YOUR_GA_TRACKING_ID] cookie)
Identifiers are added to globalParams
MS Clarity Integration
For websites using Microsoft Clarity, you can integrate Clarity identifiers with DelivrSDK:
<script>
(function () {
var delivrAIScript = document.createElement('script');
delivrAIScript.id = 'delivr-ai';
delivrAIScript.src = './pixel.js';
delivrAIScript.async = true;
delivrAIScript.setAttribute('data-auto-init', 'false');
delivrAIScript.onload = function () {
function getClarityIdentifiers() {
return new Promise((resolve) => {
if (window.clarity) {
window.clarity(
'metadata',
({ projectId, userId, sessionId }) => {
resolve({
user_id: userId,
session_id: sessionId,
});
},
false,
);
} else {
resolve({ user_id: null, session_id: null });
}
});
}
getClarityIdentifiers().then((clarityIdentifiers) => {
if (window.DelivrSDK && typeof window.DelivrSDK.configure === 'function') {
window.DelivrSDK.configure({
globalParams: {
clarity_user_id: clarityIdentifiers?.user_id,
clarity_session_id: clarityIdentifiers?.session_id,
},
}).init();
} else {
console.error('DelivrSDK not loaded!');
}
});
};
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(delivrAIScript, firstScript);
})();
</script>
Basic Configuration
Use configure and optionally .init() to customize:
window.DelivrSDK.configure({
globalParams: {
user_id: 'user123',
app_version: '1.0.0',
environment: 'production',
},
eventParams: {
page_view: { page_type: 'product', category: 'electronics' },
click: { source: 'navigation', element_type: 'button' },
},
}).init();
Event Parameters
Global Parameters
DelivrSDK.setGlobalParams({ user_id: 'user123' });Event-Specific Parameters
DelivrSDK.setEventParams(['page_view', 'click'], {
campaign_id: 'abc123',
source: 'homepage',
}, { overwrite: false });
DelivrSDK.addParamsForEvents('form_submission', {
form_type: 'contact',
});
Parameter Priority
Global parameters
Event-specific parameters
Event data
Automatic Event Tracking
page_view
click
form_submission
scroll_depth
file_download
exit_intent
user_idle
copy
video_engagement
Troubleshooting
SDK Not Loading
if (window.DelivrSDK) {
console.log('SDK loaded successfully');
}GA Integration Issues
Ensure GA is initialized before DelivrSDK
Verify GA tracking ID
Check browser cookie settings
Event Parameter Issues
Ensure correct timing of param setup
Use console logs to trace errors
Verify .init() is called if data-auto-init is false