A complete example page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Request a demo — Brand</title>

  <!--
    1. CONSENT FIRST.
    The tag reads this as soon as it starts up, so a value already here means
    no waiting at all. Replace the body with your real platform's callback.
  -->
  <script>
    window.__consent = window.__consent || {};
    function agSyncConsent(granted) {
      window.__consent = {
        analytics: !!granted,
        marketing: !!granted,
        necessary: true,
      };
    }
  </script>

  <!--
    2. THE CALL QUEUE, before the tag.
    Anything pushed here is replayed once the tag is ready, and push keeps
    working afterwards — so you never branch on whether it has loaded.
  -->
  <script>
    window.agq = window.agq || [];
  </script>

  <!--
    3. THE TAG.
    data-ag-key is needed for tracking. It is NOT needed for form capture.
  -->
  <script src="https://mk.brand.com/_ag/v1.js"
          data-ag-key="agsk_REPLACE_ME" async></script>
</head>

<body>
  <h1>Request a demo</h1>

  <!--
    4. YOUR OWN MARKUP.
    allGood never renders or restyles this. All it needs is the data-ag-form
    attribute and name attributes matching the form's fields.
    Do NOT add a honeypot field yourself — the script adds it.
  -->
  <form data-ag-form="f7k2m9qp" class="demo-form">
    <label>Work email
      <input type="email" name="email" required />
    </label>
    <label>First name
      <input type="text" name="firstName" />
    </label>
    <label>Company
      <input type="text" name="company" />
    </label>

    <!-- Hidden fields are captured like any other. -->
    <input type="hidden" name="utm_source" value="linkedin" />
    <input type="hidden" name="pageVariant" value="pricing-cta" />

    <button type="submit">Request a demo</button>
  </form>

  <!-- 5. WHERE THE OUTCOME MESSAGE GOES. Omit it to write your own copy. -->
  <p data-ag-form-status="f7k2m9qp" role="status" aria-live="polite"></p>

  <button id="calc">Open the pricing calculator</button>

  <script>
    // ---- 6. YOUR OWN EVENTS ---------------------------------------------
    document.getElementById("calc").addEventListener("click", function () {
      window.agq.push(["track", "Pricing Calculator Used", {
        seats: 250,
        plan: "enterprise",
      }]);
    });

    // If your site already knows who this is, say so. `email` is what
    // resolves them to a known person.
    // window.agq.push(["identify", { email: "ada@example.com" }]);

    // ---- 7. REACTING TO THE FORM ----------------------------------------
    document.addEventListener("allgood:form:submitted", function (e) {
      var d = e.detail; // { formId, status, submissionId, email, redirectUrl }

      // Fires BEFORE any success redirect, so a conversion tag still runs.
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "generate_lead", form_id: d.formId });
    });

    document.addEventListener("allgood:form:rejected", function (e) {
      var d = e.detail; // { formId, status, errors? }

      if (d.status === "unknown_source") {
        // Not the visitor's fault — a configuration problem.
        console.error("allGood: this form or origin is not accepting submissions");
      }
    });
  </script>
</body>
</html>