Super easy guide to test schemas with Micro OR any Collector

If you will send events to a Collector, skip until step 6 and also skip step 12.6
NOTE: MICRO and Tracker Versions can vary, keep them updated!
Micro is now Self-Serve! you can run it locally (steps below) or you can simply create a Micro in one of our Snowplow Sandbox accounts. Steps are here https://docs.snowplow.io/docs/testing/snowplow-micro/console/
1. Once you finalize testing, delete the Micro from the Console Workspace to avoid unnecessary infra costs.
If you will use Snowplow Micro and sending just page views or OOTB events, use:

docker run -p 9090:9090 snowplow/snowplow-micro:4.2.0

1. Get the Iglu endpoint from a Console organization
2. Get an Iglu API Key
3. https://console.snowplowanalytics.com/iglu-keys If you need to use an external Iglu Repo:
4. ```
export MICRO_IGLU_REGISTRY_URL=https://com-example.iglu.snplow.net/api
export MICRO_IGLU_API_KEY=abcdef123456

docker run -p 9090:9090 \
  -e MICRO_IGLU_REGISTRY_URL \
  -e MICRO_IGLU_API_KEY \
  snowplow/snowplow-micro:4.2.0
```
5. REMEMBER TO DELETE API KEYS AFTER YOU ARE DONE!
6. Alternatively, you can add a custom schema to the Micro
7. OR you can also use a custom Iglu Resolver config file.
Then, create a single HTML file, name it index.html, with the next code.
If you need to send data to another Collector URL, just change it in tracker initialization code.
Page View example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snowplow Tracker Example</title>
    <!-- Load Snowplow Tracker from a CDN -->
    <script
      async
      src="https://cdn.jsdelivr.net/npm/@snowplow/javascript-tracker@4.7.0/dist/sp.min.js"
    ></script>
    <script>
      // Define GlobalSnowplowNamespace before loading the Snowplow tracker
      window.GlobalSnowplowNamespace = window.GlobalSnowplowNamespace || [
        "snowplow",
      ];

      // Initialize the Snowplow tracker
      window.snowplow =
        window.snowplow ||
        function () {
          (window.snowplow.q = window.snowplow.q || []).push(arguments);
        };

      // Configure the tracker, change the Collector endpoint below if needed!
      window.snowplow("newTracker", "spTracker", "http://localhost:9090", {
        appId: "my-app-id",
        platform: "web",
      });

      // Track page view
      window.snowplow("trackPageView");
    </script>
  </head>
  <body>
    <h1>Hello, Snowplow!</h1>
  </body>
</html>

SelfDescribingEvent example. Of course, change the schema being referenced! and use a custom Iglu from step 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snowplow Tracker - Custom Event</title>
    <script
      async
      src="https://cdn.jsdelivr.net/npm/@snowplow/javascript-tracker@4.7.0/dist/sp.min.js"
    ></script>
    <script>
      window.GlobalSnowplowNamespace = window.GlobalSnowplowNamespace || [
        "snowplow",
      ];
      window.snowplow =
        window.snowplow ||
        function () {
          (window.snowplow.q = window.snowplow.q || []).push(arguments);
        };

      // Configure the tracker, change the Collector endpoint below if needed!
      window.snowplow("newTracker", "spTracker", "http://localhost:9090", {
        appId: "my-app-id",
        platform: "web",
      });

      //A sample schema with values. This can be changed to any schema definition.
      function trackTournamentEvent() {
        window.snowplow("trackSelfDescribingEvent", {
          event: {
            schema: "iglu:com.acme/schema/jsonschema/1-0-5",
            data: {
              type: "widget",
              id: 12345,
              name: "Winter Championship",
              startTime: "2023-10-01T10:00:00Z",
              endTime: "2023-12-31T22:00:00Z",
              status: "active",
              gameIds: [101, 102, 103],
              gameNames: ["Blackjack", "Poker", "Roulette"],
              location: "tournaments page",
              elementPosition: "main_content",
              tournamentPosition: 1,
              productType: "casino",
            },
          },
        });
        console.log("Tournament event sent");
      }

      window.onload = function () {
        trackTournamentEvent();
      };
    </script>
  </head>
  <body>
    <h1>Track Custom Tournament Event</h1>
  </body>
</html>

Use NPM to create the simplest http server possible:
1. Install Brew and run the below commands in iTerm or any terminal:
2. ```
brew install npm
npm install -g http-server
cd /Folder/whith/index.html
http-server
```
3. Thats it. You have a working server. You can hit the above index.html by simply going to http://localhost:8080/
4. After hitting that, the events will fire automatically. You can check Developer Tools to troubleshoot any issues (Check Network and Console).
5. Changes to your html file will be instantly reflected. No need to restart the http-server.
6. Go to your Micro UI http://localhost:9090/micro/ui/ and see the Events :) (Or use the Console details to open your Micro if you used a self-serve one).
7. Happy hunting.