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!
If you will use Snowplow Micro and sending just page views or OOTB events, use:

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

1. Get the Iglu endpoint from a BDP 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:2.3.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@3.24.4/dist/sp.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
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@3.24.4/dist/sp.js"></script>
<script>
window.GlobalSnowplowNamespace = window.GlobalSnowplowNamespace || ['snowplow'];
window.snowplow = window.snowplow || function () {
(window.snowplow.q = window.snowplow.q || []).push(arguments);
};

window.snowplow('newTracker', 'spTracker', 'http://localhost:9090', {
appId: 'my-app-id',
platform: 'web',
});

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 :)
7. Happy hunting.