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

  1. Global parameters

  2. Event-specific parameters

  3. 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