Skip to main content

crimoo-inspector

Purpose and Production Relevance​

crimoo-inspector is the browser-side diagnostic panel injected into customer sites during debug sessions. It helps developers and users inspect identity, dataLayer events, forms, network activity, and CRM capture rules without leaving the customer site.

Production relevance: supporting production tool for debugging and CRM rule creation.

Stack and Main Dependencies​

  • Preact.
  • Vite.
  • TypeScript.
  • Shadow DOM for CSS isolation.
  • Vitest and Testing Library.

Important files and folders:

  • crimoo-inspector/src/index.tsx
  • crimoo-inspector/src/App.tsx
  • crimoo-inspector/src/components
  • crimoo-inspector/src/hooks
  • crimoo-inspector/src/utils
  • crimoo-inspector/src/styles
  • crimoo-inspector/vite.config.ts

Business Responsibilities​

The inspector makes CRM capture understandable from the customer site:

  • Show identity cookies and attribution context.
  • Show grouped dataLayer events.
  • Show configured capture rules.
  • Scan forms and show fields that can be mapped.
  • Show intercepted network requests.
  • Create capture rules from observed events/forms via postMessage back to the admin UI.

Technical Architecture and Entry Points​

The inspector builds to a single IIFE JavaScript bundle. It mounts into a Shadow DOM so it does not inherit or break customer-site CSS.

Runtime flow:

Key Data Flows and Service Integrations​

  • gtm-fabric serves the built bundle as a static debug resource.
  • gtm-proxy custom loader can load the panel when debug tokens/conditions are present.
  • Angular listens for crimoo:create-rule messages and creates rules through CRM config services.
  • node-api persists capture rules and CRM configuration.

Environment, Deploy, and Runtime Notes​

Common commands:

cd crimoo-inspector
npm install
npm run dev
npm run build
npm run test

Deploy/update pattern:

  1. Build the inspector bundle.
  2. Copy the generated IIFE bundle into gtm-fabric/src/main/resources/static.
  3. Redeploy gtm-fabric.

Debugging Checklist​

  • If the panel does not load, check debug token detection, loader script, static resource path, and browser console errors.
  • If styles leak or break, check Shadow DOM mounting and injected CSS.
  • If events are missing, check dataLayer polling and event flattening.
  • If forms are missing, check scanner selectors and iframe/shadow limitations on the customer site.
  • If rule creation fails, check postMessage origin/window relationship and Angular listener behavior.
  • If CORS errors appear, check whether inspector fetches use the expected credentials mode.

Tests or Validation Commands​

cd crimoo-inspector
npm run test
npm run build

Manual smoke tests:

  • Load a debug page and confirm panel appears.
  • Confirm tabs render: Identity, Events, Rules, Forms, Network.
  • Create a rule from an event and confirm Angular receives the message.
  • Build and verify bundle size remains reasonable for injection.

Mastery Checklist​

  • Explain how the inspector enters the page and stays isolated.
  • Trace a rule creation from panel click to Angular CRM service.
  • Add a tab or hook without breaking the IIFE/shadow bundle model.
  • Debug customer-site conflicts without changing core tracking logic.