ga4-schema-overseer/example.html at main · analytics-debugger/ga4-schema-overseer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GA4 Schema Overseer — IIFE Example</title>
  <style>
    body { font-family: monospace; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
    textarea { width: 100%; height: 60px; font-family: monospace; font-size: 14px; }
    pre { background: #f4f4f4; padding: 1rem; overflow-x: auto; }
    .pass { color: green; }
    .fail { color: red; }
    button { padding: 0.5rem 1rem; font-size: 14px; cursor: pointer; margin-top: 0.5rem; }
    h3 { margin-bottom: 0.25rem; }
  </style>
</head>
<body>
  <h1>GA4 Schema Overseer</h1>
  <p>Paste a GA4 collect URL below and click <strong>Validate</strong>.</p>

  <h3>Schema</h3>
  <pre id="schema-display"></pre>

  <h3>GA4 Collect URL</h3>
  <textarea id="url-input">https://www.google-analytics.com/g/collect?v=2&tid=G-ABC123XYZ&cid=111.222&en=page_view&ep.page_type=home&epn.engagement_time=300&sr=1920x1080</textarea>
  <br>
  <button onclick="runValidation()">Validate</button>

  <h3>Result</h3>
  <pre id="result"></pre>

  <!-- Load the IIFE build -->
  <script src="./dist/index.global.js"></script>
  <script>
    // Access the library via window.GA4SchemaOverseer
    var validate = GA4SchemaOverseer.validate;

    // Define your schema using the simple format
    var schema = [
      {
        event_name: "page_view",
        event_params: {
          page_type: ["home", "product", "category"],  // enum
          page_path: "string",                          // any string
          engagement_time: "number",                     // number → epn.*
        }
      },
      {
        event_name: "purchase",
      }
    ];

    // Display the schema
    document.getElementById("schema-display").textContent = JSON.stringify(schema, null, 2);

    function runValidation() {
      var url = document.getElementById("url-input").value.trim();
      var resultEl = document.getElementById("result");

      try {
        var result = validate(url, schema);

        if (result.success) {
          resultEl.className = "pass";
          resultEl.textContent = "PASS\n\n" + JSON.stringify(result.data, null, 2);
        } else {
          resultEl.className = "fail";
          var issues = result.issues.map(function(issue) {
            return "- " + issue.message + (issue.path ? " (path: " + issue.path.map(function(p) { return p.key; }).join(".") + ")" : "");
          }).join("\n");
          resultEl.textContent = "FAIL\n\n" + issues;
        }
      } catch (err) {
        resultEl.className = "fail";
        resultEl.textContent = "ERROR: " + err.message;
      }
    }
  </script>
</body>
</html>