index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>iframe app</title>
		<style>
			body {
				font-family: sans-serif;
				display: flex;
				flex-direction: column;
			}
			#config-display {
				background-color: #f0f0f0;
				border: 1px solid #ccc;
				padding: 1rem;
				font-family: monospace;
				white-space: pre-wrap;
				border-radius: 8px;
			}
			input[type='text'],
			button {
				border-radius: 8px;
				padding: 0.5rem 1rem;
				border: 1px solid #ccc;
			}
			#end-task {
				align-self: flex-start;
			}
			.metric-sender {
				display: flex;
				gap: 0.5rem;
			}
		</style>
	</head>
	<body>
		<h3>metrics</h3>
		<div class="metric-sender">
			<input type="text" id="metric-name" placeholder="name" />
			<input type="text" id="metric-value" placeholder="value" />
			<button id="send-metric">send Metric</button>
		</div>

		<h3>task control</h3>
		<button id="end-task">end Task</button>

		<h3>configuration</h3>
		<pre id="config-display">Waiting for configuration...</pre>

		<script>
			const post = (message) => window.parent.postMessage(message, '*');

			const byId = (id) => document.getElementById(id);

			byId('end-task').addEventListener('click', () => post({ eventType: 'endTask' }));

			byId('send-metric').addEventListener('click', () => {
				const name = byId('metric-name').value;
				const value = byId('metric-value').value;

				if (!name || !value) {
					return;
				}
				post({
					eventType: 'metrics',
					metricName: name,
					metricValue: `${value}`,
					adType: 'custom',
					elementId: 'basket',
					metricType: 'discrete',
				});
				byId('metric-name').value = '';
				byId('metric-value').value = '';
			});

			window.addEventListener('message', (event) => {
				if (event.data.eventType !== 'setConfiguration') {
					return;
				}

				byId('config-display').textContent = JSON.stringify(event.data, null, 2);
			});

			post({ eventType: 'contentStart' });
		</script>
	</body>
</html>