Clickstream analytics on Azure - End to End

Question

Clickstream analytics on Azure - End to End

116 views Asked by Davide At 24 August 2023 at 09:40

I am trying to create a POC for an end to end Clickstream analytics solution using Azure products. The plan would be:

write a simple JS that captures the event I want to send to Azure. This will be part of the client side browser. Let's say an event might look like this

{
"event_name": "page_view",
"page_url": "https://stackoverflow.com/questions",
"time_stamp": "1692869137221"
}

use client side JS to send the event to Azure Event Hub
use Azure Functions to then store the event in Azure Blob
pull data from the Azure Blob and store them in a database

I am fine with point 1,3,4 but I struggle a bit to get my head around point 2 and how to pass the data from the client browser to Event Hubs following security best practices as of course I don't wanna expose Event Hubs credentials.

I am sure Azure has got something that doesn't imply you building your own API or endpoint before passing the data to Event Hub.

Has anyone done anything similar? Basically the main issue I have is:

How can you send a json object containing web analytics data from the client browser to Azure Event Hub in a secure way using JS? Ideally using Azure products only

Thanks,

Davide

Original Q&A

There are 1 answers

**Sampath** · Answer 1 · 2023-08-26T07:39:48+00:00

Used client side JS to send the event to Azure Event Hub.
Sends events to Azure Event Hubs based on user input from a web form. The client-side HTML form collects the necessary information and sends a POST request to the server, which then uses the Azure SDK to send an event to the specified Event Hub.

index.js

const  express = require('express');
const  {  EventHubProducerClient  } = require('@azure/event-hubs');
const  app = express();
const  port = process.env.PORT || 8080;
app.get('/',  (req,  res)  =>  {
res.sendFile(__dirname + '/index.html');
});
// ... (other routes)
app.get('/sendEvent',  async  (req,  res)  =>  {
const  connectionString = req.query.connectionString;
const  eventHubName = req.query.eventHubName;
const  producer = new  EventHubProducerClient(connectionString,  eventHubName);
const  eventData = {
event_name:  'page_view',
page_url:  'https://stackoverflow.com/questions',
time_stamp:  Date.now().toString()
};
try  {
await  producer.sendBatch([
{
body:  JSON.stringify(eventData)
}
]);
console.log('Event sent successfully');
res.json(eventData);  // Send event data as JSON response
}  catch (error) {
console.error('An error occurred while sending the event:',  error);
res.status(500).send('An error occurred while sending the event');
}  finally  {
await  producer.close();
}
});
app.listen(port,  ()  =>  {
console.log(`Server is running on port ${port}`);
});

index.html

<!DOCTYPE  html>
<html  lang="en">
<head>
<meta  charset="UTF-8">
<meta  name="viewport"  content="width=device-width, initial-scale=1.0">
<title>Azure Event Hub Client</title>
<style>
.popup  {
position:  fixed;
bottom:  20px;
left:  50%;
transform:  translateX(-50%);
padding:  10px  20px;
background-color:  rgba(0,  0,  0,  0.8);
color:  white;
border-radius:  5px;
font-size:  14px;
display:  none;
transition: display 0.5s;
}
.success  {
background-color:  rgba(70,  155,  70,  0.8);
}
.error  {
background-color:  rgba(200,  70,  70,  0.8);
}
</style>
</head>
<body>
<form  id="eventForm">
<label  for="connectionString">Connection String:</label>
<input  type="text"  id="connectionString"  required><br><br>
<label  for="eventHubName">Event Hub Name:</label>
<input  type="text"  id="eventHubName"  required><br><br>
<button  type="button"  id="sendEventButton">Send Event</button>
</form>
<div  id="popup"  class="popup"></div>
<script>
const  sendEventButton = document.getElementById('sendEventButton');
const  popup = document.getElementById('popup');
sendEventButton.addEventListener('click',  async  ()  =>  {
try  {
const  connectionString = document.getElementById('connectionString').value;
const  eventHubName = document.getElementById('eventHubName').value;  
const  response = await  fetch(`/sendEvent?connectionString=${encodeURIComponent(connectionString)}&eventHubName=${encodeURIComponent(eventHubName)}`);
if (response.ok) {
const  eventData = await  response.json();
showPopup(`Event sent successfully\nEvent Data:\n${JSON.stringify(eventData,  null,  2)}`,  'success');
// Use sendBeacon to asynchronously send data to the server
const  beaconData = JSON.stringify(eventData);
const  beaconSent = navigator.sendBeacon('/logEventData',  beaconData);
if (beaconSent) {
console.log('Beacon sent successfully');
}  else  {
console.error('Failed to send beacon');
}
}  else  {
showPopup('Failed to send event',  'error');
}
}  catch (error) {
console.error('An error occurred:',  error);
showPopup('An error occurred',  'error');
}
});
function  showPopup(message,  type)  {
popup.textContent = message;
popup.className = `popup ${type}`;
popup.style.display = 'block';
setTimeout(()  =>  {
popup.style.display = 'none';
},  3000);
}
</script>
</body>
</html>

In Local

enter image description here

In Azure: enter image description here

TechQA.

Clickstream analytics on Azure - End to End

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in AZURE-EVENTHUB

Related Questions in CLICKSTREAM

Popular Questions

Popular Tags

Trending Questions