OcambaHood Modals demo ›
Hood Tag · rules engine

A tag manager you declare in JavaScript.

Triggers (when) fire actions (what) — the same engine that powers modals. In production your team builds these rules in the Ocamba dashboard and they reach the page as auto-config: launched, versioned and rolled back without a single site release. For this demo the whole container is declared inline in one Hood('init', …, { tag_config }) block, so you can read every rule in view-source — interact below and watch each status strip flip the moment its trigger fires.

Live triggers

Click trigger_fire: 'each' vs 'once'

Good for: CTA instrumentation, exit prompts. Same button, two tags — one refires on every click (see the counter), one retires after the first.

Waiting for a click…
Waiting for the first click…

Timer

Good for: engaged-visitor offers ("still reading after 6s"). Started on page load:

⏱ waiting 6 seconds…

Custom event

Good for: firing tags from your own product logic — Hood('trackEvent', 'demo:custom') is matched by name, no DOM events involved.

Waiting for the event…

Campaign groups

Good for: mutually exclusive offers — tags in the same group run once per page view: whichever fires first wins.

Neither offer shown yet…

Form submit

Good for: lead capture and signup tracking without touching the form's own code.

Waiting for a submit…

Consent gate

Good for: GDPR-safe marketing tags — the userConsent trigger holds a tag until consent arrives. This page deliberately boots without consent; grant it here:

Scroll depth — 50%

Good for: engagement-gated content and "reader" offers. Scroll through the runway below:

Scroll down…
⇣ keep scrolling — the 50% mark is below ⇣

Element visibility

Good for: "saw the pricing table" signals — fires when a specific element enters the viewport:

The target is below — scroll to it…
⇣ a bit further ⇣
🎯 I'm the observed element

Events, identity & audience

The measurement half of the API — open your browser's network tab and watch each call become an analytics beacon. All of it consent-gated by the categories above.

Identify & profile

Custom & e-commerce events

The code behind this page

Hood('init', 'YOUR-TAG', {
  tag_config: {
    tags: [{
      id: 'engaged-reader',
      triggers: [
        { type: 'scroll',     config: { vertical: 50, v_unit: '%' } },
        { type: 'timer',      config: { time: 6000 } },
        { type: 'click',      config: { i: '#cta' } },
        { type: 'visibility', config: { s: '#pricing' } },
        { type: 'formSubmit', config: { s: '#signup' } },
        { type: 'event',      config: { name: 'my-app:milestone' } }
      ],
      // triggers_all: true,        // require ALL triggers, not any
      trigger_fire: 'once',         // or 'each'
      group: 'offers',              // once per group per page view
      i: '#banner',                 // action target…
      a: 'replaceContent',          // …action…
      c: '<b>Welcome back!</b>'      // …content
    }]
  }
});