eesel AI Widget Event Tracking

The eesel AI widget is dynamically injected into your webpage and does not yet provide built-in event tracking.

This script enables event tracking by detecting key interactions with the widget, such as when it opens, closes, or a message is sent.

By using polling to detect when the widget is added and a MutationObserver to track changes inside it, this script ensures efficient and accurate event tracking.

How It Works

The script automatically tracks the following events:

Widget opened
Widget closed
Message sent

Instead of firing analytics events, the script below logs these events using console.debug for example purposes, which allows developers to review the logs in their browser console without cluttering standard logs, and can be modified to fire events to Google Analytics, Amplitude, etc.

Installation and Usage

Include the script on your webpage
Add the following JavaScript snippet to your page where you want to track the widget.

const eeselAi = (() => {
  let widgetOpen = false;
  let pollInterval = null;
  
  // Event handlers
  const handlers = {
    onMessageSent: [],
    onWidgetOpened: [],
    onWidgetClosed: []
  };

  const init = () => {
    // Clear any existing interval first
    if (pollInterval) clearInterval(pollInterval);

    pollInterval = setInterval(() => {
      const widget = document.getElementById('eesel-oracle-widget');

      if (widget) {
        clearInterval(pollInterval);

        const openButton = widget.querySelector('div > button');
        if (openButton) {
          openButton.addEventListener('click', () => {
            widgetOpen = !widgetOpen;
            // Trigger appropriate event handlers
            if (widgetOpen) {
              handlers.onWidgetOpened.forEach(fn => fn());
            } else {
              handlers.onWidgetClosed.forEach(fn => fn());
            }
          });
        }

        // Create a MutationObserver to monitor changes inside the widget
        const observer = new MutationObserver((mutations) => {
          const form = widget.querySelector('form');
          
          if (form && !form.dataset.listenerAttached) {
            form.addEventListener('submit', (event) => {
              handlers.onMessageSent.forEach(fn => fn());
            });
            
            form.addEventListener('keydown', (event) => {
              if (event.key === 'Enter' && !event.shiftKey) {
                handlers.onMessageSent.forEach(fn => fn());
              }
            });
            
            form.dataset.listenerAttached = 'true';
          }
        });

        observer.observe(widget, { childList: true, subtree: true });
      }
    }, 500);

    const widget = document.getElementById('eesel-oracle-widget');
  };

  return {
    init,
    isOpen: () => widgetOpen,
    // Add event handler registration methods
    onMessageSent: (fn) => handlers.onMessageSent.push(fn),
    onWidgetOpened: (fn) => handlers.onWidgetOpened.push(fn),
    onWidgetClosed: (fn) => handlers.onWidgetClosed.push(fn)
  };
})();

Initialise the eesel AI analytics, using the following, include any Google

eeselAi.init();

eeselAi.onMessageSent(() => {
  // Handle message sent
});

eeselAi.onWidgetOpened(() => {
  // Handle widget opened
});

eeselAi.onWidgetClosed(() => {
  // Handle widget closed
});

Open Developer Tools
- In Chrome, right-click anywhere on the page → Inspect → Go to the Console tab.
- In Firefox, press F12 → Select the Console tab.
Interact with the Widget
- Open the eesel AI widget by clicking its button.
- Submit a message.
- Observe console.debug logs indicating event tracking.

Customization

If you want to send these events to an analytics platform, include something like this in the event handers:

if (typeof ga === 'function') {
  ga('send', 'event', 'eesel AI widget', 'opened', 'Widget Opened');
}