Behavior Tracking

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const textarea = document.getElementById("input_behavior");
    const submitButton = document.getElementById("submit_button");
  
    // Constants
    const INTERACTION_TYPES = {
        KEYSTROKE: 'KEYSTROKE',
        COPYPASTE: 'COPY_AND_PASTE',
        MOUSE_MOVEMENT: "MOUSE_MOVEMENT",
        MOUSE_CLICK: "MOUSE_CLICK",
    };
  
    // Question ID - This would typically come from your survey tool, you need to edit this
    const QUESTION_ID = "<BAS_QuestionID>";
    const MAX_MOUSE_MOVEMENT_EVENTS = 300;
    const MAX_MOUSE_CLICK_EVENTS = 300;
    const INTERACTION_STORAGE_KEY = QUESTION_ID + "_interaction_data";

    const movementEvents = [];
    const clickEvents = [];
    const keystrokeEvents = [];

    const createInteractionRecord = (value, interactionType) => ({
        value,
        interactionType,
        timestamp: new Date().toISOString()
    });

    const applyCap = (buffer, maxEvents) => {
        while (buffer.length > maxEvents) {
            buffer.shift();
        }
    };

    const pushToCappedBuffer = (buffer, record, maxEvents) => {
        buffer.push(record);
        applyCap(buffer, maxEvents);
    };

    const splitIntoInteractionBuffers = (interactionData) => {
        interactionData.forEach((event) => {
            if (event.interactionType === INTERACTION_TYPES.MOUSE_MOVEMENT) {
                movementEvents.push(event);
                return;
            }
            if (event.interactionType === INTERACTION_TYPES.MOUSE_CLICK) {
                clickEvents.push(event);
                return;
            }
            keystrokeEvents.push(event);
        });
        applyCap(movementEvents, MAX_MOUSE_MOVEMENT_EVENTS);
        applyCap(clickEvents, MAX_MOUSE_CLICK_EVENTS);
    };

    const loadInteractionBuffers = () => {
        const stored = sessionStorage.getItem(INTERACTION_STORAGE_KEY);
        if (!stored) {
            return;
        }
        splitIntoInteractionBuffers(JSON.parse(stored));
    };

    const mergeInteractionDataChronologically = () =>
    [...movementEvents, ...clickEvents, ...keystrokeEvents].sort((a, b) =>
        a.timestamp.localeCompare(b.timestamp)
    );

    const saveInteractionDataToSession = () => {
        sessionStorage.setItem(
            INTERACTION_STORAGE_KEY,
            JSON.stringify(mergeInteractionDataChronologically())
        );
    };

    loadInteractionBuffers();

    // Handle mouse movement events
    document.addEventListener("pointermove", (e) => {
        pushToCappedBuffer(
            movementEvents,
            createInteractionRecord(
                { x: e.clientX, y: e.clientY },
                INTERACTION_TYPES.MOUSE_MOVEMENT
            ),
            MAX_MOUSE_MOVEMENT_EVENTS
        );
    });

    // Handle mouse click events
    document.addEventListener("click", (e) => {
        const target = e.target instanceof Element ? e.target : null;
        if (!target) return;

        const rect = target.getBoundingClientRect();
        pushToCappedBuffer(
            clickEvents,
            createInteractionRecord(
                { width: rect.width, height: rect.height, offsetX: e.clientX - rect.left, offsetY: e.clientY - rect.top, x: e.clientX, y: e.clientY },
                INTERACTION_TYPES.MOUSE_CLICK
            ),
            MAX_MOUSE_CLICK_EVENTS
        );
    });
    
  
    // Handle Keystroke events
    textarea.addEventListener("input", (e) => {
        // Ignore paste events as they're handled separately
        if (e.inputType === "insertFromPaste") return;
      
        keystrokeEvents.push(createInteractionRecord(e.target.value, INTERACTION_TYPES.KEYSTROKE));
    });
  
    // Handle paste events
    textarea.addEventListener("paste", (e) => {
        const selectionStart = e.target.selectionStart;
        const selectionEnd = e.target.selectionEnd;
        const currentValue = e.target.value;
        const pastedText = e.clipboardData?.getData("text") || "";
        const newText = currentValue.slice(0, selectionStart) + pastedText + currentValue.slice(selectionEnd);

        keystrokeEvents.push(createInteractionRecord(newText, INTERACTION_TYPES.COPYPASTE));
    });
  
    // Handle form submission
    submitButton.addEventListener("click", function () {
        saveBASDataPerQuestion();
    });

    window.addEventListener("pagehide", saveInteractionDataToSession);


    // Function to save data in BAS format
    const saveBASDataPerQuestion = () => {
        const interactionData = mergeInteractionDataChronologically();
        const basData = {
            "qualityCheck": "BAS",
            "dataPointId": QUESTION_ID,
            "interactionData": interactionData
        };
      
        sessionStorage.setItem(QUESTION_ID, JSON.stringify(basData));
        saveInteractionDataToSession();
    };
  });
</script>

function clearBASSessionData(questionId) {
  sessionStorage.removeItem(questionId);
  sessionStorage.removeItem(questionId + "_interaction_data");
}

// Call once on survey entry (before tracking starts)
clearBASSessionData(QUESTION_ID);

// After building the payload from sessionStorage, submit then clear
fetch("https://api.redem.io/v3/addRespondent", {
  method: "POST",
  headers: {
    "api-key": "YOUR_API_KEY",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(payload),
})
  .then((response) => response.json())
  .then((data) => {
    // handle response
    clearBASSessionData(QUESTION_ID);
  })
  .catch((error) => {
    // handle error
    clearBASSessionData(QUESTION_ID);
  });